CSS (Cascading Style Sheets) Basamaklı Stil Sayfaları(Şablonu) anlamına gelir.
CSS birçok işten tasarruf sağlar. Birden fazla web sayfasının düzenini aynı anda kontrol etmenizi sağlar.
CSS Nedir?
Basamaklı Stil Sayfaları (CSS), bir web sayfasının düzenini biçimlendirmek için kullanılır.
CSS ile rengi, yazı tipini, metnin boyutunu, öğeler arasındaki boşluğu, öğelerin nasıl konumlandırıldığını ve düzenlendiğini, hangi arka plan resimlerinin veya arka plan renklerinin kullanılacağını, farklı cihazlar ve ekran boyutları için farklı görüntüleri ve daha fazlasını sunar.
Not: Basamaklı sözcüğü, bir üst öğeye uygulanan stilin aynı zamanda üst öğe içindeki tüm alt öğelere de uygulanacağı anlamına gelir. Dolayısıyla, gövde metninin rengini “mavi” olarak ayarlarsanız gövde içindeki tüm başlıklar, paragraflar ve diğer metin öğeleri de aynı rengi alır. CSS içinde aksi bir durum belirterek farklı renkler verebilirsiniz.
CSS Sayfasını Kullanma
CSS, HTML belgelerine 3 şekilde eklenebilir:
- Satır İçi : HTML Ögelerinin içindeki stil özelliğini kullanarak
- Dahili : <head> bölümünde bir yere <style> ögesi kullanılarak
- Harici : Harici bir CSS dosyasına bağlanmak için bir <link> ögesi kullanılarak.
CSS eklemenin en yaygın yolu, stilleri harici CSS dosyalarında tutmaktır. Ancak bu eğitimde satır içi ve dahili stilleri kullanacağız. Çünkü bunların eklenmesi ve denenmesi daha kolaydır. CSS Eğitiminde bunları daha detaylı göstereceğiz.
Satır İçi CSS
Satır içi CSS, tek bir HTML öğesine benzersiz bir stil uygulamak için kullanılır.
Satır içi CSS, bir HTML öğesinin stil özelliğini kullanır.
Aşağıdaki örnekte <h1> ögesinin metin rengini maviye ve <p> ögesinin metin rengini kırmızıya boyar.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Mavi Başlık</h1>
<p style="color:red;">Kırmızı Paragraf.</p>
</body>
</html>
Dahili CSS
Tek bir HTML sayfası için stil tanımlamak amacıyla dahili bir CSS kullanılır.
Dahili bir CSS, bir HTML sayfasında <head> bölümünde bir <style> ögesi içinde tanımlanır.
Aşağıdaki örnek tüm <h1> ögelerinin metin rengini maviye, tüm <p> ögelerinin metin rengini kırmızıya ayarlar. Ayrıca sayfa rengini de pudra mavisine dönüştürür.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Bu Bir Başlık</h1>
<p>Bu Bir Paragraf Metni.</p>
</body>
</html>
Harici CSS
Birçok HTML sayfasının stilini tanımlamak için harici bir stil sayfası kullanılır.
Harici bir stil sayfası kullanmak için her HTML sayfasının <head> bölümüne o CSS dosyasının bağlantısı eklenir:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bu Bir Başlık</h1>
<p>Bu Bir Paragraf Metni.</p>
</body>
</html>style.css dosyasının içeriği
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
İleride web sitesinde yapacağınız bir değişiklikte harici stil dosyası (style.css) değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz.
CSS Renkler, Yazı Tipleri ve Boyutlar
Sık kullanılan bazı CSS özelliklerine değineceğiz. İlerleyen CSS Eğitimi bölümünde daha fazla bilgi vereceğiz.
CSS color özelliği, kullanılacak metin rengini tanımlar.
CSS font-family özelliği, kullanılacak yazı tipini tanımlar.
CSS font-size özelliği, kullanılacak metin boyutunu tanımlar.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>Bu Başlık</h1>
<p>Paragraf.</p>
</body>
</html>
CSS Kenarlık
CSS border özelliği, bir HTML öğesinin etrafındaki kenarlığı tanımlar.
Not: Neredeyse tüm HTML öğeleri için kenarlık biçimlendirilmesi yapılabilir.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
}
</style>
</head>
<body>
<h1>Başlık</h1>
<p>Paragraf.</p>
<p>Paragraf.</p>
<p>Paragraf.</p>
</body>
</html>
CSS Padding (Dolgu)
CSS padding özelliği, metin ile kenarlık arasında bir dolgu (boşluk) tanımlar.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>Başlık</h1>
<p>Paragraf.</p>
<p>Paragraf.</p>
<p>Paragraf.</p>
</body>
</html>
CSS Margin (Kenar Boşluğu)
CSS margin özelliği, sınırın dışında bir kenar boşluğu (boşluk) tanımlar.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>Başlık</h1>
<p>Paragraf.</p>
<p>Paragraf.</p>
<p>Paragraf.</p>
</body>
</html>
HTML Harici CSS Bağlantısı
Harici stil sayfalarına tam bir URL ile veya geçerli web sayfasına göre çağrılabilir.
<link rel="stylesheet" href="https://www.erensarigul.info/style.css">Aşağıdaki örnek, geçerli web sitesindeki html klasöründe bulunan bir stil sayfasına bağlantı verir:
<link rel="stylesheet" href="/html/styles.css">Aşağıdaki örnek, geçerli sayfayla aynı klasörde bulunan bir stil sayfasına bağlantı verir:
<link rel="stylesheet" href="styles.css">Bölüm Özeti
- Satır içi stil için HTML style özelliğini kullanın
- Dahili CSS tanımlamak için HTML <style> ögesini kullanın
- Harici bir CSS dosyasına başvurmak için HTML <link> ögesini kullanın
- <style> ve <link> ögelerini sayfa içine almak için HTML <head> ögesini kullanın
- Metin renkleri için color özelliğini kullanın
- Metin yazı tipleri için CSS font-family özelliğini kullanın
- Metin boyutları için CSS font-size özelliğini kullanın
- Kenarlıklar için CSS border özelliğini kullanın
- Kenarlığın içindeki boşluk için CSS padding özelliğini kullanın
- Kenarlık dışındaki boşluk için CSS margin özelliğini kullanın
