CSS Nedir ve Nasıl Kullanılır?

Mayıs 2019
YouTube'ta Takip Et:

CSS, HTML ile kodladığımız sayfaları görsel olarak güzelleştirmemizi sağlar. CSS, evin dekoru gibidir. Koltuk takımının tipi, masa rengi, duvar kağıdı gibi dekoratif malzemelerle somutlaştırabiliriz CSS’i. HTML ile hazırladığımız web sitesindeki her nesnenin boyutu, rengi, varsa border çizgisi, gölgeleri gibi unsurları CSS ile ayarlayabiliriz.

Tasarımcı bile olsanız web siteleri hazırlıyorsanız HTML ve CSS’i bilmenizin size büyük faydası vardır. Bootstrap temaları gibi temalar üzerinde düzenleme yapabilmeniz için yeterli seviyede CSS bilin. CSS çok zor bir dil olmadığı gibi, öğrenmesi de oldukça eğlencelidir.

CSS’in temel mantığı şu şekilde. HTML derslerinde de gördüğümüz gibi paragraf anlamına gelen p etiketlerinin satır aralığı şu kadar olsun, h2 etiketlerinin boyutu, rengi, yazı tipi şu olsun şeklinde belirlemeler yapılıyor. Sayfa içerisinde ilgili HTML etiketini bulup, belirlediğiniz düzenlemeler ile sayfayı şekillendiriyor.

CSS Nasıl Yazılır?

CSS’i bir sayfaya tanımlayabilmek için üç farklı yol vardır. Bir dosyaya yazıp sayfaya çağırmak, dosya yerine aynı kodları sayfa içine yazmak ve satır içine yazılan kodlar. Temelde bu üç türün de CSS yazım yapısı aynı, ancak kullanım yerleri değişiyor sadece.

CSS Kodlarının Sayfa İçinde Yazımı

CSS kodlarını sayfa içerisinde head etiketleri arasına yazıyoruz. Head etiketleri arasında style etiketlerini kullanıyoruz. Aşağıdaki örneği çözümleyelim. Stiller, sayfa içinde style etiketleri arasına yazılıyor. p etiketi, sayfadaki paragrafları hedefliyor ve onlara renk değerini veriyor. Böylece sayfa içerisindeki tüm p etiketlerine sahip yazılar siyah renge dönüşüyor. Tüm h1 etiketlerinin de boyutu 24px olarak ayarlanıyor.

CSS Dosyaları Sayfaya Nasıl Dahil Edilir?

CSS yazımının ikinci ve en çok kullanılan yolu bu. Üstteki CSS kod örneğini style.css adında bir dosyaya kaydedip, içeriğimizin bulunduğu index.html sayfasına nasıl çağırabileceğimizi öğreneceğiz. Dışarıdan CSS çağırmak web sitelerinizde olması gereken bir yöntem ve kodlarınızın daha derli toplu olmasını sağlar.

İşte tipik bir CSS dosyası çağırma örneği. Head etiketleri arasında bu konu yazıyoruz ve index.html ile aynı klasördeki style.css’i sayfaya çağırıyor. Eğer CSS dosyanız CSS klasörünün altında olursa style.css yazısını css/style.css olarak değiştirmeniz gerekiyor ki CSS dosyasının nerede olduğunu bulabilsin.

Satır İçi CSS

Bu kod yazım stili de satır içinde, HTML kodları arasına eklerken kullanılır. Örnekteki gibi style ile başlar ve standart şekilde stiller yazılmaya başlanır.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.