Herkese tekrar merhabalar, bu yazımda sizlere CSS’in temellerinden, ne işe yaradığından ve HTML ile ilişkisinden bahsedeceğim.

CSS Görseli (Görsel 1)

Açılımı “Cascading Style Sheets (Basamaklanmış Stil Katmanları)” olan CSS, HTML yardımıyla hâlihazırda içeriğini/temelini oluşturmuş olduğumuz web sayfamızı görsel açıdan geliştirmemizi sağlayan bir başka işaretleme (markup) dilidir. Genel itibariyle CSS bize web sayfamızda kullanılan renkler, fontlar ve görsel efektler gibi unsurlar üzerinde fonksiyonel bir denetim sunar. Bir nevi web sitemize canlılık kazandırarak siyah-beyaz bir televizyon görünümünden kurtarmamızı sağlar.

 CSS’i bu kadar ünlü yapan en önemli özelliği kullanım kolaylığıdır. Sitemize ait tüm CSS kodlarını, harici bir dosyada toplayarak tek bir dosya üzerinden tüm sitede değişiklik yapabiliriz. Bu durum sitemiz üzerinde daha etkili bir kontrol sağlar ve aradığımızı bulmamızı kolaylaştırır. Elbette istersek CSS düzenlemelerimizi HTML belgemiz üzerinden de yapabiliriz. CSS de HTML gibi herhangi bir metin editörü ile yazılabilir.

CSS ayrıca sitemizi uyumlu hale getirmek amacıyla farklı tarayıcılar ve platformlar için özel olarak değişiklik yapmamıza olanak sağlar. Böylece sitemizi tablet ve telefon gibi cihazlara uyarlayarak daha ilgi çekici ve ulaşılabilir hale getirebiliriz.

CSS – HTML İlişkisi

CSS ile HTML arasındaki ilişkiyi sıkça kullanılan “insan vücudu” benzetmesi ile örneklemek istiyorum. Bu benzetmeye göre web sitemizi bir insan vücudu gibi düşünecek olursak vücudun temelini oluşturan yapı olan iskeletimizi HTML; vücuda estetik kazandırarak iskeletin kaba görüntüsünü örten dış katmanı da CSS olarak düşünebiliriz.

CSS – HTML İlişkisi (Görsel 2)

CSS’in Stil Sayfa Çeşitleri

CSS kodlarını HTML belgelerine uyarlamak için “Inline”, ”Internal” ve “External” olmak üzere kullanılan üç stil çeşidi vardır.

1-Inline Style (Satır İçi Stil)

Bu stil şekliyle CSS kodlarını belirtilen etiket içinde “style” elementi ile yazabiliriz. Kod, yalnızca içerisine yazıldığı etiketin stilini değiştirecektir. Örneğin; aşağıdaki kod, p etiketinin içeriğinin rengini ve boyutunu değiştirir.

<p style="color: red; font-size: 20px;">

2- Internal Style (İç Stil)

CSS kodlarını <head> etiketi içerisinde bir <style> etiketi açarak yazdığımız stildir. Bu yöntem ile sayfamızda birden fazla bulunan aynı çeşit etiketlere tek tek stil tanımlamak yerine, hiç uğraşmadan tek bir etiket ile hepsinde birden istenilen stili tanımlayabiliriz. Aşağıdaki kod, yazıldığı sayfanın arka planını gri; paragraflarını yeşil ve boyutunu 20 pixel olarak değiştirecektir.

<head>
 <style>
 body  {  
       background-color:gray;  
       }
 p  {  
    font-size:22px;  color:green;  
    }
 </style>
</head>

3-External Style (Harici Stil)

Sağladığı kolaylık sebebiyle en çok kullanılan bu stil çeşidi, CSS kodlarını “.css” uzantılı ayrı bir dosyaya yazıp <link> etiketi ile (<head> etiketi altında) HTML dosyasına bağlar. Bu sayede fazlalık kodlardan kurtulmuş oluruz ve tüm CSS kodlarını, HTML kodlarından ayrı bir sayfada denetleyebiliriz.

Aşağıdaki kod, “style” adını verdiğimiz .css uzantılı dosyayı HTML belgemize bağlar.

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

Peki ya bir istisna yapmamız gerekirse? Diyelim ki sayfanın ana yazı rengini harici bir stil sayfasında siyah olarak tanımladık. Ancak bazı belirlediğimiz satırların mavi renkte yazılmasını istiyoruz. Bunun için yalnızca o satırda değişiklik yapmaya olanak sağlayan satır içi (Inline) kodlardan yararlanacağız. Böylece sayfanın tümünde yazılar siyah iken satır içi kodlarla belirlediğimiz satırlar istisna olarak mavi renkte yazılacaktır.

Kaynakça:

Görsel Kaynakça:

Görüntülenme Sayısı:
49 views