CSS Kodlarını HTML Kod Satırına Nasıl Bağlanır?

CSS kodunu HTML kod satırına nasıl bağlanır? Bağlarken nerelere dikkat edilmelidir? burada bunu göreceğiz.

Bir web sitesi yaparken sadece HTML kodu yeterli olmaz. Web sitesi yaparken HTML, CSS ve JavaScript kodları ile ortaya güzel, spesifik bir site çıkarabilirsiniz. Ancak yazılan CSS ve JavaScript kodlarını HTML kod satırına bağlamazsak bir anlamı kalmaz. Peki bu kodları nasıl bağlarız?

Css ve JavaScript kodu HTML kod satırına bağlamanın farklı yolları vardır. Bunlar;

• HTML kod satırının içine yazma.
• HTML dökümanının İçine Link ile bağlama.
• HTML dökümanının içine CSS Yazma

1 – Html Kod Satırının İçine Yazma

HTML kod satırını yazarken içine bir “style” açıp, içine istediğiniz o satır için CSS komutunu yazabilirsiniz. Ancak HTML kod satırının içine yazılan CSS’ler sadece o kod satırı için geçerli olur. Bunu dikkate alarak CSS kodu yazmamız gerekiyor. Aşağıda hem kod örneği hem de nasıl çalıştığını görebilirsiniz.

Örnek:

<p style=”color:#b6d343;”> Html Kod Satırının İçine Yazma Örneği</p>   

2 – HTML dökümanının içine CSS Yazma

HTML kod satırına yazılan CSS’leri HTML kod satırına “class” ve “id” olarak da ekleyebilirsiniz. Yazılan CSS’de class ve id olduğunun anlaşılmasının yolu, class ile yazılan CSS’ler “.(nokta)”, “id” ile yazılanlar ise “#(kare)” sembolü ile yazılır. Aşağıdaki kod satırında nasıl olduğunu ve nasıl çalıştığını görebilirsiniz.”

Class ve Id ile Yazılan Kod Satırı Örneği:

<!DOCTYPE html>
<html>
<head>
     <meta charset=”utf-8″
     <title>Novasta Web Tasarım ve Dijital Pazarlama</title>

<style>
.class-ile-yazma{
color:#b6d343;
}
#id-ile-yazma{
color:red;
}
</style>
</head>
<body>
         <p class=”class-ile-yazma”> HTML Dökümanının İçine Link İle Bağlama</p>
         <p id=”id-ile-yazma”> HTML Dökümanının İçine Link İle Bağlama</p>
</body>
</html>

3 – HTML dökümanının İçine Link İle Bağlama

CSS sayfasındaki kodları link yardımıyla HTML sayfasına bağlayabiliriz. İlk önce oluşturduğumuz CSS sayfasını HTML sayfasında geçerli kılmak için onu HTML dökümanında olan “<head>…</head>” bölümünün içine eklemeliyiz. Aksi takdirde başka yere koyarsanız ya hata alırsınız ya da hiç çalışmaz. Bu da kullandığınız programa göre değişmektedir.

“<head>…</head>” içine <link href=”still.css” rel=”stylesheet” /> şeklinde yazabilirsiniz. Artık Html sayfasında css sayfasında yazdığınız kodlar aktif olmuş olur.

<!DOCTYPE html>
<html>
<head>
 <meta charset=”utf-8″
     <title>Novasta Web Tasarım ve Dijital Pazarlama</title>
     <link href=”still.css“ rel=”stylesheet“ />
</head>
<body>
     <p class=”ornek”> Novasta Web Tasarım ve Dijital Pazarlama</p>
</body>
</html>

CSS Sayfası:

.ornek{
color:#b6d343;
}

Görünümü: