Web geliştirmenin temelini oluşturan kodlama dili  HTML’yi hatırlıyor musunuz? Cevabınız evet ise, Basamaklı Stil Sayfaları anlamına gelen CSS’yi de duymuşsunuzdur. Fakat HTML’yi daha önce duymadıysanız, kısa bir açıklama yapalım. HTML yani Hiper Metin İşaretleme Dili , web sitesi oluştururken öğrenmeniz gereken ilk dildir. CSS ise HTML’nin tamamlayıcısıdır.

CSS Nedir? Ne İşe Yarar?

CSS, Basamaklı Stil Sayfaları anlamına gelir. CSS kullanarak, bir web sayfasının görünümünü iyileştirebilir ve kendi istediğiniz gibi şık bir görünüm verebilirsiniz.

CSS’yi kullanarak, metin rengini, yazı tipi stilini, paragraflar arasındaki aralığı, sütunların nasıl boyutlandırılacağını ve yerleştirileceğini, hangi arka plan görüntülerinin veya renklerinin kullanılacağını, yerleşim tasarımlarını, farklı cihazlar için ekrandaki varyasyonları ya da ekran boyutlarını değiştirebilirsiniz.

CSS Sürümleri ve Özellikleri Nelerdir?

Cascading Style Sheets, seviye 1 (CSS1) Aralık 1996’da piyasaya sürülmüştür. Bu sürüm, CSS dilini ve tüm HTML etiketleri için basit görsel biçimlendirme modelini açıklar.

CSS2, Mayıs 1998’de CSS1 üzerine inşa edilmiştir. Bu sürüm, aşırı kapsamlı metin biçimlendirme dilini geliştirmek için kullanılan bildirimsel bir dildir. İşitsel stil sayfaları, genişletilmiş yazı tipi seçimi, otomatik numaralandırma vb. gelişmiş yeteneklere sahiptir. CSS2’nin geriye dönük uyumluluğu vardır.
CSS3, Haziran 1999’da daha eski CSS sürümleri üzerine inşa edilmiştir. CSS3, önceki CSS sürümlerinin (CSS2) en son standartıdır. CSS2 ve CSS3 arasındaki en büyük fark, CSS3’ün artık farklı modüllere bölünmüş olmasıdır.  Her modül W3C’den ayrı ayrı geçtiği için, daha geniş bir tarayıcı desteği yelpazesi vardır. Uyumluluğu sağlamak için CSS3 sayfalarınızı olabildiğince çok tarayıcıda ve işletim sisteminde test ettiğinizden emin olmanız gerekir. CSS3, HTML5’in ayrılmaz bir parçasıdır.

HTML ile CSS İlişkisi

HTML bir web sitesinin ana bileşeni iken, CSS, düzeni kontrol eder ve web tasarımını (sayfaların nasıl sunulduğu) ayarlar. CSS, HTML öğeleri için arka planları, dolguyu, renkleri ve diğer birçok özelliği ayarlar. Animasyon ve resim galerileri gibi diğer heyecan verici özellikleri oluşturmak için de CSS’yi kullanabilirsiniz.

HTML’ye çok benzer şekilde, CSS de bilgisayarınızdaki bir metin düzenleyici veya kelime işlemci aracılığıyla basit ve düz metin olarak yazılır. Bu CSS kodunu HTML sayfalarınıza eklemenin üç ana yolu vardır: Harici, dahili veya satır içi. 

Harici (external) stil sayfaları .CSS dosyaları olarak kaydedilir ve tek bir dosya aracılığıyla tüm bir web sitesinin görünümünü belirlemek için kullanılabilir. Harici bir stil sayfası kullanmak için, .html dosyalarınızın harici stil sayfasına bağlanan ve aşağıdakine benzer bir başlık bölümü içermesi gerekir:

<head>

<link rel=”stylesheet”  type=”text/css”  href=mysitestyle.css”>

</head>

Bu .html dosyasını harici stil sayfanıza bağlar ve bu dosyadaki tüm CSS talimatları, bağlantılı .html sayfalarınıza uygulanır.

Dahili (Internal) stil sayfaları, doğrudan belirli bir .html sayfasının başlığına yazılan CSS talimatlarıdır. Dahili stil sayfası aşağıdaki örneğe benzer:

<head>

<style>

Body  {  background-color:thistle;  }

P  {  font-size:20px;  color:mediumblue;  }

</style>

</head>

Son olarak, satır içi (inline) stiller, doğrudan HTML koduna yazılan ve yalnızca tek bir kodlama örneğine uygulanabilen CSS parçacıklarıdır. 

Örneğin, <h1  style=”font-size:40px;color:violet;”>Check out this headline!</h1> tek bir .html sayfasındaki belirli bir başlığın mor, 40 punto yazı tipinde görünmesine neden olur.

Örneklerden de anlayacağınız gibi, HTML web sitenizi destekleyen temel çerçeveler, duvarlar ve kirişlerse; CSS boya, pencere stili ve peyzaj gibidir.

CSS Frameworkleri ve Kütüphaneleri

Aşağıda en iyi CSS framework ve kütüphanelerini sizin için bir araya getirdik. 

Şimdi hep birlikte bu framework ve kütüphaneleri inceleyelim:

  • Sass

Sass, 2006’da ilk olarak piyasaya sürülen en eski CSS ön işlemcisidir. Yaratıcıları, Natalie Weizenbaum ve Hampton Catlin, HTML’ye dinamik özellikler ekleyen Haml şablon dilinden esinlenmiştir. Amaçları benzer bir dinamik işlevselliği CSS’de de uygulamaktı. Böylece, bir CSS ön işlemcisi buldular ve buna Syntactically Awesome Style Sheets (Sass) adını verdiler.

Sass, Ruby’de yazıldığı için birçok geliştiricinin onu kullanmasını engelliyordu. Bununla birlikte, LibSass kütüphanesinin tanıtımı, Sass’ın kullanımına büyük bir destek verdi. LibSass, Sass’ı Node, PHP ve hatta C gibi diğer backend dillerinde ayrıştırmayı sağlayan bir C / C ++ kütüphanesidir.

  • Less

LESS, Sass’tan üç yıl sonra, 2009’da Alexis Sellier tarafından yayınlanmıştır. Sass’tan etkilenen Less, daha sonra farklı özellikleriyle Sass’yi etkilemeyi başarmıştır. 

LESS, .less dosya uzantısıyla standart CSS sözdizimini kullanır. Bu, geçerli bir .css dosyasının da geçerli bir .less dosyası olduğu anlamına gelir. 

LESS; renkleri, görüntüleri, gradyanları, boyutları, birimleri ve diğer özellikleri işleyebileceğiniz birçok yerleşik işlev sunar.

  • Bootstrap

En yaygın kullanılan ücretsiz ve açık kaynaklı CSS Framework’u Bootstrap, en popüler CSS Framework’lerinden biridir. Bu framework’un güncel sürümü, 2018’de piyasaya sürülen Bootstrap 4’tür. Bu sürümde yeni renk şemaları vb. birçok önemli özellik tanıtılmıştır. Ek olarak, Bootstrap 4, SASS ile oluşturulmuştur ve bu, Bootstrap’in artık hem LESS hem de SASS’yi desteklediği anlamına gelir.

CSS Nasıl Öğrenilir?

Modern web geliştirmenin önemli bir parçası olan CSS, her web tasarımcısı ve geliştiricisi için sahip olunması gereken bir beceridir. 

Peki nereden başlamalıyım diye soruyorsanız, sizin için kısa liste hazırladık.

1. HTML öğrenin

CSS, HTML’nin bir tamamlayıcısıdır. HTML bilmiyorsanız CSS kullanamazsınız. Bu yüzden HTML öğrenmeniz gereki.r

2. Temel bilgileri öğrenin

Eğitim alabileceğiniz etkili kurslar ya da web siteleri bulun. w3schools, CSS kodunu denemenizi sağlayan harika bir eğiticiye sahiptir. Ayrıca HTML Tutorials, The CSS Tutorial ve HTML Dog’u deneyebilirsiniz.

YouTube’den CSS eğitimi almak isterseniz, aşağıdaki linkleri tıklayabilirsiniz:

Sıfırdan CSS Dersleri – Video Eğitim Serisi

CSS Tutorial – Zero to Hero (Complete Course)

CSS Crash Course For Absolute Beginners

3. Deneme yanılma

İnternette bir stil sayfası bulun ve bunu bilgisayarınızdaki bir dosyaya kopyalayın. Kodu değiştirmeyi ya da eklemeler yapmayı deneyin. Tarayıcınızda sayfayı kaydedin, yenileyin ve nasıl göründüğüne bakın. Her seferinde yalnızca bir şeyi değiştirin. Böylece ne yaptığınızı anlayabilirsiniz.

4. Kendi web sitenizi tasarlayın

Web sitenizin istediğiniz şekilde görünmesini sağlamak için CSS’yi kullanmayı deneyin. Kodunuzun çıktısını arada bir kontrol etmek için birden çok pencere kullanın, böylece anlaşılması daha kolay olacaktır.

CSS Kodu Nerede Kullanılır?

CSS, renkler, düzen ve yazı tipleri de dahil olmak üzere web sayfalarının tasarımını ve sunumunu açıklayan bir dildir. Tasarım ve sunumun büyük ekranlar, küçük ekranlar veya yazıcılar gibi farklı cihaz türlerine uyarlanmasına olanak tanır. CSS, HTML’den bağımsızdır ve herhangi bir XML tabanlı biçimlendirme diliyle kullanılabilir.

Bazı Hazır CSS Kodları

HTML ile uğraşmaya başladıktan sonra, muhtemelen web sayfalarınızı daha çekici hale getirmeye çalışacaksınız. CSS bunu yapmanın en iyi yoludur. CSS, satır içi stillere güvenmeden değişiklikleri sayfanızın tamamına uygulamanıza olanak tanır.

Web sayfanızda bazı temel stil değişikliklerini nasıl yapacağınızı gösteren birkaç basit CSS örneğine aşağıdan ulaşabilirsiniz:

1. Metin Rengi

<!DOCTYPE html>

<title>My Example</title>

<style>

.box {

color: orange;

font-size: 5vw;

padding: 10vw;

margin: 5vw;

border-style: solid;

}

</style>

<div class=”box”>Price is what you pay. Value is what you get.</div>

<p>Notice that the border uses the text color if its color hasn’t been explicity set.</p>

2. Arka Plan Rengi

<!DOCTYPE html>

<title>My Example</title>

<style>

.box {

background-color: gold;

font-size: 5vw;

padding: 10vw;

margin: 5vw;

border: solid;

}

</style>

<div class=”box”>Price is what you pay. Value is what you get.</div>

3. Font Büyüklüğü

<!DOCTYPE html>

<title>My Example</title>

<style>

.a {

font-size: 14px;

}

.b {

font-size: 1.2em;

}

.c {

font-size: 120%;

}

.d {

font-size: 4vh;

}

.e {

font-size: 4vw;

}

</style>

<p class=”a”>Some random text to demonstrate the effect.</p>

<p class=”b”>Some random text to demonstrate the effect.</p>

<p class=”c”>Some random text to demonstrate the effect.</p>

<p class=”d”>Some random text to demonstrate the effect.</p>

<p class=”e”>Some random text to demonstrate the effect.</p>

<p class=”f”>Some random text to demonstrate the effect.</p>

4. Arka Plan Fotoğrafı (Tüm Sayfa)

<!DOCTYPE html>

<html>

<head>

<title>My Example</title>

<style>

body {

background-image: url(‘/pix/samples/bg2.png’);

}

</style>

</head>

<body>

<h1>Background Color</h1>

<p>This page has a background image applied to the <a href=”/html/tags/html_body_tag.cfm”><code>body</code></a> element.</p>

</body>

</html>

5. Biçimlendirilmemiş listeler

<!DOCTYPE html>

<title>Example</title>

<style>

  ul {

    font-size: 22px;

    margin: 0;

    padding-left: 0;

    list-style: none;

  }

</style>

<ul>

  <li>Apples</li>

  <li>Oranges</li>

  <li>Watermelons</li>

</ul>