CSS Nedir?

Tam kapanmanın ilk sabahından herkese Günaydın! Kategorisini oluşturmama rağmen bir türlü başlayamadığım CSS diline ufaktan giriş yapacağız. CSS Web geliştirmede önemli yere sahiptir. Açılımı CSS- Cascading Style Sheets olarak geçmektedir. Temel atmak adına CSS nedir diyerek başlayalım.

CSS Nedir?

HTML Nedir? isimli yazımda bir resim vardı hatırlıyor musunuz?

HTML, Javascript, Css
HTML, Javascript, Css

Bu resimden bile çok şey anlamak mümkün. Gördüğünüz üzere HTML bir web sitesinin iskeleti iken CSS sitemize görünüm adına birçok özellik katan bir yapı. Şimdi de CSS’in özelliklerine bakalım.

CSS’in Özellikleri

▶ CSS, Web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir. ▶ Still sayfaları web sayfası tasarımcılarının, sayfa görünümlerini daha hareketli hale getirmelerini sağlayan .css uzantılı dosyalardır. ▶ Css kullanırken kullanacağımız etiket <STYLE> dir. CSS’i HTML sayfalarımıza eklemenin 3 yöntemi vardır.

CSS’i HTML’e ekleme yolları
  • Satır içinde (In-line) style özelliği kullanarak
  • Sayfa Başında <style> etiketi kullanarak
  • Harici CSS dosyası kullanarak
    • <link rel = …> özelliği
    • @import özelliği

Satır içinde (in-line) style özelliği kullanarak

Tüm CSS komutlarını geliştirmesini yaptığımız kodların içine direk uygulamak önerilen bir kodlama şekli değildir. Ancak özel durumlarda kullanılabilir. Önerilmemesinin en büyük nedeni kodun okunabilirliğini düşürüp çok daha zahmetli bir işlem olmasıdır. Bunun yerine yapılabilecek metotları birazdan göreceğiz. Gelin şimdi bununla ilgili bir örnek yapalım.

Örnek:

1-) <p style= “font:10pt verdana;color:green“>…….</p>

Yukarıdaki örnekte HTML Nedir yazımızdan aşina olduğumuz “tag” kavramı var. Zaten başta belirttiğimiz gibi CSS, HTML’in içine bu şekilde satır içinde dahil edilebilir. Yukarıda bulunan “font:10pt verdana” veya “color:green” kavramları şimdilik kafanızı karıştırmasın. Hepsine tek tek bakacağız. Gelin şimdi bir örnek daha yapalım.

2-) <p style = “color:#12ddfa;“>Bu cümle mavi renktedir.</p>

Burada renk kodlarından mavi rengin kodunu kullanarak cümleyi mavi renkte yazdık. Kafanızda yerleşmesi için 2 adet örnek ile satır içinde nasıl CSS kullanılır öğrenmiş olduk. Geldik 2. yola “Sayfa Başında <style> etiketi kullanarak…”

Sayfa Başında <style> etiketi kullanarak

HTML’de öğrendiğimiz <head> kavramı tam olarak burada işimize yarıyor. Bir projedeki <head>…</head> etiketleri arasına <style> elemanı içinde CSS kodu yazılarak uygulanır. Şimdi bir örnek yaparak pekiştirelim.

Örnek:

<head>
<title>CSS'de sayfa başında style etiketi kullanma ile ilgili uygulama</title>
<style type="text/css">
p{color:blue;}
</style>
</head>

Bu örnekte title yazan kısım web sitemizin başlığını belirtmektedir. Burada style etiketi içerisinde yazan type=”text/css” asıl önemli kısımdır. Bu style’ın tipinin CSS dosyası olduğunu belirtmektedir.

Son olarak 3. yol “Harici CSS dosyası kullanarak..”

Harici CSS dosyası kullanarak

Bu metot sayesinde CSS kodlarımızı .css uzantılı bir dosyaya kaydederiz. Bu sayede istediğimiz gibi genel veya özel değişiklik yapabiliriz. Örneğin “style.css” ismini verdiğimiz dosyada düzenleme yapabiliriz. Peki bunu nasıl kullanacağız derseniz, HTML’de bulunan <head> etiketi içerisinde sayfaya eklenir. Bunu yapmak için de 2 yolumuz mevcut.

1-) <link rel=…..> özelliği : Bu özelliği kullanırken içerisine 3 adet parametre alan bir tag yazacağız. Örnek vericek olursak.

<link rel="stylesheet" type="text/css" href="ornek1.css" />

İlk baştaki “link rel=”stylesheet” güncel ilgili sayfanın stil şablonlarını içerdiğini ifade eder. Bir diğer renkle belirttiğim “type=”text/css” dosyanın tipinin CSS olduğunu belli ediyor. Son olarak href=”ornek1.css” ise ekleyeceğimiz dosyanın adını temsil ediyor.

2-) @import özelliği: Bu özelliği kullanırken <Head> tagleri arasında açtığımız <style> taglerinin arasında yazıyoruz. Şimdi bir örnekle pekiştirelim.

<style type="text/css"> 
@import "ornek2.css"; 
</style>

Entegre edeceğimiz CSS dosyasını bu şekilde style taglerinin arasında @import “ornek2.css”; şeklinde ekleyebiliriz.

Bu yazımda CSS hakkında hem temel düzeyde giriş yapmış olduk. Hem de projelerimizde, geliştireceğimiz sitelerde CSS’in, HTML dosyasıyla birlikte nasıl kullanılır gördük. Artık sizde HTML ve CSS yazılarının ardından benimle birlikte bir web sitesi geliştirebilirsiniz.

Bir sonraki yazıda görüşmek üzere…

Herkese sağlıklı günler dilerim. ❀

One thought on “CSS Nedir?

Yorumlar kapatıldı.