Anasayfa / Web Tasarım / Css / CSS Dersleri 1: CSS Nedir?
css dersleri

CSS Dersleri 1: CSS Nedir?

CSS, kısaca web sayfalarında kullanılan html elementlerinin ekranda nasıl görüneceğini tanımlamak için kullanılan stil kodlarıdır. İngilizce Cascading Style Sheet kelimelerinin baş harflerinden bu kelime ortaya çıkmıştır. Günümüzdeki web sayfalarının bu denli geniş bir tasarım yelpazesine sahip olmasın da CSS’in payı büyüktür.

Niçin CSS Kullanmalıyız?

  • CSS tasarımcıya büyük ölçekte zaman kazandırır.
  • Html kodları içeriği sunmak, CSS kodları görünümü biçimlendirmek için kullanılır.
  • Kod karmaşasını önler.
  • Tasarımda değişiklik yapmak kolaylaşır.
  • Farklı boyutlarda ki ekranlara özgü (notebook, tablet, telefon v.b) tasarım yapmaya olanak sağlar.
  • CSS bir web standardıdır.

CSS Öğrenmeye Nerden Başlamalıyım?

CSS’i anlamak için öncelikle temel seviyede html bilgisine sahip olmak gerekir. Bu nedenle eğer yeterli derecede html bilmiyorsanız html nedir dersiyle başlayarak, 6 derste html’i temel şekilde öğrenebilirsiniz.

Eğer temel html bilgisine sahipseniz. Sizlere mümkün olduğunca basit ve anlaşılır şekilde CSS’i ders ders anlatmaya çalışacağım.

Peki CSS Kodlarını Nereye Yazacağız!

CSS kodlarını yazmak için 3 farklı alternatif bulunuyor.

  • Harici bir stil dosyasına ( .css uzantılı olarak kaydedip)
  • Head etiketi arasına
  • Html etiketleri içerisine

Günümüzde kod karmaşasını engellemek ve yazılan kodların tüm html dosyalarında etkin olmasını sağlamak adına harici stil dosyası tercih edilmektedir.

Herhangi bir editör (notepad++, brackets, dreamweaver v.b) kullanarak yeni bir dosya oluşturun ve stil.css isminde kaydedin. Şimdi geldi html dosyasına stil dosyasını bildirmeye. Yeni bir html dosyası oluşturarak stil.css dosyasının bulunduğu dizine kaydedin ve temel html tanımlamalarını yapın.

<head> etiketleri arasına aşağıdaki kodu ekleyerek stil dosyasını html’e bağlayabilirsiniz.

Diğer 2 yöntem çok fazla tercih edilmediği için kafa karıştırıcı olmaması adına değinmedim. Fakat öğrenmek isterseniz internetten araştırabilirsiniz.

CSS Yazım Kuralları

Şimdi geldi CSS kodlarını yazmaya bunun için aşağıdaki yapıyı biraz inceleyelim.

Bir CSS kuralı genel olarak aşağıdaki bölümlerden oluşur.

css yazım kuralı

Kodu incelediğinizde hiçbir bilginiz olmamasına rağmen tüm h1 etiketlerinin renginin mavi ve yazı büyüklüğünün 12 piksel olarak ayarlandığını anlayabilirsiniz.

CSS kodlarının etkili olabilmesi için html dokümanında <h1> etiketiyle yazılmış bir başlık bulunması gerekir.

Aşağıda CSS ve HTML ile hazırlanmış bir örnek var, inceleyiniz.

index.html kodları

stil.css kodları

Yukardıda ki kodları yazdığınızda aşağıdaki gibi bir ekran çıktısı almış olmanız lazım.

ornek-ekran-ciktisi

CSS derslerimize hızlı bir başlangıç yaptık. Bir sonraki dersimizde CSS Seçicilerine değineceğim, anlamadığınız yerleri yorum olarak sorabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir