CSS ile Selectors ve PSEUDO ~ Webkolog

Merhaba Webkolog takipçileri!

Bugün sizlerle web sayfalarımıza ruh katan, onlara görsel bir kimlik kazandıran CSS (Cascading Style Sheets) dünyasına adım atacağız. Bir web sayfasının HTML iskeleti ne kadar sağlam olursa olsun, onu güzel gösteren, okunabilir kılan ve etkileşimli hale getiren şey CSS'tir. Gelin, CSS'in temellerini, seçicileri ve pseudo kodları birlikte keşfedelim!

CSS Nedir ve Neden Önemlidir?

CSS, adından da anlaşılacağı gibi, "Basamaklı Stil Sayfaları" anlamına gelir. Temel görevi, HTML elementlerinin ekranda nasıl görüneceğini (renk, yazı tipi, boyut, düzen vb.) tanımlamaktır. CSS olmadan, web sayfaları sıkıcı ve düz metin yığınlarından ibaret olurdu. CSS sayesinde:

Web sitelerimize estetik bir görünüm kazandırabiliriz.
İçeriği düzenli ve okunabilir hale getirebiliriz.
Farklı cihazlara (masaüstü, tablet, telefon) göre duyarlı tasarımlar oluşturabiliriz.
HTML yapısını içerikten ayırarak kodun bakımını ve okunabilirliğini artırabiliriz.

CSS Kullanım Şekilleri

CSS kodlarınızı HTML belgenize üç farklı şekilde dahil edebilirsiniz:

Harici Stil Sayfası (External Style Sheet): En çok tercih edilen yöntemdir. Tüm CSS kodlarınızı ayrı bir .css dosyasına yazıp, HTML belgenize <link> etiketi ile bağlarsınız. Bu sayede tek bir CSS dosyasıyla birden fazla HTML sayfasını stilize edebilir, değişiklikleri merkezi bir yerden yönetebilirsiniz.

<link rel="stylesheet" href="stil.css">

Dahili Stil Sayfası (Internal Style Sheet): CSS kodlarını HTML belgesinin <head> bölümündeki <style> etiketleri arasına yazarsınız. Genellikle tek sayfalık veya çok küçük projeler için kullanılır.


<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

Satır İçi Stil (Inline Style): Doğrudan HTML elementinin style niteliği içine yazılır. Çok spesifik durumlar dışında pek tavsiye edilmez, çünkü kodun okunabilirliğini ve bakımını zorlaştırır.


<p style="color: red; font-size: 16px;">Bu paragraf kırmızıdır.</p>

CSS'in Temel Yapısı

CSS kuralları basit bir yapıya sahiptir:


seçici {
    özellik: değer;
}

Burada seçici, hangi HTML elementini hedeflediğimizi belirtirken; özellik, değiştirmek istediğimiz stilin adını (örneğin color, font-size) ve değer ise bu özelliğin alacağı karşılığı (örneğin red, 16px) ifade eder.

Örnek:


p { /* Seçici: Tüm <p> etiketleri */
    color: green; /* Özellik: Renk, Değer: Yeşil */
    font-family: Arial, sans-serif; /* Özellik: Yazı tipi, Değer: Arial veya benzeri */
}

CSS Seçicileri: Hedefi Belirleme Sanatı

CSS'in gücünün büyük bir kısmı, elementleri ne kadar hassas bir şekilde seçebildiğimizden gelir. İşte en yaygın seçici türleri:

Element Seçiciler

Tüm belirli HTML elementlerini seçer.


div {
    background-color: lightblue;
}

Bu kod, sayfadaki tüm <div> elementlerinin arka plan rengini açık mavi yapar.

ID Seçiciler (#)

Belirli bir id niteliğine sahip tek bir elementi seçer. Bir ID, bir HTML belgesinde yalnızca bir kez kullanılmalıdır.


#baslik {
    font-size: 36px;
    text-align: center;
}

Bu seçici, id="baslik" olan elementi hedef alır.

Sınıf Seçiciler (.)

Belirli bir class niteliğine sahip tüm elementleri seçer. Bir sınıf adı birden fazla elementte kullanılabilir.


.kirmizi-metin {
    color: red;
}

Bu seçici, class="kirmizi-metin" olan tüm elementlere kırmızı renk verir.

Türev Seçiciler (Descendant Selectors)

Belirli bir elementin içindeki (torunu olan) elementleri seçer.


ul li {
    list-style-type: square;
}

Bu kod, <ul> etiketi içindeki tüm <li> etiketlerinin liste işaretçilerini kare yapar.

Pseudo Sınıflar (Pseudo-classes): Element Durumlarına Stil Verme

Pseudo sınıflar, bir elementin belirli bir durumdayken nasıl görüneceğini tanımlamamızı sağlar. Örneğin, bir bağlantının üzerine gelindiğinde rengini değiştirmek gibi:

:hover: Elementin üzerine fare imleci geldiğinde.
:active: Element tıklanırken.
:focus: Form elemanları gibi odaklanılabilir bir element seçildiğinde.
:link: Ziyaret edilmemiş bağlantılar.
:visited: Ziyaret edilmiş bağlantılar.
:first-child: Ebeveyninin ilk çocuğu olan element.
:last-child: Ebeveyninin son çocuğu olan element.


a:hover {
    color: orange;
    text-decoration: underline;
}

input:focus {
    border: 2px solid blue;
}

li:first-child {
    font-weight: bold;
}

Pseudo Elementler (Pseudo-elements): Elementin Bölümlerine Stil Verme

Pseudo elementler, bir elementin belirli bir bölümüne stil uygulamamızı sağlar. Örneğin, bir paragrafın ilk harfini veya ilk satırını stilize etmek gibi:

::first-letter: Bir metin bloğunun ilk harfi.
::first-line: Bir metin bloğunun ilk satırı.
::before: Elementin içeriğinden önce içerik ekler.
::after: Elementin içeriğinden sonra içerik ekler.


p::first-letter {
    font-size: 2em;
    color: purple;
}

h4::after {
    content: " (Yeni!)";
    color: green;
}

CSS Öncelik Kuralları

Birden fazla CSS kuralı aynı elemente uygulanmaya çalıştığında, CSS bir öncelik sırasına göre hangi kuralın geçerli olacağına karar verir. Bu öncelik, "özgüllük" (specificity) olarak adlandırılır. Genel olarak öncelik sırası şöyledir (en yüksekten en düşüğe):

Inline CSS: Doğrudan HTML elementinin style niteliği içine yazılan stiller.
ID Seçiciler: #id_adi
Sınıf Seçiciler, Nitelik Seçiciler, Pseudo Sınıflar: .class_adi, [nitelik], :hover
Element Seçiciler ve Pseudo Elementler: div, ::before

Aynı özgüllüğe sahip kurallarda, son yazılan kural geçerli olur. Ayrıca, !important anahtar kelimesi, bir stilin önceliğini zorla artırır, ancak genellikle iyi bir uygulama olarak kabul edilmez çünkü stil çatışmalarına yol açabilir.

CSS, web tasarımındaki sınırsız olasılıklar dünyasının kapılarını aralayan temel bir beceridir. Seçicileri ve pseudo kodları ustaca kullanarak, sitelerinize istediğiniz görünümü verebilir, kullanıcı deneyimini zenginleştirebilirsiniz. Unutmayın, CSS'te pratik yapmak ve farklı kombinasyonları denemek, öğrenmenin en iyi yoludur!

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!

12 Ağustos 2006 Cumartesi