Sevgili öğrenciler, bu ders notu "CSS nedir (Temel CSS kodları) Test 1" sınavında karşılaşabileceğiniz temel CSS kavramlarını, söz dizimini ve sık kullanılan özelliklerini sade bir dille özetlemektedir. Amacımız, web sayfalarına stil vermenin inceliklerini kolayca anlamanıza yardımcı olmaktır.
CSS (Cascading Style Sheets), web sayfalarınızın nasıl görüneceğini belirleyen bir stil dilidir. HTML, bir web sayfasının iskeletini (yapısını) oluştururken, CSS bu iskeleti giydiren, renklendiren ve şekillendiren "kıyafetler" gibidir.
💡 İpucu: HTML bir evin tuğlaları ve odaları gibiyken, CSS evin boyası, mobilyaları ve dekorasyonu gibidir.
CSS kuralları belirli bir yapıya sahiptir. Her CSS kuralı bir seçici (selector) ve bir veya daha fazla bildirimden (declaration) oluşur.
color, font-size).blue, 16px).Örnek:
p {
color: blue;
font-size: 16px;
}Yukarıdaki örnekte p seçici, color ve font-size özellik, blue ve 16px ise değerlerdir.
CSS kodlarını HTML dosyasına üç farklı şekilde ekleyebilirsiniz:
.css dosyasında tutulur ve HTML dosyasına <link> etiketi ile bağlanır.
<head>
<link rel="stylesheet" href="stil.css">
</head><head> bölümünde <style> etiketleri arasına yazılır. Genellikle tek bir HTML sayfası için özel stiller gerektiğinde kullanılır.
<head>
<style>
h1 {
color: green;
}
</style>
</head>style niteliği içine yazılır. Yalnızca belirli bir öğeye özel ve tek seferlik stil vermek için kullanılır. Genellikle tavsiye edilmez çünkü içeriği ve stili birbirine karıştırır.
<p style="color: red; font-size: 14px;">Bu bir paragraftır.</p>⚠️ Dikkat: Harici CSS, kod tekrarını önler, bakımı kolaylaştırır ve sayfa yükleme hızını artırabilir. Genellikle tercih edilen yöntemdir.
Seçiciler, HTML belgesindeki belirli öğeleri hedeflemenizi sağlar:
p, h1, div).
p {
color: purple;
}class niteliğine sahip öğeleri seçer. Bir sayfada birden fazla öğe aynı sınıfa sahip olabilir. CSS'te . (nokta) ile başlar. (Örn: .ozel-yazi).
.ozel-yazi {
font-weight: bold;
}id niteliğine sahip tek bir öğeyi seçer. Bir sayfada aynı id değerine sahip birden fazla öğe bulunmamalıdır. CSS'te # (kare) ile başlar. (Örn: #ana-baslik).
#ana-baslik {
text-align: center;
}💡 İpucu: Class seçicileri genel stiller için, ID seçicileri ise sayfanızdaki benzersiz öğeler için kullanılır.
İşte CSS'te en sık kullanılan bazı özellikler:
color: Metin rengini belirler. (Örn: color: red;)background-color: Bir öğenin arka plan rengini belirler. (Örn: background-color: lightblue;)font-family: Metnin yazı tipini (font) belirler. (Örn: font-family: Arial, sans-serif;)font-size: Metnin boyutunu belirler. (Örn: font-size: 18px;)text-align: Metnin yatay hizalamasını belirler. (Örn: text-align: center;)margin: Bir öğenin dış kenar boşluğunu (diğer öğelerle arasındaki boşluk) belirler. (Örn: margin: 10px; veya margin-top: 5px;)padding: Bir öğenin iç kenar boşluğunu (içeriği ile kenarı arasındaki boşluk) belirler. (Örn: padding: 15px; veya padding-left: 20px;)border: Bir öğenin kenarlığını (çerçevesini) belirler. (Örn: border: 1px solid black;)Web sayfasındaki her HTML öğesi, bir "kutu" olarak kabul edilir. CSS Kutu Modeli, bu kutuların nasıl düzenlendiğini ve boşluklarının nasıl ayarlandığını açıklar. Her kutu dört ana bölümden oluşur:
📝 Örnek: Bir fotoğraf çerçevesini düşünün. Fotoğraf içeriğinizdir. Fotoğraf ile çerçevenin iç kenarı arasındaki boşluk dolgu (padding) olur. Çerçevenin kendisi kenarlık (border) ve çerçeve ile duvardaki diğer tablolar arasındaki boşluk da dış kenar boşluğu (margin) olur.
CSS kodlarınıza açıklama eklemek için yorum satırlarını kullanabilirsiniz. Yorumlar tarayıcı tarafından okunmaz ve kodun çalışmasını etkilemez. Kodunuzu daha anlaşılır hale getirir ve gelecekteki değişiklikleri kolaylaştırır.
/* ile başlar ve */ ile biter.Örnek:
/* Bu bir CSS yorum satırıdır. */
p {
color: blue; /* Paragraf metin rengi */
}Umarız bu notlar, CSS temellerini anlamanıza ve sınavınızda başarılı olmanıza yardımcı olur! Başarılar dileriz! 🚀