☰ Dersleri Göster

Bir html dosyasında CSS kullanma yolları

Bu derste bir html sayfası içerisinde CSS özelliklerinin nasıl kullanıldığını öğreneceksiniz.

Kursa 27.99 TL'ye kayıt olmak için TIKLAYINIZ.

CSS Html etiketlerine stil vermek için kullanılır. Görüntüyle alakalı çoğu şey CSS sayesinde yapılır.

Örneğin;

  • Etiketin genişliği
  • Etiketin yüksekliği
  • Etiketin içerisindeki yazıların rengi
  • Etiketin arka plan rengi vs. 

en temel katkısı bunlardır. CSS ile yapılabilecek işlevler oldukça fazladır. Ve zaman içerisinde en çok kullanılan CSS özelliklerini hep beraber tanıyacağız.

 

Elbetteki CSS özelliklerini verebilmek için dosyaya CSS kullandığımızı belirtmemiz gerekiyor. Ve bunu biz 3 farklı şekilde yapabiliyoruz.

  1. Direkt etiketin içerisinden style ekleme  (style yerine stil yazacaktım ama style kelimesi kullanıldığı için böyle kullanmayı tercih ettim)
  2. Internal CSS - Dahili CSS  (CSS özelliklerini direkt dosyada toplu halde kullanma)
  3. External CSS - Harici CSS (CSS özelliklerini bir dosya haline getirip html dosyasını içerisine dahil etme)

Şimdi bu 3 çağırma şeklinin nasıl yapıldığını anlatacağım;

 

1-) Direkt etikete style ekleme

<p style="color:green;">Bu kırmızı bir yazıdır.</p>

Burada ne yaptık paragrafın içerisindeki yazıyı kırmızıya çevirdik. Yani yazıya bir style ekledik.

2-) Internal CSS - Dahili CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dahili CSS Ekleme</title>
    <style>
    p{
        color:red;
    }
    </style>
</head>
<body>
    <p>Ben kırmızı bir yazıyım</p>
</body>
</html>

Burada style etiketi içerisinde p etiketini seçip bu etikete direkt bir yazı ekledik. Eee haliyle oluşturmuş olduğunuz tüm paragraf etiketlerinin içerisindeki yazılar kırmızı olacaktır. Bunları özelleştirmenin yolları vardır. Bunu da zamanla öğreneceksiniz.

 

3-) External CSS - Harici CSS  (En çok kullandığımız yöntemdir. Bunun sebebi kodların derli toplu düzenli gözükmesini sağlamaktadır. Style özelliklerini ayrı bir dosyada tutmak en güzelidir.)

  • index.html  dosyası oluşturarak aynı klasör içerisine bir de style.css dosyası oluşturuyoruz.

style.css dosyasının içerisinde bulunan kodların kullabilmesi head etiketinin içerisine link etiketi ile bu style.css dosyasının dahil ediyoruz. İşte bu style özelliklerini başka bir dosya içerisinden aldığımız için 

buna external yani harici CSS diyoruz.

 

***index.html    dosyasının kodları aşağıdadır.

<!DOCTYPE html>
<html lang="en">

<head>

    <link rel="stylesheet" href="style.css">

</head>

<body>

<p> Kaan Academy nice insanlar Yetiştirmeye Devam Edecektir.</p>

</body>

</html>

***style.css dosyasının içerisinde bulunanlar aşağıdadır.

p{
color:red;
}

 

 

« Önceki Sonraki »