CSS Stil Dosyası Nedir?
Bu makalemde sizlerle CSS Stil Dosyası Nedir?, ne olduğunu, ne işe yaradığını ve nasıl kullanıldığını göstermeye çalışacağım. CSS (Cascading Style Sheets) – dosyası web sitemizde HTML kodlarına stil vermek için kullanılır. CSS dosyasının kullanıldığı HTML Web siteleri kesinlikle güzel bir görünüme sahip olmaktadır.
Html dosyalarda çoğunlukla stil dosyalarının kullanıldığı gibi CSS dosyalarının içerisinde belirli kod parçacıklarıda bulunur. Sizlere CSS dosyasının içerisinde yer alması gereken kod parçacıklarını da aşağıda belirteceğim.
CSS dosyaları Web sitemizin görümünde farklar yaratacağı için bu Google SEO açısından bizlere önemli bir farklılık sunacaktır. Bu ayrıntıyı gözden kaçırmamak gerekir. Html içine yazılan Css kodları Html sayfanız içinde genel olarak görüntünün iyileştirmesi için kullanılır.
CSS Ne İşe Yarar?
CSS Dosyaları, HTML dosyalarında – Web sitelerinde görünümün düzeltilmesinde farklı Html objelerine aşağıdaki bir takım değişiklikleri yapmada kullanılır;
- Yazının büyüklüğünü belirleme ve renk verme (font-size, color).
- Herhangi bir nesneye arka plan fotoğrafı veya rengi belirleme (background).
- Listeleme elemanlarına stil verme(ul, li, ol).
- Herhangi bir nesneye yükseklik(height), genişlik(width) yön verme(float).
- Bir nesnenin üzerine geldiğinde ve üzerinden fareyi çektiğinde ki durumu belirleme (hover).
- Bir nesneye çerçeve rengi ve kalınlığı verme (border).
ve benzeri işleri yapmada CSS stil dosyasının içinde kod parçacıkları yazılabilir ve bu yaptığınız Web Tasarımında kesinlikle kullanıcılarınızın gözüne hoş gözükecektir. Bu sayede iş imkanlarınızı ve potansiyelinizi her geçen gün arttırmış olacaksınız.
CSS Kodları Nasıl Kullanılır?
CSS Stil Dosyası Web sitemize nasıl yerleştireceğimizi ve CSS stil dosyası içerisine nasıl kod yazacağımızı bu başlık altında uzun bir şekilde gösteriyor olacağım. Tekrardan belirmek isterim ki HTML Web Sitenizden Mutlaka bir CSS Stil dosyası bulundurun ve kullanıcılarınız önüne hoş ve sade bir görüntü çıkartırsanız web sitenizde gezdiklerinde veya sitenizde uzunca bir yazı okuduklarında gözleri yorulmadan saatlerce vakit geçirebilme imkanı sunmalısınız.
CSS Dosyasını Web Sitesine Ekleme
<head> .. <link rel="stylesheet" href="css/style.css" type="text/css"> .. </head>
Yukardaki kodu bu şekilde ekleyebilirsiniz.
Sıra geldi CSS kodlarının nasıl yazıldığında aşağıda sizinle madde madde paylaşacağım.
- float : Yön. Örn .: (float:left;)
- color : Renk. Örn .: (color:white;)
- height : Yükseklik. Örn .:(height:100px;)
- width: Genişlik. Örn .:(weight:50px;)
- margin: Nesnenin dışında boşluk. Örn .: (margin: 10px 20px 5px 10px;) üst sağ alt sol
- padding: Nesnein içerisine boşluk. Örn .: (padding:8px 15px 45px 12px;) üst sağ alt sol
- min-height: Minimum yükseklik. Örn .: (min-height:100px;)
- max-height: Maksimum uzunluk. Örn .: (max-height:430px;)
- min-width: Minimum genişlik. Örn .: (min-width:200px;)
- max-width: Maksimum genişlik. Örn .: (max-width:300px;)
- text-decoration: Font altı çizili, üstü çizili gibi ayarlar. Örn .: (text-decoration:none;)
- font-size: Yazı büyüklüğü. Örn .: (font-size:16px;)
- background: Arkaplan fotoğrafı veya rengi belirleme. Örn .: (background:#000; veya background:src(“…”);)
- position: Pozisyon. Örn .: (position:absolute;)
- border: Çerçeve. Örn .: (border:5px solid #000;)
- hover: Nesnenin üzerine gelince yapacağı işlem. Örn .: (.nesne:hover{})
- before: Nesnenin öncesine eklenecek. Örn .: (.nesne:before{})
- after: Nesnenin sonranına eklenecek. Örn .: (.nesne:after{})
- font-weight: Yazı kalınlığı. Örn .: (font-weight:bold;)
- display: Görünürlük. Örn .: (display:block;)
- list-style: Liste Stili. Örn .: (list-style:none;)
İki farklı öğe vardır,
- CLASS (. nokta ile gösterilir)
- ID (# kare ile gösterilir)
CLASS NEDİR?
Class bir çok yerde kullanabileceğiniz özelliktir. CSS Stil Dosyası Nedir? Web sayfanının bir çok yerinde bir defa oluşturduğunuz stili bir çok defa kullanabilirsiniz.
.sinif{color:white;}
ID NEDİR?
ID bir sayfada tek bir defa kullanabilirsiniz. Daha fazlasına izin vermeyecektir. Sabit Formlarda kullanmanızı öneririm.
#stil{color:black;}