CSS ile HTML Stil Kullanımları

CSS ile HTML stilleri

Web tasarımda kodlama ve düzenleme sırasında kullanacağımız bir diğer araç da stillerdir.

CSS’in açılımı Cascading Style Sheets’tir (basamaklı stil sayfaları).
CSS, HTML’de oluşturduğumuz yazı, resim, div vb. öğelere biçim vermek amacıyla kullanılır.
Tek seferde birden fazla sayfanın stilini kontrol ederek düzenli ve şık görünmesini sağlar.
Bir HTML belgesine CSS eklemenin en kullanışlı yolu, ayrı bir CSS belgesi oluşturup bu belgeyi tek satırlık bir kodla HTML sayfaya dahil etmektir.
Şimdi mantığı kavramanız açısından önce CSS kodlarını <style> etiketleri içerisinde, HTML belgesinin içinde çalıştırıp birkaç örnek yapacağız; bu yönteme iç (dahili) CSS adı verilir.
Ardından harici bir CSS belgesi oluşturup sayfamıza dahil edeceğiz.

Hemen tam bir örnek vererek başlayalım, sonrasında açıklamalarıyla devam edelim.

<!DOCTYPE html>
<html>
<head>
    <title>Mersin Web Tasarım Kursu</title>

<style>
  body {background-color: lightblue;}
  h1   {color: blue;}
  p    {color: red;}
</style>
</head>
<body>

<h1>Buraya başlık yazılır</h1>
<p>Buraya paragraf yazılır</p>

</body>
</html>

Bu örnekte dikkat etmeniz gereken yer <style> etiketleri ve içerisine yazılanlardır.
Etiket içerisindeki kodlar sayfaya arka plan rengi verme, başlığa renk verme ve paragrafa renk verme kodlarıdır.
Neden <style> etiketi içerisine yazıyoruz? Çünkü harici bir CSS belgemiz yok; o yüzden HTML kodlarına stil vermek istediğimizde <style> etiketini kullanırız.
Bu etiket tarayıcıya içerisindeki kodların stil vermek amacıyla yazıldığını bildirir.

Harici CSS Belgesi

Harici stil belgesi birçok HTML belgesine aynı anda stil vermek için kullanılır. Bu sayede her HTML sayfası için ayrı ayrı kodlar yazmak yerine tek bir belgeyi sayfalara dahil eder ve stil kodlarını oradan alırız.

Hemen HTML sayfamıza nasıl harici bir stil belgesi ekleyebileceğimizi görelim:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>Buraya başlık yazılır</h1>
<p>Buraya paragraf yazılır</p>

</body>
</html>

Örnekte gördüğünüz gibi sayfamıza harici bir stil belgesi dahil etmek için <head> etiketleri arasına tek satırlık bir kod yazıyoruz ve her şey bu kadar.

Bir de bu stil belgesini nasıl oluşturacağınızdan bahsedelim:

Tıpkı bir HTML belgesi oluşturur gibi not defteri veya bir metin düzenleme editörü kullanarak oluşturabiliriz.
Oluşturduğumuz belgenin içerisine az önce <style> etiketleri arasına yazdığımız kodları yazıp kaydediyoruz ve uzantısını “.css” olarak yazıyoruz. Bu uzantıyı doğru yazmazsanız belge içerisindeki kodlar çalışmaz; tıpkı HTML belgesinde olduğu gibi.

Stil belgesi içerisinde HTML etiketleri kullanılamaz.

Belgenin içerisine nasıl stil kodları yazacağınıza bir de örnek verelim:

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

CSS’te color özelliği kullanılarak renk verme işlemini gerçekleştiririz.

font-family özelliğini kullanarak yazıların yazı tipini değiştiririz.
Ve font-size özelliğini kullanarak metinlerin boyutlarını değiştiririz.

Kullanımı:

h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p {
    color: red;
    font-family: courier;
    font-size: 160%;
}

CSS’te Border

CSS’te kenarlık vermek için border özelliğini kullanırız.

Kullanımı:

p {
    border: 1px solid powderblue;
}

CSS’te Dolgu (padding)

CSS’te dolgu özelliği metin ve kenarlık arasında boşluk oluşturmak için kullanılır.

Kullanımı:

p {
    border: 1px solid powderblue;
    padding: 30px;
}

CSS’te Margin

CSS’te margin, kenarlığın dışında bir boşluk tanımlar.

Kullanımı:

p {
    border: 1px solid powderblue;
    margin: 50px;
}

CSS id Özelliği

Belirli bir öğeye özel stil vermek istediğimizde o öğeye id özelliği veririz ve stil belgesinde de ona ayrı kod yazarız.
CSS’te id seçicisi # işaretiyle yazılır.

Örnek:

<p id="ornek">Mersin Web Tasarım</p>

#ornek {
    color: blue;
}

Id seçerken benzersiz olması çok önemlidir; yazdığınız id sayfada yalnızca bir kez kullanılmalı ki diğer id’lerle karışmasın.

CSS’te Class

Tıpkı id özelliği gibi, farklı stil uygulamak istediğiniz öğeye class (sınıf) özelliği vererek amacımıza ulaşırız. Aynı sınıfı birden fazla öğede kullanabilirsiniz.

Kullanımı:

<p class="webtasarim">Mersin Web Tasarım</p>

CSS’te kullanımı:

p.webtasarim {
    color: red;
}

CSS’te stil vermek istediğimiz öğe hangi etiketse önce etiketin adı yazılır, ardından nokta ile sınıf adı yazılır.

Bugünkü dersimizde <style> etiketinin, <link> etiketinin ve <head> etiketinin kullanımını; stil belgesinde metinlere stil vermeyi, font-family ve font-size kullanımını, kenarlık, dolgu ve kenar boşluğu kullanımını, id ve class seçicilerini öğrendik. Bir sonraki derste görüşmek üzere.