38 – Html Stilleri CSS
CSS Nedir?
CSS açılımı cascading style sheet ‘in kısaltmasıdır. Türkçe olarak basamaklı sitil sayfası anlamına gelmektedir.
CSS ile web sayfasını biçimlendirmek için kullanılır. Web sayfamızın görsel olarak tasarımını değiştirebiliriz. Örneğin yazı boyutu, rengi, şekli, yerleşimi, cihaz türüne göre farklı görünüm gibi birçok özelliği ile göze hoş görünen bir web sayfası yapabiliriz.
CSS kullanmak çok avantajlıdır. Tanımlanan bir stil ile birçok öğeyi kontrol edebiliriz. Zamandan tasarruf sağlar.
CSS Nasıl Kullanılır?
inline, internal ve external olmak üzere CSS üç farklı şekilde kullanılır.
inline CSS
Satır içi CSS anlamına gelen inline CSS bir html öğesine özel verilir. Html öğesinde style attribute kullanılarak stil tanımlaması yapılır.
Örnek
<html>
<head>
<title>Html inline CSS</title>
</head>
<body>
<p style="color:red"> Burası inline css kullanılmış örnek bir paragraf</p>
<p style="font-size: 20px;"> inline css kullanılmış başka bir paragraf</p>
</body>
</html>internal CSS
Dahili CSS anlamına gelen internal CSS yazıldığı sayfa için geçerli olan CSS türüdür. <head> </head> etiketleri içerisinde <style> css kodları </style> şeklinde kullanılır.
<head> etiketinden sonra <style> etiketi açılır ve istenilen css kodları yazılır ve </style> ile sonlandırılır. Burada yazılan bu css kodları o sayfa için geçerli olacaktır.
Aşağıdaki örnekte tüm paragraflar için rengi beyaz ve arka planı mor yapalım. Ayrıca <h3> etiketine sahip başlıklar için rengi kırmızı yapalım. Sadece bu sayfadaki <h3> ve <p> öğelerini etkileyecektir.
Örnek
<html>
<head>
<title>Html internal CSS</title>
<style>
h3 {color:red;}
p {background-color: purple; color:white;}
</style>
</head>
<body>
<h3>burası bir başlık</h3>
<p > Burası bir paragraf</p>
<h3>burası bir başlık</h3>
<p > Burası bir paragraf</p>
<h3>burası bir başlık</h3>
<p > Burası bir paragraf</p>
</body>
</html>external CSS
Harici CSS anlamına gelen external CSS ayrı bir sayfada yazılır ve bir bağlantı olarak kullanılmak istenen sayfaya eklenir.
Eklendiği sayfadaki html öğelerini etkileyecektir.
<head> etiketleri arasında eklenir. <link rel=”stylesheet” href=”ornek.css”> şeklinde kullanımı vardır.
Aşağıdaki örnekte harici ornek.css dosyasını ekledim. Harici css içerisinde aşağıdaki gibi bir css kodu yazdım.
body{ background-color:purple;}
h3{ color:white;}
p {background-color: blue; color:white;}Örnek
<html>
<head>
<title>Html external CSS</title>
<link rel="stylesheet" href="ornek.css">
</head>
<body>
<h3>burası bir başlık</h3>
<p > Burası bir paragraf</p>
<h3>burası bir başlık</h3>
<p > Burası bir paragraf</p>
<h3>burası bir başlık</h3>
<p > Burası bir paragraf</p>
</body>
</html>Burada css ile ilgili nasıl kullanıldığı hakkında kısa bir bilgi verilmiştir. Konunun çok daha detaylı olanı css derslerinde anlatılmaktadır.