CSS, HTML öğeleri tasarlamak için kullanılır.
Bu metin bir tasarıma eklenmiştir. Bu metin kırmızıdır ve yazı tipi courier'dır.
Bu metin mavi ve yazı tipi ariel.
Bu metin 30 piksel genişliğindedir.

Tasarım yaparken HTML ile CSS'yi birleştirin

CSS, web sitesi tasarımını daha iyi sunmak için HTML 4 ile icat edildi.

CSS, HTML ile aşağıdaki yöntemlerle eklenebilir:

  • Akış şeması tasarım dosyası (CSS dosyası).
  • Tasarım kodlarını <style> etiketine yerleştirerek.
  • Tasarım kodlarını aynı HTML etiketindeki stil son ekine yerleştirerek.

Son ek aracılığıyla tasarımın kullanımı

Tasarımı aynı etikette kullanmak profesyonel değildir, bu nedenle ayrı bir tasarım dosyası kullanmak daha iyidir.

Bu kursta, size çok basit bir örnekte etiket son eklerinde CSS kullanmayı ve kodu istediğiniz gibi yazıp değiştirmenizi kolaylaştırmayı göstereceğiz.

Son ek aracılığıyla tasarımı kullanın – örnek arka plan rengi

Değiştirmek istediğimiz öğenin arka plan rengini belirtmek için arka plan rengi özelliğini kullanırız,


<html>
<body style="background-color:sarı;">
<h2 style="background-color:red;">Bu bir başlıktır</h2>
<p style="background-color:green;">Bu bir paragraftır</p>
</body>
</html>

background-color özelliği kullanıldıktan sonra bgcolor soneki kaldırıldı.

Son eke göre bir tasarım kullanın – örneğin renk, boyut, şekil

font-family özelliği, font tipini tanımlamak için kullanılır, font-size özelliği font boyutunu belirtmek için kullanılır ve color özelliği, öğenin rengini belirtmek için kullanılır.

<html>
<body>
<h1 style="font-family:verdana;">büyük başlık</h1>
<p style="font-family:tahoma;color:red;font-size:20px;">metnin paragrafı</p>
</body>
</html>

<font> etiketi, font-family özelliği ve font-size kullanımından sonra kaldırıldı.

Son eke göre stil kullan – metin hizalama örneği

text-align özelliği, belirli bir öğedeki metnin yatay hizalamasını belirtir.

<html>
<body>
<h1 style="text-align:center;">ortalanmış büyük başlık</h1>
<p>Bu bir metin paragrafıdır</p>
</body>
</html>

<center> etiketi, text-align özelliği kullanıldıktan sonra kaldırıldı.

HTML - çizgi türleri HTML köprüler