HTML ile web sayfasının temelini ve yapısını oluşturdunuz.

Ama CSS olmadan, günümüz internetinde hiç şansınız yok.

Eğer web yazılım veya tasarımcı olmak istiyorsanız CSS’i öğrenemeniz şart…

Peki ama CSS bu kadar önemli kılan şey?

Hatta CSS ne? diye sorabilirsiniz.

Benim de bu yazıda amacım sizlere bu soruların cevaplarını vermek ve size bir web sayfasını inanılmaz hale getirmek için CSS’i nasıl kullanacağınız göstermek.

Yine uzun bir yazı olacak, o yüzden hızlıca istediğiniz bölüme gidebilmeniz için aşağıdaki içindekiler kısmını kullanabilirsiniz.

CSS3 Nedir?

Açılımı Cascading Style Sheet olan bu dili, web sayfalarını görsel olarak şekillendirmek için kullanıyoruz.

CSS3 de HTML5 te olduğu gibi CSS’in son versiyonu…

CSS3 ile web sayfalarında bir çok seyi yapabilir hale geldik.

Bunların hepsini ilerleyen kısımlarda sizlere anlatacağım.

Çok basit bir örnekle size CSS’i anlatmam gerekirse;

Bir ev inşaatı düşünün, HTML bu evin temeli, kolonları, kirişleridir.

CSS ise o evin içindeki duvarlardır, duvarlardaki boyadır, içindeki mobilyalarıdır…

Yani CSS evi yaşanacak hale getiren şeydir.

Web sayfaları için de aynı şey geçerli…

HTML, sayfanın yapısını, temeli oluşturuyor.

CSS ise, o sayfanın tüm görselini oluşturuyor.

Web Sayfasında CSS’in Kullanılması

CSS’i web sitemizde kullamanın üç yolu var.

  1. Satır İçi CSS
  2. Dahili CSS
  3. Harici CSS

1.Satır İçi CSS

CSS kodlarını, HTML kodları içerisinde kullanarak uygulanan yöntemdir.

HTML elementlerinin niteliklerinden olan <style> niteliği kullanılarak, o html elementine yeni stiller eklenir.

Sayfayı Görüntüle

CSS'i satır içinde kullanımı

Kodu Görüntüle


kopyala

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Bu sayfanın başlığıdır.</h1>
<p>Bu da bir paragraftır.</p>
</body>
</html>

Satır içi CSS ile sadece o elemente stil ekleyebilirsiniz.

Yukarıdaki örnekte gördüğünüz <h1 style=”color:blue;”> ile <h1> elementine style niteliği ile yeni bir nitelik eklenmiştir.

Bu nitelik ile yazının renginin mavi olması sağlanmıştır.


2.Dahili CSS

HTML dersinde gördüğünüz <head> elementi içerisinde <style> elemetinde gerekli CSS kodlarını kullanabiliriz.

Satır içi CSS den farkı, aynı kod ile birden fazla elemente stil ekleyebilirsiniz.

Ve… Hangi elementlere stil ekleyecekseniz, o elementi belirtmeniz gerekir.

Sayfayı Görüntüle

CSS'in dahili olarak kullanımı

Kodu Görüntüle


kopyala

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: yellow;
}
h1 {
color: red;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Bu sayfanın başlığıdır.</h1>
<p>Bu da bir paragraftır.</p>
</body>
</html>

<style> elementi içerisinde, ilk olarak <body> elementini arkaplan rengini body {background-color: yellow;} kodu ile sarı yapmış olduk.

Sonrasında <h1> elementinin, h1 {color: red; margin-left: 40px;} kodu ile yazı rengini değiştirmiş ve soldan 40px boşluk bırakmış olduk.


3.Harici CSS

Harici CSS, aslında dahili CSS ile benzer…

Tek farkı, HTML kodu içerisinde CSS yazmak yerine; CSS’e ait kendi dosyasında kodları yazıyor olmamız.

Ne demek bu;

CSS'in harici olarak kullanımı

style.css adında yeni bir dosya oluşturuyoruz.

Kod editoründe bu dosyayı açıyoruz.

style elementi içine yazdığımız kodları artık buraya yazabiliriz.

kopyala

body {
background-color: yellow;
}
h1 {
color: red;
margin-left: 40px;
}

CSS kodlarını yazdık ama yapmamız gereken bir şey daha var.

HTML kodumuzun içerisinde hangi CSS dosyasını kullanması gerektiğini belirtmemiz gerekiyor.

Yani HTML içinden, CSS’e link vermemiz gerekiyor.

Bunu da aşağıdaki kod ile yapıyoruz.

kopyala

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</style>
</head>
<body>
...

<link> elemetinin niteliklerini kullarak, CSS dosyasına link vermiş olduk.

Burada rel=”stylesheet” niteliği, link verilecek dosyanın türünü belirtiyor.

href=”style.css” ise link verilecek dosyanın konumunu belirtiyor.


CSS’in Yapısı

CSS üç temel yapıdan oluşur.

  1. Seçiciler(Selectors)
  2. Özellikler(Properties)
  3. Değer(Value)

Kısaca şu anlama geliyor.

Stili değiştirmek istediğimiz HTML elementini seçmemiz için kullanıyoruz CSS Seçicileri

kopyala

body {
background-color: yellow;
}

CSS in Yapısı

Bu CSS kodunda body bir CSS Seçicisidir.

Ve… CSS Seçicisi ile body elementini seçmiş olduk.

CSS Seçicisinden sonra gelen tüm kodlar, süslü parantez { } içerine yazılır.

Süslü parantezler içerisine yazdığımız özellikler ile seçmiş olduğumuz elementini stili değiştirmiş oluruz.

Her CSS özelliğinin bir değeri vardır.

Özellik isminden sonra : koyarız ve değeri yazarız.

Değerden sonra ; ile satırı bitiririz.

Yukarıda görmüş olduğumuz tüm imla işaretleri kesinlikle gereklidir.

Bunlardan herhangi birini unutmanız ya da yanlış yazmanız halinde CSS kodunuz işe yaramayacaktır.


Temel CSS Özellikleri

Başlangıç seviyesinde sizlere, bazı temel CSS özelliklerini öğreteceğim.

Renkler

CSS ile HTML sayfasındaki elementlerin arkaplan rengini, yazı rengini veya kenar rengini değiştirebilirsiniz.

Arkaplan Rengi Değiştirme

Bir elementin arka planı rengini değiştirmek için background-color özelliğini kullanıyoruz.

Sayfayı Görüntüle

CSS background-color

Kodu Görüntüle


copy

<h1>Bu sayfanın başlığıdır.</h1>
copy

h1 {
background-color : yellow;
}

Yazı Rengi Değiştirme

Bir elementin yazı rengini değiştirmek için color özelliğini kullanıyoruz.

Sayfayı Görüntüle

CSS color

Kodu Görüntüle


copy

<h1>Bu sayfanın başlığıdır.</h1>
copy

h1 {
color : blue;
}

Kenar rengi değiştirme için henüz erken bu yüzden şimdilik bu kısmı atlıyorum.

Ama yazının ileryen kısımlarında detaylı bilgi vereceğim.


Renklerle işimiz bitmedi.

Size, “CSS içerisinde renkleri nasıl kullanacağız?” bundan bahsedeceğim…

CSS içerisinde, renkleri belirtmenin bir kaç farklı yolu var.

Ben, size şuan sadece temel olan üç tanesini göstereceğim.

Bunlar;

  1. Renk İsmi ile
  2. RGB kodu ile
  3. HEX kodu ile

Renk İsmi ile Belirtme

Şimdiye kadar sadece bu şekilde renkleri belirttik.

kopyala

h1 {
color: red;
}

Burada color özelliğinin değerini red yani kırmızı olarak belirtmiş olduk.

Aynı işlemi RGB kodu ile de yapabilirdik.

RGB kodu ile Belirtme

Tüm renkler kırmızı(Red), yeşil(Green) ve mavi(Blue)den oluşur.

RGB’nin açılımıda RED,GREEN,BLUE’ dur.

Her bir değer 0 ile 255 arasında değer alabilir.

RGB kodu için örnek vermek gerekirse;


RGB Değeri : (255, 99, 71)


RGB Değeri : (50, 205, 50)


RGB Değeri : (50, 55, 250)


RGB ile renk belirtme işlemini aşağıdaki gibi yapıyoruz.

kopyala

h1 {
color: rgb(255,0,0);
}

HEX kodu ile Belirtme

HEX kodu 6 haneden oluşur ve başında # işareti vardır.

Her bir rengin kendine ait HEX kodu vardır.

HEX kodu için örnek vermek gerekirse;


HEX Kodu : #ff6347


HEX Kodu : #32cd32


HEX Kodu : #3237fa


HEX kodu ile renk belirtme işlemini aşağıdaki gibi yapıyoruz.

kopyala

h1 {
color: #ff0000;
}

Tabi ki bütün bunları aklınızda tutmanızı beklemiyorum.

Merak etmeyin, internet üzerinde bütün renklerin HEX kodlarına ya da RGB değerlerine ulaşmanız çok kolay.

Sadece hangi rengi istediğinizi seçin ve gerisi kolay.

Renklerin HEX kodlarını ve RGB değerlerini bulabileceğiniz bir websitesi öneriyorum size:

Renklerin HEX kodları ve RGB değerleri

Bu siteden istediğiniz rengin istediğiniz bilgisine ulaşabilirsiniz.


Arka Plan

CSS’in arkaplan özellikleri ile HTML elementlerinin arka planlarını değiştirebilirsiniz.

ArkaPlan Özellikleri (background Properties)

  • background-color : ArkaPlan Rengini belirler.
  • background-image : ArkaPlan Resmini belirler.
  • background-repeat : ArkaPlanın tekrar edip etmeyeceğini belirler.
  • background-attachment : ArkaPlanın sayfayı aşağı doğru sürüklediğinizde nasıl hareket etmesi gerektiğini belirler.
  • background-position : ArkaPlan olarak eklenmiş olan resmin pozisyonunu belirler.
background-color

Bir HTML elementinin arka plan rengini belirlemek için kullanılır.

Değer olarak herhangi bir renk formatında değer alabilir.