CSS Nedir?

CSS Nedir?

CSS nedir?” sorusu yazılımcılığa yeni adım atan hevesli öğrencilerin cevabını en çok merak ettiği sorulardan biri. Tüm web geliştirme için temel oluşturan dil HTML ise CSS de onun en yakın akrabasıdır diyebiliriz.

CSS nedir sorusunu cevaplamadan önce, CSS ve çalışma mantığı hakkında bilgiler vereceğiz. CSS, özellikle HTML dili ile ilişkisi içerisinde düşünüldüğünde çok daha iyi bir şekilde kavranacaktır. Yazılımın tasarımla buluştuğu CSS için giriş dersine başlayalım o halde.

CSS Nedir? HTML ile İlişkisi Nedir?

CSS Nedir? CSS’in açılımı “Cascading Style Sheets”dir. Genelde bu açılım kullanılmaz ama mantığın iyi kavranabilmesi açısından Türkçe tercümesini de yazalım: Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları.

Türkçe tercümesinden de anlaşılacağı üzere CSS bir biçimlendirme dili. HTML ile başlıklar, paragraflar, resim video gibi şeylerin tanımlanır ve yerleştirilirken CSS ile bu belirlenen nesnelerin rengi, yazı tipi gibi biçimsel özellikleri belirlenir. Basit bir benzetme yapmak gerekirse, HTML bir evin ham inşaat haliyse CSS evin tüm estetik kısmını kapsayacak düzenlemelerdir.

Web Tasarım

CSS Nasıl Çalışır?

CSS, HTML öğeleriyle etkileşime girerek web sayfalarını stilize eder.

Örnekle açıklayalım:

<p> Bu benim paragrafım! </p>

Bu paragrafın pembe ve bold görünmesini istiyorsanız aşağıdaki CSS kodunu kullanarak bunu yapabilirsiniz:

p {color:pink; font-weight:bold;}

Bu durumda, “p” (yani paragraf) seçici olarak adlandırılır. CSS stilinin hangi HTML öğesini etkileyeceğini belirtir. CSS’de, seçici ilk kıvrımlı parantezin soluna yazılır. Kıvrımlı parantezlerin arasındaki bilgilere bildirim denir ve seçiciye uygulanan özellikleri ve değerleri içerir. Yazı tipi, boyutu, renk, kenar boşlukları gibi şeyler özelliklerdir. Değerler ise özelliklerin ayarlarıdır. “Renk” ve “yazı tipi kalınlığı” özellikken, “pembe” ve “kalın” değerlerdir.

{color:pink;  font-weight:bold;}

İfadesinde de yine “p” seçicidir. Aynı temel ilkeler arka plan renkleri, kenar boşlukları gibi değişiklikleri yapmak için de kullanılır.

Örneğin;

  • body {background-color:lightblue;}

sayfanızın arka planını açık mavi yapar

  • p {font-size:20px; color:red;}

kırmızı harflerle 20 puntoluk yazı tipi paragrafı oluşturur.

Harici, Dahili ve Satır İçi CSS Nedir?

CSS kodunun HTML içeriğine uygulanabilmesi için üç farklı yol vardır.

  • Harici: Sayfalar .css dosyası olarak kaydedilir ve web sitesinin görünümünü belirlemek için kullanılabilir.
  • Dahili: Doğrudan bir .html sayfasının başlığına yazılan CSS talimatlarıdır.
  • Satır içi: Doğrudan HTML koduna yazılan ve yalnızca tek bir kodlama örneği için geçerli olan CSS parçacıklarıdır.

Ankara SEO

Menü