CSS Nedir? Nasıl Kullanılır?

CSS, ’’Cascading Style Sheets’’ kelimesinin ilk harflerinden meydana getirilmiş bir kısaltmadır.  Bu cümlenin dilimizdeki anlamı da basamaklı stil sayfasıdır. Bu stiller, herhangi bir HTML sayfasının ne şekilde görüneceğini belirleme olanağını sağlar. Bir HTML sayfasının nasıl görüneceği çoğu kişi için oldukça önemlidir ve bu nedenle CSS kullanımı oldukça önemlidir ve sitenizin görüntüsünü ayarlamaya yarar. Bir başka deyişle CSS, internet sitelerinin HTML kodlarının güzel bir elbiseyle dikkat çekmek için giydirilmiş hali de denebilir.

Stiller, HTML dosyamızın daha anlaşılır hale gelmesini sağlar. Tek bir dosyada toplanırlar ve kolaylıkla okunup değiştirilebilirler. Bu dosyaların uzantıları ’’.css’’dir. CSS dosyaları pek çok stil barındırabilirler.

CSS Neden Önemli?

Her yazı aynı biçimde görünür ve her kod aynı şekilde yazılır, bu da internet sitelerinde monoton bir görüntü oluşmasına neden olur. İnsanlar kendilerini internet sayfalarında tam olarak ifade edemezler ve ticaret ile ilgili siteler müşterilerini tam anlamıyla estetik bir biçimde karşılayamaz.

HTML kodlarındaki aynılık ve monotonluğun örneği olarak, H1 elementiyle bir başlığı yazdıktan sonra farklı bir yerde yine H1 elementiyle başlık yazılmaya çalışılırken bu yeni başlık önceki H1 elementiyle yazılan başlığın aynısı oluyordu. Yeni ve değişik bir tarzda veya herhangi farklı bir renkle yazamıyorduk. CSS ile birlikte internet sitelerinin üzerinde daha çok kontrole sahip olduk ve sitelerimizi daha fazla kişiselleştirme imkânına kavuştuk. Yazı tipinden arka plana kadar bir sürü elementi CSS sayesinde değiştirebiliriz. CSS’i kullanmak da zor değildir ve kod içindeki sadeliği sayesinde de bize zorluk çıkarmaz.

CSS Nasıl Ortaya Çıktı?

HTML 3.2 ile gelen bir yenilik ile bazı elementler bazı yeni özellikler kazandı. Mesela ’’font’’ elementine color (renk) özelliği eklendi. Böylece yazıların rengini değiştirilebilindi ve az da olsa estetik açıdan daha farklı ve yaratıcı siteler tasarlayabilmeye başlandı ve bu internet kullanıcılarını da site yaratıcılarını da tatmin etti.

Bundan  sonra CSS çıktı ve neredeyse dünya değişti! Tarayıcılar bir bir CSS’i desteklemeye başladı ve internet siteleri günümüzdeki görüntülerine kavuşup insanları estetik açıdan tatmin etmeye başladı.

CSS’in Diğer Özellikleri

CSS, elementlerin (tag) ne şekilde görüneceğini belirler. Peki, CSS’in daha başka özellikleri var mı? Stiller ’’.css’’ uzantılı dosyalara kaydedilerek kullanılmaya başlanır. Aynı zamanda sitenizde istediğiniz görüntüyü hızlı ve etkili bir şekilde değiştirmenize yardımcı olur. Stilleri düzenlemesi de kolaydır, internet sitenizde kod fazlalığı yaratmaz ve kodunuzun ileride yapabileceğiniz değişiklikler için daha anlaşılır ve okunur bir biçimde kalmasına yardımcı olur.

CSS Koduna Giriş

Bir CSS kodu, iki ana bileşenden oluşmaktadır. Bunlardan biri elementleri ve stilleri birbirinden ayırmaya yarayan bir seçim. Diğeri ise birden fazla özelliği bildiren ifade bölümüdür.

Seçim genel olarak stilini belirlemek istediğiniz HTML elementlerinden biridir, H1, a, body, p gibi. İfadeler ise her zaman ’’özellik: değer;’’ şeklinde ve ’’{…}’’ işaretleri arasında yazılırlar.  CSS ifadeleri her daim noktalı virgül ile biterler.

CSS’de Yorumlar

Her programlama dilinde görülen ve HTML’de de olduğu gibi, kullanıcıların bazen göremeyeceği fakat bizim için faydalı olan notların kod içine yazılması ve bu notların kodu etkilememesine yorum denir. Bu özellik CSS içinde de mevcuttur ve ’’/*yorum*/’’ şeklinde kullanılır.

CSS’de ID ve Class Seçimleri

HTML elementleri için stillerin belirlenebilmesi gibi aynı zamanda kendinize özel stilleri belirleyip, elementlerin ’’id’’ ve ’’class’’ özelliklerinde bu özel stili belirtip CSS kodlarınızda rahatça kullanabilirsiniz.

’’Class’’ özelliğini kullanmanın birçok yararı vardır. Bu yararlar:

• Kendi yaratımımız olan özelleştirilmiş stilleri kullanmak.
• Herhangi bir stili birden fazla elementte kullanabilmek
• Stillerimize CSS’de yer verip sürekli tekrarlanan ve HTML kodlarımızı dağıtan ve karmaşıklaştıran, tekrarlanan, uzun CSS kodlarından arındırmak.

’’ID’’ özelliğini kullanarak da kendimize özel ve pratik stiller yaratabiliriz. ’’ID’’nin ’’Class’’tan farkı yanlarını şu şekilde sıralayabiliriz:

• ID yalnızca tek bir elementte kullanılabilir.
• Birbirinin aynısı iki ID değeri farklı iki elemente de verilemez. Her ID yalnızca tek bir elementte kullanılabilir.
• Stil dosyalarında Class için ’’.’’ (nokta) kullanılırken, aynı şey ID için geçerli değildir. ID için stilleme yaparken ’’#’’ (diyez) kullanılır.

Aynı zamanda önemli bir nokta olan, hiçbir ID değerinin rakamla başlamadığını unutmamak gerek. ID değerleri, bir HTML dosyasında bahsedilen ve bulunmak istenen elementin yerini bulmamızı sağlar, tıpkı bir kimlik numarası veya barkod gibidir. Bu nedenle aynı ID değeri iki ayrı elemente verilemez. Aynı ismin verilmesinin yaratacağı bir diğer sorun ise Java Script’te bu elementin ID özelliğine göre kullanılamamasıdır. Ayrıca bazı tarayıcılar birden fazla kez kullanılmış olan aynı ID değerine sahip HTML dosyalarını görmezden gelebilir.

Sayfamıza CSS’i Nasıl Ekleriz?

Bir internet tarayıcısı açıldığında HTML üzerinden stilleri okur ve stillerin kullanıldığı HTML elementlerini, o elementlere atanan şekilde şekillendirir ve internet sayfasını ziyaret eden kişiye bu şekilde gösterir.

İnternet sayfamıza üç şekilde stil ekleme yöntemi vardır. Bunlardan kısaca bahsetmek gerekirse şu şekilde sıralayabiliriz:

• Stilleri bir CSS dosyasından çağırmak.
• HTML sayfasının içine, başka bir yerden CSS dosyası çağırmadan CSS kodlarını yazmak ki bu yöntemi kodlarınızın estetik görüntüsü veya kullanışlığı açısından tercih etmek istemeyebilirsiniz fakat CSS kendisini tekrarlamaz ve kod karmaşasına aşırı derecede neden olmaz.
• Bir HTML elementinin içinde stil belirme.

CSS Yazılarının Özelliklerini Değiştirme

CSS yazılarının çoğu özelliğini göz zevkiniz ve internet sitenizin teması ve ihtiyaçları doğrultusunda değiştirebilirsiniz. Bu özellikler renk, hiza, kalınlık, italiklik ve benzeri özelliklerdir.

a) Color, Yazı Rengi

Yazının rengini belirtmenizi sağlar. Bu şekilde farklı başlıklarınızı farklı renklerle belirebilir, metinlerinizin rengini arka planla uyumlu hale getirebilir, metininizin içinde yer alan önemli kelimeleri normal metinden farklı bir renkle ifade edebilirsiniz. Kullanması en kolay özelliklerden biri olmasına rağmen oldukça önemlidir.

b) Text Align, Hizalama

Bazı durumlarda metnin bir kısmını herhangi bir nedenden dolayı belirtmek ve göze çarpmasını sağlamak isteyebiliriz. İşte bu özellik bunun için önemlidir. Yazının yatay bir yönde ne şekilde hizalanacağını belirtmemizi sağlayan özelliktir. En çok kullanılan dört hizalama yöntemi şunlardır:

• Left: sol
• Right: sağ
• Center: ortalanmış
• Justify: iki yana yaslanmış

c) Text Decoration, Yazı Biçimi

Yazının biçimi de internet sitemizin estetik görüntüsü açısından oldukça önemlidir. Bu özellik de internet sitemizde yer alan metinlerin yazı biçiminde bazı değişikler yapmamıza olanak sağlar.

d) Text Transform, Yazıda Değişiklik Yapımı

Bazen bir sebepten dolayı internet sitenizde bulunan yazınızın tüm harflerini büyük ve küçük yapmak isteyebilirsiniz. Bu nedenden dolayı bu özellik de metninizde bulunan bütün kelimelerin tüm harflerini büyük veya küçük yapmayı sağlar.

• Uppercase: metninizdeki bütün harfleri büyük yapmak için kullanılır.
• Lowercase: metninizdeki bütün harfleri küçük yapmak için kullanılır.

e) Text-İndent, Sol Taraftan Boşluk Bırak

Yazınızın estetik görüntüsü bakımından sol taraftan bir boşluk bırakmak isteyebilirsiniz. Paragraflar için de oldukça önemli bir özelliktir ve CSS sayesinde  bunu yazımıza ekleyebiliyoruz. Bir yazının başında belirli bir büyüklükteki bir boşluk bırakmak için kullanılır.

Text-indent ile yazılan sayı değerleri piksel (px), inç (in), punto (pt), santim (cm) ve yüzde (%) gibi stillerin sonuna eklenirken her zaman stil ile birleşik yazılır. Örneğin 30px doğru bir yazımdır, fakat 30 px arasında boşluk bırakıldığı için yanlıştır ve bir hataya yol açabilir.

f) Diğer Yazı Şekillendirme Komutları

Line-height: Metninizin satır yüksekliği hoşunuza gitmiyorsa bu komut işinize yarayabilir. Metninizin satır yüksekliğini ayarlayıp belirtmenizi sağlar.

Letter-sapcing: Metninizin içinde bulunan harflerin arasındaki boşluk size az veya fazla geliyorsa CSS sayesinde bunu değiştirebilirsiniz. Bu komutla birlikte harfler arasındaki boşluğun değerini dilediğiniz şekilde ayarlayabilir ve metninizi daha estetik kılabilirsiniz.

Word-spacing: Daha önce harflerin arasına boşluk koyabileceğinizden bahsettik. Şimdi de harflerinizin arasındaki boşluktan memnunsanız kelimelerin arasındaki boşluğu değiştirebilirsiniz. Aşırı boşluklu kelimeler ve daha az boşluklu kelimeler metninizin genel görünümünü oldukça etkileyen bir faktördür. Bu nedenle bunu değiştirmenize yarayan komut budur. Belirtilen bir değerde kelimelerinizin arasına boşluk koyabilirsiniz.

Font-Family İle Yazı Tipi Belirlemek

Sitenizde kullanılan yazı tipini beğenmiyor ve güzel gözükmediğini düşünüyorsanız yazı tipini değiştirebilirsiniz. Bunun için font-family komutuyla birlikte yazı tipi klasöründen seçtiğiniz ve beğendiğiniz bir yazı tipinin ismini CSS koduna eklerseniz sitenizin belirtilen yazı tipi değişecektir.