Harici CSS

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 8 / 76.

Harici CSS, CSS stillerini ayrı bir CSS dosyasına yerleştirip bu dosyayı <link> etiketini kullanarak HTML belgesine bağlayarak bir HTML belgesine ekleme yöntemidir. Bu yaklaşım, aynı stilleri birden fazla HTML sayfasına uygulamanıza olanak tanıyarak web sitenizin tasarımını korumayı ve güncellemeyi kolaylaştırır. Harici CSS, tutarlılık ve verimliliğin kritik olduğu büyük projeler için idealdir.

Harici CSS'i şu şekilde kullanabilirsiniz:

Bir CSS dosyası oluşturun (örneğin, styles.css) ve CSS kurallarınızı ekleyin:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. <head> bölümüne bir <link> etiketi ekleyerek CSS dosyasını HTML belgenize bağlayın:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Bu örnekte, <link> etiketi styles.css dosyasını HTML belgesine bağlar. rel özniteliği, HTML belgesi ile bağlantılı dosya (stil sayfası) arasındaki ilişkiyi belirtir ve href özniteliği CSS dosyasının yolunu belirtir.

Görev

Kolay

Size HTML ve CSS dosyaları verildi (index.html ve styles.css), dosyaları birbirine bağlamak ve stilleri HTML dosyasına eklemek için HTML dosyasına bir link etiketi ekleyin!

Kopya kağıdı

Harici CSS, CSS stillerini ayrı bir dosyaya yerleştirmenize ve <link> etiketini kullanarak HTML belgelerine bağlamanıza olanak tanır.

Stillerinizi içeren bir CSS dosyası oluşturun:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

CSS dosyasını HTML <head> bölümünde bağlayın:

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

rel özniteliği ilişkiyi (stylesheet) belirtir ve href CSS dosyasının yolunu belirtir.

Kendin dene

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>