CSS Nedir?CSS Kodları Nelerdir?

Bize Sorun

CSS Nedir?

CSS web sitelerinin görünümünü ve düzenini belirlemek için kullanılan bir stil dilidir. HTML ve diğer işaretleme dilleri tarafından oluşturulan içeriği biçimlendirir ve görsel olarak düzenler.

CSS’in mantığı, bir web sayfasındaki farklı bileşenlerin (örneğin, başlık, paragraf, resim, menü vb.) stil özelliklerinin merkezi bir şekilde tanımlanmasını sağlar. Bu stil tanımları, belirli bir öğe türü için bir kez yapıldığında, tüm sayfa boyunca uygulanır. Bu da tutarlılık ve kolaylık sağlar.

CSS’in dosya uzantısı .css’dir. Dosya olarak style.css olarak oluşur.”

CSS’in özellikleri arasında renkler, fontlar, boyutlar, arka planlar, kenar boşlukları, pozisyonlar, animasyonlar ve geçişler bulunur.

CSS kodları okunurken, her bir stil özelliği ve değerinin neyi temsil ettiği açıkça anlaşılmalıdır. Kod, ögeler arasında mantıklı bir düzenlemeye sahip olmalı ve yorumlarla belirli stil grupları ayırt edilmelidir.

CSS’in farklı türleri arasında Temel CSS, CSS3 (en yeni sürüm), SASS, Tailwind CSS ve LESS gibi önemli çeşitler bulunur. Bu çeşitler, daha gelişmiş özellikler ve işlevler sağlayarak CSS kullanımını kolaylaştırır ve geliştirir.

CSS Açılımı

CSS, “Cascading Style Sheets” kelimelerinin kısaltmasıdır. Türkçe karşılığı ise “Basamaklı Stil Şablonları” olarak çevrilebilir.

CSS Tarihçesi

CSS’nin tarihçesi kısaca şu şekildedir:

1996: CSS’nin ilk versiyonu, W3C (World Wide Web Consortium) tarafından önerildi.

1997: CSS seviye 2 önerisi sunuldu ve tarayıcılar arasında uyumlu bir şekilde çalışacak standartlar oluşturulmaya başlandı.

1998: CSS seviye 2’nin birinci revizyonu tamamlandı ve CSS2.1 olarak yayımlandı.

2005: CSS3 çalışmaları başladı. Bu yeni versiyon, daha gelişmiş seçiciler, arka plan ve metin efektleri gibi yeni özellikler içeriyordu.

2011: CSS3 modülleri ayrı ayrı geliştirilmeye başlandı ve bu modüllerin bazıları tarayıcılar tarafından kısmen desteklenmeye başlandı.

Günümüz: CSS3, web geliştiricilerin kullanımına sunulan ve sürekli olarak geliştirilen bir dizi modül ve özellik içeren bir standarttır. Bu modüller, animasyonlar, dönüşümler, gölgeler, ızgaralar ve esnek kutular gibi çeşitli stil özelliklerini kapsar. CSS, web sayfalarının estetik ve düzenini belirlemede temel bir araç olarak kullanılmaktadır.

HTML ile CSS Arasındaki Fark

HTML ve CSS arasındaki fark, HTML’in web sayfasının yapısını tanımlaması ve içeriği düzenlemesi, CSS’in ise bu içeriğin görünümünü belirlemesiyle ortaya çıkar. HTML, içeriği tanımlarken, CSS, bu içeriğin nasıl görüneceğini belirler.

Bakınız: HTML Nedir?

CSS Öğrenmek

CSS öğrenmek, temel kavramları anlamak ve temel becerileri kazanmak için biraz zaman alabilir, ancak zor değildir. Çeşitli kaynaklar, öğreticiler ve pratik deneyimlerle, kısa sürede CSS öğrenmek mümkündür.

CSS öğrenmek ne kadar sürer, kişinin öğrenme hızına, deneyimine ve pratik yapma süresine bağlıdır. Temel kavramları anlamak ve başlangıç seviyesinde yetenekler kazanmak birkaç hafta veya birkaç ay sürebilir. BTK, Udemy ve W3schools gibi platformlardan öğrenebilirsiniz.

CSS Türleri

CSS türleri harici CSS, Dahili CSS ve Satır İçi CSS olmak üzere üç çeşittir.

Harici dosyalar, sitenin tüm sayfalarında aynı stilin kullanılmasını sağlar ve bakımı daha kolaydır.

CSS Kodları Nelerdir?

CSS kodları, web sitelerinin görünümünü ve düzenini belirlemek için kullanılan stil şablonlarıdır. HTML ve diğer işaretleme dilleri tarafından oluşturulan içeriği biçimlendirir ve görsel olarak düzenler. CSS, bir web sitesinin renkleri, fontları, boyutları, arka planları, kenar boşlukları, pozisyonları ve diğer stil özelliklerini tanımlar.

CSS kodları, bir dizi özellik ve değerden oluşur. Her özellik, bir seçiciye (örneğin, bir HTML elementi veya bir sınıf) atanır ve belirli bir değerle ilişkilendirilir. Bu değerler, renklerin HEX veya RGB kodları, metin boyutları, kenar boşlukları gibi sayısal değerler veya belirli bir özelliği açıklayan tanımlayıcılar olabilir.

CSS kodları, aşağıdaki gibi temel bir yapıya sahiptir:

seçici {
    özellik: değer;
    özellik2: değer2;
    /* Diğer özellikler */
}

CSS kod örnekleri;

body {
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    font-size: 24px;
    font-weight: bold;
}

.container {
    width: 100%;
    margin: 0 auto;
}

CSS Kodları ve Anlamları

Aşağıdaki tablo, temel CSS kodları ve anlamlarını açıkladık;

Kategori	Örnekler	Açıklama
CSS Renk Kodları	`color: red;`<br>`background-color: #f0f0f0;`<br>`border-color: rgba(255, 0, 0, 0.5);`	Web sayfasındaki metin, arka plan ve çerçeve renklerini belirler. RGB, HEX ve RGBA gibi farklı renk formatları kullanılabilir.
CSS Yazı Stili Kodları	`font-family: Arial, sans-serif;`<br>`font-size: 16px;`<br>`font-weight: bold;`	Yazı tipi, boyutu, kalınlığı ve diğer özellikleri belirler.
CSS Arka Plan Kodları	`background-image: url('image.jpg');`<br>`background-repeat: no-repeat;`<br>`background-size: cover;`	Arka plan görüntüsünü, tekrarlama ve boyutunu ayarlar.
CSS Kenar Kodları	`margin: 10px;`<br>`padding: 20px;`	Öğeler arasındaki boşlukları veya öğenin içeriğiyle kenarları arasındaki boşlukları ayarlar.
CSS Boyutlar Kodları	`width: 100px;`<br>`height: 50%;`	Öğenin genişliği ve yüksekliğini belirler. Piksel veya yüzde cinsinden değerler kullanılabilir.
CSS Pozisyonlama Kodları	`position: absolute;`<br>`top: 0;`<br>`left: 0;`	Öğenin pozisyonunu belirler. Mutlak, göreceli veya sabit pozisyon gibi farklı pozisyonlama değerleri kullanılabilir.
Görsel Efektler Kodları	`box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);`<br>`border-radius: 10px;`<br>`opacity: 0.5;`	Kutunun gölgesini, köşe yuvarlaklığını ve opaklığını ayarlar.
Animasyonlar Kodları	`animation: slide 1s ease-in-out infinite;`	Öğeler üzerinde animasyon efektleri uygular.
CSS Geçişler Kodları	`transition: width 2s, height 2s, background-color 2s;`	Öğeler arasında geçiş efektleri uygular.
CSS Döküman Dizilimi Kodları	`display: block;`<br>`float: left;`<br>`clear: both;`	Öğelerin döküman içindeki konumunu ve davranışını belirler.
CSS Yazı Süslemeleri Kodları	`text-decoration: underline;`<br>`text-transform: uppercase;`<br>`text-align: center;`	Metinlerin altını çizer, büyük harfe dönüştürür veya hizalar.
CSS Liste Stilleri Kodları	`list-style-type: disc;`<br>`list-style-position: inside;`<br>`list-style-image: url('image.jpg');`	Liste öğelerinin stili ve gösterimi hakkında özellikler belirler.
CSS Sayfa Düzeni Kodları	`grid-template-columns: auto 1fr 2fr;`<br>`grid-template-rows: 100px 200px;`<br>`grid-gap: 10px;`	Grid sistemini kullanarak sayfa düzeni oluşturur.
CSS Yazı Gölgeleri Kodları	`text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);`	Metinlere gölgeler ekler.
CSS Çerçeveler Kodları	`border: 1px solid #000;`<br>`border-radius: 5px;`<br>`border-width: 2px 4px;`	Öğelerin kenar çerçevelerini belirler ve yuvarlatma yapar.
CSS Transformasyonlar Kodları	`transform: rotate(45deg);`<br>`transform: scale(1.5);`<br>`transform: translateX(50px);`	Öğelerin dönme, ölçekleme ve konumlandırma gibi dönüşümlerini sağlar.

CSS

Bu tabloda sizlere, CSS kodlarının birçok özelliğini ve özelliğin ne işe yaradığını açıkladık.

CSS Nasıl Kullanılır?

CSS, web sitelerinin görünümünü ve düzenini belirlemek için kullanılan bir stil dilidir. CSS kullanarak, HTML veya diğer işaretleme dilleriyle oluşturulan içeriğe görsel stil uygulanır. CSS kullanmak için aşağıdaki adımları izleyebilirsiniz:

CSS Kodlarını Oluşturma: İlk adım, CSS kodlarını oluşturmaktır. CSS dosyalarınızı harici bir .css dosyasına veya HTML belgenizin içine <style> etiketi içinde yerleştirebilirsiniz. CSS kodlarınızda, belirli HTML öğelerini (seçiciler) hedefleyip, onlara stil özellikleri ve değerleri atarsınız.

Örnek harici CSS dosyası (styles.css) */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { color: blue; }

HTML Belgesine Bağlama: CSS kodlarınızı HTML belgenize bağlamak için <link> etiketini kullanabilirsiniz. Bu, harici bir CSS dosyasını HTML belgenize eklemenin en yaygın yoludur.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styles.css"> <!-- Harici CSS dosyasını bağlama --> </head> <body> <h1>Merhaba, Dünya!</h1> <p>Bu bir CSS örneğidir.</p> </body> </html>

CSS Seçicilerini Kullanma: CSS’de, belirli HTML öğelerine veya öğe gruplarına (sınıflar, id’ler, etiketler) stil uygulamak için seçiciler kullanılır. Seçiciler, stil vermek istediğiniz öğeleri belirlemenize yardımcı olur.
- Etiket Seçicileri: <h1>, <p>, <div> gibi HTML etiketlerini hedefler.Sınıf Seçicileri: .class ile başlar ve belirli bir sınıfa sahip öğeleri hedefler.ID Seçicileri: #id ile başlar ve belirli bir ID’ye sahip öğeyi hedefler.

/* Etiket Seçicisi */ h1 { color: blue; } /* Sınıf Seçicisi */ .highlight { background-color: yellow; } /* ID Seçicisi */ #main-content { font-size: 18px; }

Bu adımları izleyerek, CSS kullanarak web sitenizin görünümünü özelleştirebilir ve daha profesyonel bir görünüm elde edebilirsiniz.

En Popüler CSS Kütüphaneleri

En popüler CSS kütüphaneleri arasında aşağıdakiler bulunmaktadır:

Bootstrap: Twitter tarafından geliştirilen ve en yaygın kullanılan CSS kütüphanesidir. Duyarlı web tasarımı sağlar ve bir dizi hazır bileşen içerir.
Foundation: ZURB Foundation tarafından oluşturulan bir CSS kütüphanesidir. Duyarlı web tasarımı için temel altyapı sunar ve genişletilebilir bir yapıya sahiptir.
Bulma: Modern ve hafif bir CSS kütüphanesidir. Esnek bir ızgara sistemi, modüler bileşenler ve kolayca özelleştirilebilir bir yapı sunar.
Semantic UI: Web tasarımını kolaylaştıran, anlamlı ve sezgisel bir CSS kütüphanesidir. İyi belgelenmiş ve geniş bir topluluğa sahiptir.
Tailwind CSS: Kullanıcı arayüzü geliştirmek için tasarlanmış bir CSS kütüphanesidir. Önceden tanımlanmış sınıflar kullanarak hızlı bir şekilde stil oluşturmayı sağlar.
Materialize CSS: Google’ın Material Design prensiplerine dayalı olarak oluşturulmuş bir CSS kütüphanesidir. Modern ve temiz bir tasarım sunar.
UIKit: Zengin özelliklere sahip bir CSS ve JavaScript çerçevesidir. Kolay kullanımı ve genişletilebilir yapısıyla bilinir.
Ant Design: React tabanlı kullanıcı arayüzü bileşenleri sağlayan bir CSS kütüphanesidir. Temiz ve profesyonel tasarımıyla öne çıkar.

Bu kütüphaneler, web geliştiricilerin web sitelerini hızlı bir şekilde oluşturmasına ve stilini geliştirmesine yardımcı olur. Her biri farklı özelliklere ve tasarım prensiplerine sahiptir, bu nedenle projenizin ihtiyaçlarına en uygun olanı seçebilirsiniz