HTML Tagları içinde CSS kullanımı

CSS’in HTML içerisinde kullanım şekilleri

CSS Sayfa  içinde 3 farklı sekilde kullanılabilir;

Yerel Stil Şablonu:

Yerel stil şablonları sayfada bir tek html etiketi için özel olarak kullanılırlar yani bulunduğu yerde etkiler.

<html>
<head>
<title>Css'in Html İçinde Kullanımı</title>
</head>
<body>
<h2>Css Kullanım Şekilleri</h2><br>
<h2 style="font-size:25pt; color:red">Yerel Kullanım</h2>
</body>
</html>

Global Stil Şablonu:

Global stil şablonu , stilin tüm sayfada etkili olmasını sağlar.Bu stil şablonu <head></head> satırları arasında tanımlanmalıdır.Aşağıdaki tüm <h2> etiketli kısımlardaki stil özellikleri sabitlenmiş oldu.

<html>
<head>
<title>Css'in Html İçinde Kullanımı</title>
<style type="text/css">
<!--
h2 {font-size:25pt; color:red}
-->
</style>
</head>
<body>
<h2>Global Stil Şablonu</h2>
</body>
</html>

Bağlantılı Stil Şablonu:

Eğer stil özelliklerinin tek bir html sayfasını değilde birden çok html sayfasını biçimlendirmek istiyorsanız css uzantılı bir text dosyasına yazılmalıdır.Css biçimlendirmesini çağıracağımız sayfaya yine <head> </head> etiketleri arasına <link rel=”stylesheet” type=”text/css” href=”dosya_ismi.css”> şeklinde yazarız ve çağırdığımız css dosyasını sayfamıza açarız.7

stil.css dosyası;

h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}

*.html dosyası;

<html>
<head>
<title>Css'in Html İçinde Kullanımı</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Bağıntılı Stil Şablonu</h2>
<h2>Bağıntılı Stil Şablonu</h2>
<h3>Bağıntılı Stil Şablonu</h2>
</body>
</html>

 

Bir önceki yazımız olan HTML'e ilk adım başlıklı makalemizde css, eğitim ve html hakkında bilgiler verilmektedir.