CSS Nedir?

CSS (Basamaklanmış Stil Katmanları), web sayfasını şekillendirmek için kullanılan bir kodlama türüdür. CSS kullanarak web sayfasının görünümünü ve düzenini değiştirebiliriz.

Bir web sitesinin görünümünün masaüstü bilgisayarlar, tabletler ve mobil cihazlar gibi farklı ekranlarda nasıl değiştiğini de tanımlayabiliriz. CSS, C++ veya JavaScript gibi bir programlama dili değildir. Bunun nedeni, CSS’in amacının web tarayıcıları için biçimlendirmeye(HTML’e) stil vermek olmasıdır. HTML yalnızca içeriği “işaretleyen” bir dildir – yani, belgeye belirli bir görsel ve yapısal biçimlendirme verir.

Ben burada anlatımımı size Visual Studio Code üzerinden gösteriyor olacağım.

Örneğin, etiketin rengini değiştirmek istiyorum.

Direk olarak html dosyasında yapabiliriz bu görüntü ayarlarını fakat ben css dosyası ile yapmayı daha doğru buluyorum. Çünkü ileride büyük projeler yaptığınızda tek tek her etikete özellik yazmaktansa sadece bir şeye özellik tanımlayıp onu rahatça diğerlerindede kullanabilirsiniz. Bu dediğimi ilerleyen yazılarımda anlayacaksınız. Oluşturmuş olduğum css dosyasını, html sayfasına tanımlamak için head kısmına tanımlıyoruz.

Daha önce index.html sayfası oluşturduğum gibi, bunun içinde bir css dosyası oluşturuyorum . Ben dosyamın adını deneme koydum .

Öncelikle h1 ve h2 etiketi oluşturdum . H1 etiketine herhangi bir şey tanımlamama rağmen h2 etiketine renk tanımladım .Çıktısı aşağıdaki görselde olduğu gibi gözükecektir.

Herhangi bir etiketi aynı bu şekilde tanımlayarak içerisine bir sürü görünüm özellikleri verebiliriz.

Html etiketleri dışında bir class tanımlayıp onun css özelliklerini belirleyebiliriz.

Dikkat etmeniz gereken, eğer class tanımlıyorsanız css içerisinde tanımlarken . + class ismi yazmanız gerekir.Web tarayıcısında görüntüsü aşağıdaki gibi olur.

CSS ÖZELLİKLERİ

Arkaplan  Özellikleri:

• background-color  =   Etiketin arkaplanına renk atar.

• background-image =  Etiketin arkaplanına resim atar.

• background-repeat = Etiketin arkaplanına eklenen resmin tekrar edip etmeyeceğini belirler.

• background-attachment =  Arkaplana eklenen resmin sayfa ile kaymasını veya sabit kalmasını sağlar.

• background-position = background-image ile belirlenen resmin başlangıç noktasını belirler.

Metin Özellikleri :

• Color  = Metnin rengini belirler.

• text-align =  Metnin etiketin içindeki hizasını belirler.( Parametreleri : center, end, inherit, initial, justify, left, right, start, unset)

• text-indent = Metni ilk satırda sola kaydırmak için kullanılır.

Font Özellikleri:

• font-family = Metinlerin kullanılacağı font ailesini belirlemek için kullanılır.

• font-size =  Fontun boyutunu belirler.

• font-style = Fontun biçimlendirmesini belirler.

• font-weight = Fontun kalınlık incelik durumunu belirler.

Kenarlık Özellikleri:

• border-style = Kenarlık stilini belirlememizi sağlar.

• border-top-style, border-right-style, border-bottom-style, border-left-style  =  border-style özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

• border-width = Kenarlık kalınlığı için kullanılır.

• border-top-width, border-right-width, border-bottom-width, border-left-width = border-width özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

• border-color = Kenarlık rengini belirlemek için kullanılır.

• width  =  Objenin genişliğini belirlemede kullanılmaktadır.

Parametreleri : Genişliği belirmek için uzunluk ölçülerinden yazabilirsiniz. (500px)

• border-top-color, border-right-color, border-bottom-color, border-left-color  = border-color özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

Margin ve Padding Özellikleri:

• margin = Etiketin etrafındaki boşluk olarak tanımlanır. Parametreleri saat yönünde olacak şekilde verilmelidir.  (üst sağ alt sol).

• margin-top,margin-right,margin-bottom,margin-left =  margin özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

• Padding = Padding içerik ile kenarlık arasındaki boşluk olarak tanımlanır.(  padding: 20px 12px 18px 21px;)

• padding-top,padding-right,padding-bottom,padding-left = Arkaplana eklenen resmin sayfa ile kaymasını veya sabit kalmasını sağlar.

• float : Oluşturulan objenin sayfa üzerindeki konumunu belirlemede kullanılır.

• Parametreleri : left, right, none, unset, inherit, initial

• position : Oluşturulan objenin sayfa içinde serbest, daha esnek konumlandırmasına imkan veren etikettir.

Parametreleri : absolute, relative, fixed, static, inherit, initial, sticky, unset

• height : Oluşutulan objenin uzunluğunu belirlemede kullanılır.

• Parametreleri : Uzunluk ölçülerini ile yazabilirsiniz.(200px)

• display : Objelerin görünürlüğünü ayarladığımız CSS etiketidir.

  Parametreleri : block, contents, flex, grid, inherit, initial, inline, none, table