CSS nedir?
CSS , C basamaklı Stil Sayfaları anlamına gelir .
CSS, HTML öğelerinin nasıl görüntüleneceğini açıklar
CSS Örneği
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Nasıl çalıştığını görmek için "Kendiniz Deneyin" düğmesine tıklayın.
CSS Sözdizimi
Bir CSS kuralı, bir seçici ve bir bildirim bloğundan oluşur:
Seçici, stil (h1) için HTML öğesini işaret eder.
Bildirim bloğu (süslü parantez içinde), noktalı virgülle ayrılmış bir veya daha fazla bildirim içerir.
Her bildirim, iki nokta üst üste ile ayrılmış bir CSS özellik adı ve bir değer içerir.
Aşağıdaki örnekte tüm <p> öğeleri ortaya hizalanmış, kırmızı olacak ve yazı tipi boyutu 32 piksel olacaktır:
Örnek
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Aynı örnek şu şekilde de yazılabilir:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Harici Stil Sayfası
Bir CSS stil sayfası harici bir dosyada saklanabilir :
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Harici stil sayfaları, <link> etiketleriyle HTML sayfalarına bağlanır :
Örnek
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Satır İçi Stil
Örnek
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Basamaklı Sıra
HTML öğeleri için farklı stiller belirtilirse, stiller aşağıdaki önceliğe sahip yeni stillere basamaklanır :
- Öncelik 1: Satır içi stiller
- Öncelik 2: Dış ve iç stil sayfaları
- Öncelik 3: Tarayıcı varsayılanı
- Aynı öncelik düzeyinde farklı stiller tanımlanırsa, sonuncusu en yüksek önceliğe sahiptir.
Örnek
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS Demosu - Bir HTML Sayfası - Birden Çok Stil!
Burada 4 farklı stil sayfası ile görüntülenen bir HTML sayfası göstereceğiz.
Stil Sayfası düğmelerine (1-4) tıklayın ve farklı stiller ile görüntülenen sayfayı görün.
Tam CSS Eğitimi
Bu, CSS'nin kısa bir açıklaması olmuştur.
Tam bir CSS eğitimi için W3Schools CSS Eğitimi'ne gidin .
Tam bir CSS referansı için W3Schools CSS Referansına gidin .