CSS, HTML elementlerimize renk, layout, yazı tipi ve daha birçok görsel stil kazandırarak onları çekici ve kullanıcı dostu web sayfalarına dönüştürür. inceleyelim.

1. CSS Nedir?

CSS, HTML elementlerinin ekranda, kağıda veya diğer ortamlarda nasıl görüntüleneceğini tanımlayan bir stil şablonu dilidir. HTML iskeleti oluşturur, CSS ise ona giydirilecek kıyafeti, makyajı ve stilleri belirler.

2. CSS Nasıl Eklenir? (3 Yöntem)

CSS'i HTML belgemize 3 farklı şekilde ekleyebiliriz:

1. Satır İçi (Inline) CSS: Her bir HTML elementine style özelliği kullanarak doğrudan eklenir. Önerilmez (kod kalabalığı yapar, yönetmesi zordur). 

<h1 style="color: blue; text-align: center;">Başlık</h1>

2. Dahili (Internal) CSS: HTML belgesinin <head> bölümüne <style> etiketleri arasına yazılır. Küçük projeler veya tek sayfalık stiller için uygundur. 

<head>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
    </style>
</head>

3. Harici (External) CSS - EN İYİ YÖNTEM: Tüm CSS kurallarının ayrı bir .css dosyasında yazıldığı ve HTML belgesine <link> etiketi ile bağlandığı yöntemdir. Tavsiye edilen yöntem budur çünkü:

  • Aynı stil şablonu birçok sayfada kullanılabilir.
  • Kod düzenli ve yönetilebilir kalır.
  • Sayfa yükleme hızını artırır.

style.css (Harici CSS Dosyası): 

h1 {
    color: blue;
    text-align: center;
}

index.html (HTML Dosyası): 

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

3. CSS Syntax (Sözdizimi) ve Selectors (Seçiciler)

Bir CSS kuralı nasıl yazılır? Temel yapıyı anlamak çok önemli. 

selector {
    property: value;
    property: value;
}
  • Selector: Stil uygulamak istediğimiz HTML elementini (veya elementlerini) "seçen" kısımdır.
  • Declaration (Bildirim): Süslü parantezler {} içindeki kısımdır.
  • Property (Özellik): Değiştirmek istediğimiz stil özelliği (color, font-size vb.).
  • Value (Değer): Özelliğe atadığımız değer (red, 20px vb.).

En Yaygın Basit Seçici Türleri:

Element Seçici: HTML etiket adı ile seçer. 

p {
    color: green;
}

Class Seçici: HTML'de class attribute'u ile seçer. Nokta (.) ile başlar. Birçok elementte kullanılabilir. 

<!-- HTML -->
<p class="kirmizi-yazi onemli">Bu bir paragraf.</p>
<div class="kirmizi-yazi">Bu bir div.</div>

  

/* CSS */
.kirmizi-yazi {
    color: red;
}
.onemli {
    font-weight: bold;
}

ID Seçici: HTML'de id attribute'u ile seçer. Diyez (#) ile başlar. Bir sayfada aynı ID'den sadece bir tane olmalıdır. 

<!-- HTML -->
<header id="main-header">Site Başlığı</header>

  

/* CSS */
#main-header {
    background-color: lightgray;
    padding: 20px;
}

4. Temel CSS Özellikleri ile Hemen Başlayalım

İşte hemen kullanabileceğiniz bazı temel CSS özellikleri:

a) Renkler ve Arkaplanlar:

color: Metin rengini belirler. (red, #ff0000, rgb(255, 0, 0))

background-color: Arkaplan rengini belirler.

background-image: Arkaplan resmi ekler (background-image: url('resim.jpg');).

b) Metin ve Yazı Tipleri (Fonts):

font-family: Yazı tipi ailesini belirler (font-family: Arial, sans-serif;).

font-size: Yazı boyutunu belirler (font-size: 16px;, font-size: 1.2em;).

text-align: Metin hizalamasını belirler (text-align: center;).

c. Kutu Modeli (Box Model) - ÇOK ÖNEMLİ:
HTML'deki her element bir kutudur. Bu kutunun etrafını saran 4 katman vardır:

Content (İçerik): Metin ve resimlerin olduğu kısım.

Padding (İç Boşluk): İçerik ile border arasındaki boşluk. Arkaplan renginden etkilenir.

Border (Kenarlık): Kutunun etrafındaki çizgi.

Margin (Dış Boşluk): Bir elementin diğer elementlerle arasındaki boşluk. Şeffaftır, arkaplan renginden etkilenmez. 

.kutum {
    width: 300px;
    padding: 20px; /* İçerikten border'a olan boşluk */
    border: 5px solid black; /* border-width | border-style | border-color */
    margin: 30px; /* Diğer kutularla aramdaki boşluk */
    background-color: lightblue;
}