CSS Temel Eğitim Başlangıç

CSS Temel Eğitim Başlangıç Bilgileri

Bir önceki konumuz olan CSS Nedir? Tüm Detaylarıyla CSS Eğitimleri ile ilgili temel bir giriş yapmıştık. Bu konumuzda ise CSS temel bilgilerinden bahsedeceğiz. Eğitim başlığımız 4 alt başlık altında gerçekleşecektir. Adım adım ilerleyerek ve özellikle not tutmanın yanı sıra önceki konumuzda da belirttiğimiz gibi sublime.tex uygulamasını indirerek uygulamalı çalışmalar yapınız diye belirttik. Hazır mıyız diyerek konumuza başlangıç yapalım hemen.

Bu konumuz için temel başlıklarımız aşağıdaki gibi olacak.

CSS Nedir?
CSS Kod Yapısı
CSS ID ve Class Seçimi
CSS Nasıl Eklenir?

CSS Nedir?

Aslında CSS bir kısaltmadır. İngilizce bir terim olup "Cascading Style Sheets" kelimelerinin baş harflerinden oluşur. Türkçeye çevirdiğimiz zaman anlamı: "Basamaklı Stil Sayfası" olarak çeviri yapabiliriz. Bundan sonra konumuza devam ederken CSS terimi yerine anlaşılır olması için CSS kavramı yerine stil kelimesi olarak kullanacağız. Böylece anlatımda karışıklığın önüne geçmiş oluruz böylece.

CSS Stili nedir ne işe yarar?

Stiller, bir HTML elementinin nasıl görüneceğini belirleme imkanı sunar bize.

Örnek bir açıklama vermek gerekirse. Dışarı çıkan bir kişinin üstüne kıyafet almak ister. Kıyafet seçim işlemleri aslında bir stildir. Tarzdır daha açık bir ifadeyle. Dışarıya çıkınca ne giyinsem diye düşünürüz. Örneğin sahile giden bir bayanın kendi zevkine göre mayo seçimi. Stilini yaratması olayı aslında bir CSS işlevidir. Yada bir toplantıya katıldığınızı düşünelim. Ayakkabılarımızın rengi siyah olmalı, Beyaz bir gömleğin üzerine mavi kravat iyi gider düşüncesi halk dilinde tarz denilen bu kavram makine dilinde stildir. CSS kavramının ne işe yaradığını umarım anlatabilmişizdir.

Yukarıda temel olarak CSS stil kavramına açıklama getirdikten sonra bu çalışmaların web diline aktarmamız söz konusu olacak. Örneğin bir Web sitesinin hazırlığını yaparken daha güzel bir görünüme kavuşturmak için yapacağımız çalışmalar aslında CSS stillerinin yardımlarıyla bunu gerçekleştirebiliriz.

CSS (Stiller) sadece bunlarla kalmayıp HTML dosyalarımızın daha anlaşılır olmasını sağlar. Örneğin stillerimizi tek bir dosyada toplayabilir ve kolaylıkla okunmasını da sağlayabiliriz. Yeri gelmişken belirtelim hemen. Stil dosyalarının uzantısı *.css dir. Önemli bir nokta daha CSS Dosyası birçok stil barındırabilir.

Stiller css uzantılı olduğunu söylemiştik ve stil dosyalarına kayıt edilerek kullanılır. Peki bize nasıl bir etkisi vardır diye sorabilirsiniz. CSS stil dosyaları sayesinde web sitenizdeki görüntüyü hızlı ve etkili bir biçimde değiştirmenize olanak verir ve dahası ise düzenlemesi çok kolaydır. Web sitelerinizde oluşan kod fazlalığının önüne geçer.

CSS Kod Yapısı

Anlayacağınızı düşündüğümüz biçimde CSS stilleri nedir CSS ne işe yarar ile ilgili temel bilgiler verdik. Bundan sonraki süreçte yavaş yavaş kodlama mantığına değineceğiz. Adım adım okumaya, okurken not etmeye ve hatta uygulamalı olarak yaptığımız işlemleri sizlerde yapmaya başlayınız. Uygulamalı eğitimlerin daha işe yaradığı bir gerçek. Size önerimizi uygulamalarınızı sublime tex üzerinden yapmanız daha güzel olacaktır.

Sublime text için ziyaret edebileceğiniz site: www.sublimetext.com

Bir CSS Kodu Mantığı

CSS kodları genel olarak iki temel bileşenden oluşur diyebiliriz. İlk CSS kodunda element ve stilleri birbirinden ayıran bir seçimlerin olduğunu ve diğer CSS stilde ise bir ya da daha fazla özelliği belirttiğimiz biçimlerdir.

Örnek bir temel .css çalışması - Not Renklendirme anlaşılır olsun diye belirttik. Kafanız karışmasın. Aşağıdaki örnekte hepsinin siyah olduğunu da düşünebilirsiniz.

(özellik) (Değer) (özellik) (Değer)

h1 {color:blue; font-size:12px;}
(Seçim) (ifade) (ifade)

Yukarıda yer alan renkli kısımlara açıklama getirecek olursak;

Seçimler genel olarak stilini belirlediğimiz HTML elementleridir, h1, a, body, p gibi.

İfadelere gelecek olursak bilmeniz gereken en önemli özellik: değer; şeklinde { ve } işaretleri arasında sıralanırlar

CSS Örnekleri

Bilindiği üzere css ifadesi daima noktalı virgül (;) ile biter. Yukarıdaki renkli olarak belirttiğimiz örneğe dikkatlice bakarsanız ifadeler birer kıvrımlı parantez içinde yer aldığını göreceksiniz. Bu değişmez bir özelliktir ve bilmeniz gerekir. Örnekleme yapacak olursak.

CSS Kodu

p { color: blue; text-align: center; }

Yukarıdaki örneğimiz tek satır olarak yazılmış biçimde ama karışıklığın önüne geçmek için kodlarımızı sizlere tavsiyemiz olarak daima aşağıdaki yazım biçimi formatında olması karışıklığın önüne geçtiğini belirtebiliriz. Hem böylece kodlarınızı inceleyenler için açıklayıcı olur ve karmaşık bir yapıdan daha profesyonel bir kodlama olarak sunumu yapmış olursunuz.

CSS Kodu

   p
   {
      color: blue;
      text-align: center;
   }

CSS'de Açıklama Kullanmak

CSS de kodlara açıklık getirmek için daha doğru bir ifadeyle, kodlarınızı inceleyen birilerinin anlam verebilmesi için açıklama getirmek isterseniz yapmanız gereken /* açıklama */ ifadesini kullanmaktır. Özellikle referanslarda son derece güzel bir etkinlik olacaktır. Aşağıdaki örneğimize göz atarak kavramaya çalışabilirsiniz.

CSS Kodu

   /* Paragraf Stilim */
   p
   {
      /* Renk mavi olacak */
      color: blue;
      /* Ortalanmış olacak */
      text-align: center;
   }

CSS ID ve Class Seçimi

Buradan devam edilecek.

haaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

HTML elementleri için stiller belirleyebildiğiniz gibi size özel stiller belirleyip elementlerin "id" ve "class" özelliklerinde bu stili belirterek de kullanabilirsiniz.

Class Kullanımı

Bir HTML kaynağına baktığınızda bir element (tag) özelliği olarak class="stil" şeklinde bir özellik belirtildiğini görebilirsiniz. Peki neden buna gerek duymuşlar? Örneğin aşağıdaki HTML kodunu inceleyelim:

   <div class="stil">Hoş Geldiniz!</div>

Yukarıdaki div elementi içinde yer alan class="stil", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur. CSS dosyamızda şu şekilde bir ifade varsa:

   .stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

Nokta (.) ile başlayan bir stil oluşturduk ve adını biz verdik. Bu demektir ki class="stil" ile belirttiğimiz tüm elementler 10 punto Tahoma yazı tipinde ve mavi (blue) renginde olacaktır. Tabi istersek sadece tek bir elementte geçerli olmasını sağlayabiliriz. Örneğin sadece DIV elementlerinde geçerli olmasını istiyorsak:

   div.stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

".stil" yani seçim adımızın başına div getirmemiz yeterli olacaktır. Bu durumda bu CSS kodu sadece DIV elementlerinde kullanılabilir olacaktır.

CLASS özelliği kullanmanın bize sağlayacağı yararlara şöyle bir bakalım:

Kendimizin adlandırdığı özel stiller yaratmak ve kullanmak

Bir stili birden fazla elementte kullanabilmek

Stillere CSS de yer verip HTML kodlarımızı sürekli tekrarlanan uzun CSS kodlarından arındırmak

ID Kullanımı

ID özelliği ile de stiller yaratabiliriz. CLASS'tan farklı yanları:

Sadece tek bir elementte kullanılabilir.

Aynı id değeri iki elemente verilemez (Her id sadece tek bir elementte kullanılabilir).

Stil dosyamızda CLASS'da . (nokta) kullanırdık, ancak id özelliğine göre stilleme yapacaksak # (diyez) kullanırız.

Şimdi bu anlattıklarımızı örnek üzerinde görelim:

   <div id="stil">Hoş Geldiniz!</div>

Örnekte ID değeri "stil" olan bir DIV elementi görüyoruz. CSS dosyamızda bu elemente özel stil tasarlarken aşağıdaki şekilde kod yapısını oluşturmalıyız:

   #stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

Görüldüğü gibi bu kez diyez (#) ile başlattık. Sadece tek bir elemente özel stil tasarlamış olduk (Neden? Çünkü başka bir elementte yine id değeri "stil" belirtilemez.)

Ayrıca unutmadan söyleyelim hiçbir ID değeri rakamla başlamaz. ID, HTML dosyasında o elementi bulmamızı sağlar, bu nedenle aynı ismi veremeyiz. Aynı ismi vermemizin diğer yaratacağı sorun Java Script'te bu elementi id özelliğine göre kullanamamak olacaktır. Son olarak bazı tarayıcılar birden fazla aynı id kullanılan HTML dosyalarında stilleri görmezden gelebilir.

CSS Nasıl Eklenir?

Bir tarayıcı açıldığı zaman stilleri okur ve o stilin kullanıldığı HTML elementlerini belirtilen özelliklere göre şekillendirir.

Üç şekilde sayfamıza stil ekleyebiliriz. Bunlar:

Stilleri CSS Dosyasından Çağırmak

HTML Sayfasında CSS Yazmak

HTML Elementinin İçerisinde Stil Belirtmek

1. Stilleri CSS Dosyasından Çağırmak

Öncelikle bir not defteri ya da CSS düzenleyici program açmalısınız.

CSS Kodlarınızı CSS Kod Yapısı'na uygun olarak yazın ve kaydedin.

HTML Sayfanızı açıp <head> ile </head> arasına aşağıdaki şekilde stil dosyanızın adını belirtin.

HTML Kodu

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

href="DOSYA_ADI" ile belirttiğimiz yerde bizim kaydettiğimiz dosyanın adı yer almalı ve HTML sayfası ile CSS dosyası aynı klasörde bulunmalıdır. Farklı bir klasörde kullanmak istiyorsak HTML sayfasına göre konumu yazmamız gereklidir.

Dosya adını doğru yazdıysak artık CSS dosyamızı HTML sayfamıza bağladık demektir. Yani CSS dosyamızdaki stilleri rahatlıkla HTML sayfamızda kullanabiliriz.

2. HTML Sayfasında CSS Yazmak

HTML sayfamızda HEAD elementlerinin arasında STYLE elementi kullanarak stiller yaratmamız mümkün. Aşağıdaki örneğe bakalım:

HTML Kodu

   <html>
   <head>
      <title>Sayfa Başlığı</title>
      <style type="text/css">
         body { background-color:black; color:white; }
         p { font-family: Tahoma, Verdana; font-size: 12px; }
      </style>
   </head>
   <body>
      <p>Bu 12 piksel Tahoma yazı tipi ile yazıldı.</p>
   </body>
   </html>

Örneğe baktığımızda <style type="text/css"> elementini HEAD elementi içinde açıp kapatıyor ve içine stillerimizi yazıyoruz. Böylelikle dosyamızda belirttiğimiz stiller dışarıdan bir dosyaya bağlı olmaksızın kullanılabilir olacaklar.

3. HTML Elementinin İçerisinde Stil Belirtmek

Bazen stil dosyası ya da STYLE elementi kullanmadan hızlı çözümler üretmek gerekebilir. Böyle durumlarda her elementin style="" özelliği kullanıma hazırdır. CSS kodlarını element içinde açacağımız STYLE özelliğine sıralarız. Örneğin;

HTML Kodu

      <p style="font-family: Tahoma; font-size: 12px;">
         Bu 12 piksel Tahoma yazı tipi ile yazıldı.
      </p>

Size tavsiye edeceğimiz kullanım yolu 1 numaralı maddede anlattığımız harici bir dosya kullanmanızdır.

Anahtar kelimeler:

CSS, CSS Eğitimleri, CSS Eğitimi Dokümani, CSS Öğrenmek, CSS Kodları, CSS Nedir, CSS Kodlama Eğitimi

--
---
Akblog.NET

CSS Temel Eğitim Başlangıç