CSS Dersleri 1: CSS Nedir ?
Bu Yazıyı Değerlendir

CSS Dersleri 1: CSS Nedir ?

Merhabalar,

CSS derslerine CSS Nedir ? adlı  bu yazımla başlıyorum, hakkımızda hayırlısı olsun. CSS konusunda öğrenme aşamasında olduğumu yazıma başlamadan önce belirtmek istiyorum. Blogumda yazdığım diğer ders yazıların çoğu bu şekildedir. Öğrendiğim şeyleri anlatabildiğim vede anlayabildiğim kadarını sizlerle paylaşıyorum. Bu yazımda ise CSS Nedir ? sorusuna yanıt vermeye çalışacağım.

Bu blog yazılarını yazarken açıkcası benim içinde bir tekrar niteliğinde oluyor ve daha iyi kavrıyorum diyebilirim. Size değil kendime çalışıyorum açıkcası 😀

Ben bu web site tasarım olaylarına yeni başladım, neyin ne olduğunu bilmiyorum hep duyuyorum,okuyorum CSS olmadan web site olmaz, CSS öğrenin CSS,CSS,CSS… Nedir bu CSS ? kardeşim diyorsanız işte aradığın cevabın olduğu yazıya denk geldin.

CSS Nedir ?

Css: açılımıyla Cascading Style Sheets yani Türkçe anlamı ile Stil Şablonu demektir.

CSS’i daha iyi anlayabilmeniz için bir örnek ile açıklamaya çalışacağım. Sadece HTML ile hazırlanmış bir web sayfasını bir ev inşaatı olarak düşünün. Sadece tuğlaları koymuş,sutunları dikmiş öylece durduğun farzedin.  Bir kaba ev inşaatının bir ev olması için, yaşanabilecek,kullanılabilecek bir yer olması için ne gerekiyor. Boyanması, elektirik,su tesisatının yapılması gerekiyor değil mi ?. CSS’in görevide budur arkadaşlar. Saf HTML ile oluşturduğunuz sayfaları renk vermenize,biçim vermenize, çok önemli olan bir yazıyı diyelim belirtmek için css kullanırız. Birde javascript var tabii oda işin elektirik,su tesisatı oluyor 😀

Yani,CSS, html sayfamızı şekilendirmemize ve renklendirmemizi sağlayan bir web teknolojisidir.

Örneğin bu yazıyı kırmızı olarak renklendirmemi sağlan bir css kodudur. Bu sitenin bu şekilde görünmesini sağlayan da yine css ‘dir. CSS olmadan HTML sayfalar  renksiz ve sadece siyah,beyaz renklerden ibaret olurdu.

HTML demişken hatırlatmak isterim CSS’i kullanabilmek için HTML bilmemiz gerekiyor zaten css den önce bilmemiz gereken tek kodlama html kodlamasıdır. Ahanda bu linkten kardeşim html ile ilgili ders yazılarıma ulaşabilirsin.

Buraya kadar herşeyi anladım, HTML sayfamı renklendirmek için bu CSS’i kullanacağız. Peki, nasıl kullanıcaz ki ?

CSS Nasıl Kullanılır ? HTML Sayfasına Nasıl Dahil Edilir ?

CSS’i, 2 farklı şekilde HTML sayfamızda kullanabiliriz. Bunlar;

  1. Sayfa içerisinde gömülü olarak.
  2. Sayfa dışından ayrı bir  css dosyası oluşturup ve bu dosyayı html sayfasına çağırarak/ekleyerek.

Hiçbirşey anlamadım ben? Hele dur bi, anlatıyoruz işte.

1.Yöntem olan “Sayfa İçerisine Gömme”.

Basit ya da küçük bir HTML sayfası hazırlıyorsanız sizin kullanacağınız yöntem bu yöntem olacaktır. Kısa ya da az CSS kodları kullanacağınız için html sayfanızda yer kaplamayacaktır. Nasıl kullanacağım diyorsan eğer  basitçe <style> CSS kodları bu araya </style> etiketini kullanarak html sayfanızın <head> <style>CSS kodları buraya</style> Etitketi buraya</head> etiketleri arasına ekleyerek html sayfası içerisinde CSS kodlarınızı kullanacaksınız.

Yine anlamadım ben ? Bu HTML etiketleri ne oluyor ? diyorsan aşağıda bununla ilgili yazdığım ders yazılarını okuman gerekli.

  1. Temel HTML 5 Etiketleri
  2. HTML Dersleri 2: HTML Etiketleri

Okudun mu HTML ders yazılarımı ve okuduktan sonra HTML etiketlerini anladıysan, CSS kodlarınıda nereye yerleştireceğini öğreniyorsun demektir. Sayfa içine gömme nasıl olacak ben yine anlamadım diyorsan aşağıda basit bir örnek verdim.

Yukarıda ki örnekte basit bir html sayfası oluşturdum. Bir üst bölümde HTML etiketlerinden bahsetmiştim. <title></title> etiketlerinden sonra <style> ile başlayıp </style> ile biten kod bölümünde CSS kodlarımızı HTML sayfasının içinde kullandık.

<p>Örnek bir css’li html sayfası oluşturuyorum.</p> kısmı bir paragraf yazısıdır. Yukarıda style etiketlerinde .p { diye bir CSS kodu yazdım bu CSS kodunda paragraf yazısının yazı rengini gri yaptım. Yazının büyüklüğünü’de 20 pixel yaptım ve yazı stilinide Arial Black olarak belirttim. Yani yaptığımız işlem aslında “Örnek bir css’li html sayfası oluşturuyorum” yazısının rengini, boyutunu ve font stilini değiştirmek oldu, bunuda CSS yapısını kullanarak kolayca yaptık.

Bu yöntem sadece basit ve küçük html sayfaları oluşturuyorsanız kullanacağınız yöntemdir. En sık kullanılan yöntem ise 2.yöntemdir yani dışarıdan css dosyası ilave ederek oluşturulan sayfalardır.

2.Yöntem “HTML Sayfasından Ayrı bir CSS Dosyası Oluşturarak”

Bu yöntem en sık kullandığımız ve çok fazla,aşırı CSS kodları yazdığımız web sitelerinden kullandığım bir yöntemdir.Birinci yöntemde CSS kodlarıyla, HTML kodlarını tek bir sayfada iç içe yazıyorduk değil mi? Bu yöntemi basit sayfalarda kullanırız dedim, birde o kodların yüzlerce satır olduğunu düşünü ve hatta binlerce satırlık CSS kodları olduğunu düşünün. Sayfa içine gömme yöntemini kullanamazsınız değil mi ? o kadar satırı tek bir sayfada tutmak ve dahi o kodları anlaşılır, okunabilir vede hatasız yazabilmek yürek ister ancak beyni lens olanlar yaparlar bunu 🙂

Yüzlerce satırlık bir CSS kodu yazmışsak ve bu kodları HTML sayfamıza dahil etmek, HTML sayfamızı bu kodlar ile şekillendirmek istiyorsak kullanacağımız yöntem bu yöntemdir. Kullanım şeklini ise aşağıda ki örnek ile görebilirsiniz.

<style> </style> etiketlerini kullanmadık bu örnekte farketin mi ? Bu kodlar yerine şunu kullandık.

<link rel="stylesheet" type="text/css" href="stil.css">

Bu kod ne? Bu kod bir HTML etiketidir ve CSS dosyalarını HTML sayfalarımıza dahil etmek için kullandığımız ara iletişim etiketlerinden ya da ara bağlantı etiketlerindendir diyebilirim. Burada kodu açıklayacak olursak;

<link rel=”stylesheet” type=”text/css” kısmı HTML sayfamıza dışarıdan dahil ettiğimiz dosyanın bir CSS dosyası yani stil dosyası olduğunu kullanıcının kullandığı web tarayıcısına bildiriyor. href=”stil.css”> kısmı ise, dışarıdan dahil edilen dosyanın nerede olduğunu, hangi kaynaktan getirileceğini söylüyoruz.

Dışarıdan çağıracağımız CSS dosyalarının uzantıları muhakkak .css olmalıdır.

CSS kodlarını yazıp,yazıp. Daha sonra .txt uzantısı olarak dahil etmeye çalışırsanız sıkıntı olur 🙂 Harici CSS dosyalarının uzantısı hep .css olmalıdır aksi halde CSS kodlarınız çalışmayacaktır.

İlk CSS ders yazısı için giriş düzeyinde ki bu yazı bence yeterlidir. Daha sonra ki yazılarımızda detaylara ineceğiz, çeşitli örnek uygulamalar ilede öğrendiklerimizi test edeceğiz. Hatamız, eksiğimiz var ise affola, söylerseniz bir sonra ki yazımda düzeltirim 🙂

Trackback: CSS Nedir ?

Bir Cevap Yazın

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