STİL Şablonu CSS Nedir?
CSS’in açılımı Cascading Style Sheet’dir. Türkçe karşılığı ise Basamaklı Stil Sayfası anlamına gelmektedir.
CSS, HTML ögelerine yazı, paragraf, renk, kenar çizgisi resim ve bağlantı gibi işlerinde kolay ve basit bir şekilde düzenlememizi sağlar. CSS basit ve kullanışlı bir stil düzenleme programıdır. Web sayfalarımızı biçimlendirmek için kullanabileceğimiz basit bir işaretleme dilidir.
Html ile biçimlendirme sayfasını ayırır ve yüzlerce sayfadan web sitemizin biçimlendirmesini tek bir sayfa halinde yazabiliriz. Bu bize hız açısından büyük önem sağlayacaktır. Html’de tablolar oluşturarak daha çok vakit kaybetmek yerine CSS ile bunun önüne geçerek tablosuz tasarımlar yapabilirsiniz. CSS günümüzde web programcıların olmazsa olmazı haline gelmiştir.
Şimdi gelin bu CSS kodlarına bir Göz atalım.
CSS’yi Html kodlarında kullanacaksak stil dosyamızın html sayfamıza bağlantısı olması gerekir bunun içinse gerekli olan kod şudur.
<link rel="stylesheet" type="text/css" href="stildosyamızınadı.css ">
Bu kodu Html kısmına yerleştiriyoruz. Örnekteki gibi;
<!DOCTYPE html>
<html>
<head>
<title>Site Başlığımız</title>
<link rel="stylesheet" type="text/css" href="stildosyamızınadı.css">
</head>
<body>
</body>
</html>
- Basit bir kutu oluşturalım;
Burda ilk olarak Html’de bir sınıf oluşturuyoruz.
Örnek;
<!DOCTYPE html>
<html>
<head>
<title>Örnek</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<div id="kutu"></div>
</body>
</html>
Burda oluşturduğumuz div’e verdiğimiz isim önemlidir. CSS de bu isim biçimlendirmek istediğimiz kısmı temsil edecektir. Div’den sonra gelen id kısmı ise css’de “#” temsil eder. İd değilde class’ı da kullanabiliriz. Css’de class kısmıda “.” Temsil eder.
#kutu{
Width:900px;
Height:50px;
Background-color:red;
}
Bur da menü için genişliği 900 pixel, yüksekliği ise 50 pixel olan basit bir kutucuk oluşturup renk verdik.
2.Sitemizdeki yazılarımızı biçimlendirelim;
İşte Sitemizdeki bütün yazıları örneğin Ana sayfada ki, İletişimde ki, Hakkımızda ki bütün yazıların aynı olmasını istiyorsak. Div’den sonra burda class’ı kullanabiliriz. Örneğin;
.paragraf{
Color:pink;
Font-size:18pt;
font-weight:bold;
font-family:Calibri;
}
Birkaç örnekle de anlayacağınız üzere CSS işimizi oldukça kolaylaştırarak performans açısından da istediğimiz verimi verebilmektedir.
Birde işinizi daha da kolaylaştıracak CSS Framework vardır. Framework CSS Kodlarının hazır bulunduğu bir kütüphanedir. Onlarca CSS kodlarını yazmak yerine bu kütüphaneden yararlanarak web sitenizin daha çabuk bitmesini ve zamandan tasarruf etmenizi sağlar.
Bu CSS Framework’lere örnek verecek olursak;
1.Bootstrap
2.Semantic UI
3.Pure.css
4.Material UI
