CSS NEDİR?

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 Öğrenmek İçin Nereden Başlamalıyım?

CSS’i anlamak için öncelikle temel seviyede HTML bilgisine sahip olmak gerekir.  Daha sonrasında ise sitemde yayınlayacağım derslere ve yazılara göz atabilirsiniz.

 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 (benim sizlere tavsiyem Dreamweaver, Atom ya da Sublime Text 3) kullanarak yeni bir dosya oluşturun ve style.css isminde kaydedin. Şimdi geldi .html dosyasına style dosyasını bildirmeye. Yeni bir .html dosyası oluşturarak style.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 style dosyasını html’e bağlayabilirsiniz.

1- <head>

2-

3- <link rel=”stylesheet” type=”text/css” href=”stil.css”>

4-

5- </head>

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.

Bu dersin sonuna geldik bir sonra ki derste sizlere CSS ile uygulamalar yapacağız. Hepinize iyi çalışmalar dilerim.

Yorum Gönderin

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

error: Bu içerik korunmaktadır!!