Merhabalar, bu yazımda CSS tanımlama biçimlerinden üçüncüsü External CSS yazma konusuna bakıyor olacağız. Bir önceki yazımda Internal CSS yazmak konusuna bakmıştık.

Bir önceki bölümde şunu demiştik, bir etiketin belli özelliklerini bir Html dosyası içinde tek bir kaynaktan yönetmek istersek bunu Internal CSS yazarak çözeriz.

Peki büyük bir projede yüzlerce Html sayfamız var ve bu sayfalar içinde binlerce p etiketi var ve bunların özellikleri her yerde aynı olsun istiyoruz.

Bir önceki derste öğrendiğimizden yola çıkarsak yüzlerce Html sayfasında Internal CSS tanımlaması yapacak ve p etiketinin CSS değerlerini yazmak gerekecekti.

Bir özellik eklemek, çıkarmak ya da güncellemek istersek, bu yüzlerce sayfada aynı işlemi yapmak gerekecekti. Doğal olarak zaman kaybı ve maliyet oluşturacaktı.

O zaman aklımıza şöyle bir şey geliyor.

CSS kodlarını tek bir kaynağa yazsak ve Html belgelerine bu dosyanın kaynağını göstersek nasıl olur? Bu soruya vereceğimiz cevapla External CSS kavramı ortaya çıkıyor.

3 tane Html dosyası yarattım ve bir kaç p etiketi ve h1 etiketi ekledim hepsine.

CSS dosyalarının uzantısı .css şeklindedir. Dosya isimlendirmesini istediğiniz gibi yapabilirsiniz. Genel olarak style.css, main.css kullanımları yaygındır.

index.html ve style.css kodları aşağıdaki gibidir.

CSS dosyası içinde style gibi bir etiket tanımlamasına gerek yoktur. Doğrudan tanımlamalara başlanabilir.

.css uzantılı bir dosya içinde yazılmış CSS kodlarını farklı Html dosyalarında kullanabilmek ve çağırabilmek için head etiketi içine aşağıdaki gibi tanımlaması yapılması gerekir.

head tag’leri arasına yazacağımız bir link etiketi ile dosyanın kaynağını gösteririz.

<link rel="stylesheet" href="style.css">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

Aynı kök dizinde bulundukları için doğrudan dosyanın ismini yazdık.

Klasör içinde dosya hiyerarşisine daha sonra bakacağız.

Artık index.html sayfası style.css kodlarını tanıyor ve uygulayacak.

Diğer Html sayfalarının kodlarını aşağıda paylaşıyorum ancak style.css’inin uygulanmasını sizlere bırakıyorum.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    
    <h1>External CSS</h1>

    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    
    <h1>External CSS</h1>

    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>

</body>
</html>

Tüm sayfalardaki h1’in mesela font-size’ını 75px, color’ı brown ve border uygulamak istiyorum. Border color’ı brown, size’ı 1px ve şekli solid olsun istiyorum. Bunun için style.css dosyasında h1 etiketine bakan selector’u bulup ilgili değerleri uyguluyorum. Hepsi bu kadar.

h1{
    color: brown;
    font-size: 75px;
    border: brown 1px solid;
}

İşte bu kadardı.

Ben bu eğitim boyunca Internal CSS kullanarak dersleri anlatmaya devam ediyor olacağım.

Bir sonraki derste görüşmek üzere.


What's Your Reaction?

love
0
love
hate
0
hate
win
0
win
geeky
0
geeky
omg
0
omg
lol
0
lol
fail
0
fail
fun
0
fun
Murat Bilginer
21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri İçin DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.