CSS Nedir ? CSS Nasil Kullanilir ?

08 Mart 2022 Web Tasarım 0 4298

CSS

Bu makalemde sizlere CSS nedir? CSS kullanimi? Hakkinda kisa bilgiler vermeye çalisacagim. CSS “Cascading Style Sheets” kelimesinin kisaltmasidir. CSS kisaca; bir web sitesini görsellestirmek için kullanilir. Örnegin yazi tipi, yazinin rengi, arka plan rengi, gölge ekleme gibi birçok yerde CSS ile karsilasiriz. Gelin simdi CSS in kullanimina kisaca göz atalim.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Çalismasi</title>
  <meta charset="utf-8">
</head>
<body>
  <p>Örnek paragraf</p>
</body>
</html>

Eger kod kismina CSS kullanmadan paragraf etiketleri arasinda “Örnek paragraf” yazarsak ayni biçimde ne yazdiysak, nasil yazdiysak öyle çikar. Ancak;

<!DOCTYPE html>
<html>
<head>
  <title>CSS Çalismasi</title>
  <meta charset="utf-8">
  <style type="text/css">
    p{ background-color:#fcb;}
  </style>
</head>
<body>
  <p>Örnek paragraf</p>
</body>
</html>

Böyle yazdigimiz takdirde paragrafin arka plan renginin pembeye yakin oldugunu görürüz. Peki, CSS sadece bundan ibaret mi tabiki de degil. Baslangiçta bahsettigim gibi yazi tipi, rengi gibi akliniza gelebilicek görsel olan her seyi neredeyse degistirebiliriz. Peki, CSS i siklikla kullanicaksak ve kodlarin düzenli bir biçimde olmasini istiyorsak ne yapmaliyiz?

Iki farkli çalisma alani olusturacagiz. Bu iki alandan birinde sitenin temel halini yani HTML kodlarini yazacagiz digerinde ise sitenin görsel halini yani CSS kodlarini yazacagiz. Örnegin HTML kodlarini yazacagimiz dosya adina “index.html” diyelim. “index.html” in içinde ;

<!DOCTYPE html>
<html>
<head>
  <title>CSS Çalismasi</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>Örnek paragraf</p>
</body>
</html>

Bahsettigimiz gibi sitenin temelini yaptik. Önemli kisma gelirsek: link etiketi ile CSS çalisma alanimizi kaydettigimiz adini dogru bir biçimde yaziyoruz. Ben style.css koydum adini. style.css in içinde ;

p{background-color:#fcb;}

Ve böylelikle web sitemizin görsel kisminida tamamlamis olduk.Ben paragraf etiketini örnek olarak kullandim sadece , sizler CSS i diger birçok etikette dilediginiz gibi kullanabilirsiniz.Bir diger yöntem ise id vermektir.Örnegin; index.html içinde “<div id=“d1”>Div Örnegi</div>” bu sekilde bir divimiz var.Bu div de id=“d1” yazarak divi aslinda adlandirmis olduk . Sira d1 olarak adlandirdigimiz bu divi CSS de kullanmada. Basina diyez (#) koyarak;

#d1{
                color: blue;
}

Seklinde yazariz. Bu sekilde düzenli ve karismayacak sekilde CSS kodlari yazabilirizsiniz. Kendinizi gelistirerek CSS kullanarak dropdown ve transparan gibi güzel duran CSS menüleri yapabilirsiniz. CSS bunlarla kisitli degil genis kapsamlidir kisaca açiklayarak, özet halinde anlatmaya çalistim. Iyi çalismalar dilerim.

Yazar: Mithat Çakmakci