Bir HTML Belgesine CSS Uygulamak

1. In-Line (Kod İçine Ekleme)

HTML eitketinin içine style özelliği ekleyerek kullanılır. Bu uygulama şekli önerilen bir uygulama değildir. Her etikete bu şekilde tek tek uygulamak zaman kaybı ve kod fazlalığı oluşturur.

<h1 style="color:#fff">Başlık Buraya Yazılır</h1>

2. Internal (<style> Etiketi ile Ekleme)

<head> etiketleri arasına <style> etiketi ile CSS kodlarını ekleyebiliriz.

<html>
             <head>
                    <title>Örnek</title>
             <style type="text/css">
                    body {background-color: #FF0000;}
             </style>
             </head>
   <body>
              <p>Burası kırmızı sayfa</p>
   </body>
</html>

Çok tercih edilen bir tercih olmasa da ilk metota göre daha kullanışlı bir metottur.

3. External (Harici Style Dosyası)

Harici bir style dosyasıyla CSS stillerini uygulama şeklidir. En çok tercih edilen metot budur. Çünkü kod karşıklığından kurtarır, hem de bir defa oluşturulan örneğin style.css dosyasını farklı sitelerde de kullanabiliriz.

<html>
      <head>
           <title>My document</title>
           <link rel="stylesheet" type="text/css" href="style/style.css" />
      </head>
   <body>
   </body>
</html>

4. @import (Harici Style Dosyası)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-9" />
<title>import</title>
<style type="text/css">
@import "styles.css";
</style>
</head>

Örnekte de görüldüğü gibi bir önceki yöntemle aynı. Bu yöntemle eklenen CSS stilleri diğer eklenmiş stillerden önce okunur.

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;

Bu örnekte görüldüğü gibi büyük projelerde hangi bölümde hangi CSS stilleri lazımsa ona göre import edebilriz.

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.