Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Renkler (Colors) adlı yazımızda HTML'de Renklerin kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 8 – Renkler (Colors) linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML'de CSS konusuna gözatıp, HTML'de Stil Şablonlarının kullanımını ayrıca HTML ve CSS'in önemini öğreneceğiz.
Bu dersimizde bizler için önemli bir konu olan HTML'de CSS kullanımına bakacağız. CSS'in açılımı "Cascading Style Sheets." cümlesinin baş harflerinden almaktadır ve dilimizde Basamaklı Stil Şablonları anlamına gelmektedir. CSS , HTML kodlarının sitemizde nasıl görüntüleneceğini belirler. Web sitesi dizayn etmede kullanırlar. Dinamik bir dil olmamakla beraber , betik bir dildir CSS. İngilizce kelimelerin belirli bir format ile yazılmasından ibarettir.
CSS öğrenmek çok zor olmamakla birlikte , hayat kurtarıcıdır. CSS ile birden çok web sayfasının düzenini tek seferde kontrol edebiliriz. HTML ve CSS tamamen ayrılmaz bir ikilidir. Peki HTML içerisine CSS'i nasıl dahil ederiz ?
HTML kodlarına CSS 3 farklı şekilde eklenebilir ;
- Satır içi (Inline) ; HTML etiketlerinin içerisinde style parametresi kullanarak
- Dahili (Internal) ; HTML'deki < head > etiketleri arasında < style > etiketi kullanarak
- Harici (External) ; Harici bir CSS dosyası kullanarak.
CSS eklemenin en çok tercih edilen yolu, stilleri harici (External) CSS dosyalarında tutmaktır. Ancak, burada satır içi (Inline) ve iç stilleri kullanacağız, bu iki türde örnek göstermek ve sizlere anlatabilmek daha kolay olacaktır.
Satır içi CSS | Inline
Satır içi CSS ekleme , tek bir HTML etiketine benzersiz bir stil uygulamak için kullanılır. Kullanım şekli ise, HTML etiketine style parametresi ekleyerek kullanılır. Bundan önceki bir çok dersimizde inline css ile ilgili örnekler görmüştük.
Şimdi inline css methodu kullanarak , < h4 > etiketi içerisinde ki metnin rengini kırmızı yapalım ;
<h4 style="color:red;">HTML ve CSS satır içi css kullanımı.</h4>
Bu kodun çıktısı şu şekilde olacaktır ;
HTML ve CSS satır içi css kullanımı.
Gördüğünüz üzere inline css methodunu kullanarak sadece , < h4 > etiketinin stilini değiştirdik. Bu kodlarımıza başka bir < h4 > etiketi eklemiş olsaydık , ikinci etiketimiz bu stilden etkilenmeyecektir.
Dahili CSS | Internal
Dahili CSS ekleme , tek bir HTML sayfasının stilini belirlemek için kullanılır. HTML sayfamızda ki < head > etiketi içerisine < style > etiketi eklenir ve bu etiketin arasına CSS kodlarımızı yazarız.
Dahili CSS ile ilgili bir örnek yapalım ;
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: red;}
h1 {color: yellow;}
p {color: white;}
</style>
</head>
<body>
<h1>H1 etiketinin rengi sarı olarak ayarlandı.</h1>
<p>P etiketinin rengi beyaz olarak ayarlandı</p>
</body>
</html>
Gördüğünüz üzere , < style > etiketleri içerisine body , p ve h1 etiketlerinin stillerini tanımladık. Bu etiketleri ne zaman kullanırsak kullanalım her zaman stilleri bu şekilde olacaktır. İkinci bir p etiketi eklediğimizde de yine yazının rengi beyaz olacaktır. Bu her zaman geçerli değil tabi ki , sadece istediğimiz etiketlere de stiller tanımlayabiliyoruz. Bunları ilerleyen derslerimizde öğreneceğiz.
Harici CSS | External
Harici CSS , birden çok HTML sayfalarına stil tanımlamak için kullanılır. Harici CSS dosyası, birden çok HTML dosyasında kullanılacağı için , yaptığınız herhangi bir değişiklik tüm sayfalara etki edecektir.Harici stil sayfası kullanmak için, HTML sayfasının < head > bölümüne dahil ederiz. CSS kodlarımız uzantısı .css olan ayrı bir dosyada tutulur.
Biraz önce yapmış dahili css örneğini harici css ile yapalım ve stil dosyamızın adı style.css olsun.
HTML Dosyamız ;
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>H1 etiketinin rengi sarı olarak ayarlandı.</h1> <p>P etiketinin rengi beyaz olarak ayarlandı</p> </body> </html>
CSS Dosyamız ;
body {
background-color: red;
}
h1 {
color: yellow;
}
p {
color: white;
}
Görüldüğü üzere HTML dosyamızda ki < head > etiketleri arasına , < link rel=" stylesheet" href=" css_dosyasi"> etiketini ekledik ve href parametresine CSS kodlarımızın olduğu .css uzantılı dosyamızın yolunu belirledik. HTML ve CSS dosyaları aynı dizinde ise css dosyasının adını olduğu gibi yazmanız yeterlidir. Lakin css dosyamız bir alt klasörde ise href="../css_dosyasi" şeklinde yazabilirsiniz.
CSS ile ilgili daha çok bilgi almak isterseniz eğer , CSS DERSLERİ konusuna göz atabilirsiniz.
Tebrikler! Bu derste HTML’de CSS kullanımını , sitenizde ki elementlerin stillerini düzenlemeyi , dahili, harici ve satır içi css dahil etmeyi, HTML ve CSS'in önemini öğrendik.Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.
HTML Derslerinin dokuzuncu kısmı olan dersimizde , HTML’de CSS Kullanımını öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !
Test’e katıl öğrendiklerini pekiştir !
TESTE BAŞLAMAK İÇİN TIKLAYINIZ!
Bir sonraki derse “HTML Dersleri 10 – Bloklar ve Div Kullanımı” geçmek için tıklayınız !
