CSS (Cascading Style Sheets), web sayfalarının görsel tasarımını ve düzenini belirlemek için kullanılan stil dilidir. HTML ile birlikte kullanıldığında, web sayfalarının görünümünü özelleştirmek ve daha çekici hale getirmek için güçlü araçlar sağlar. CSS, yazı tiplerinden renklerine, düzenlerden arka plan resimlerine kadar birçok tasarım öğesini kontrol etme olanağı sunar. Bu sayede web geliştiricileri, kullanıcı deneyimini iyileştirerek, daha profesyonel ve kullanıcı dostu web siteleri oluşturabilirler. CSS’in temel amacı, HTML içeriğini görsel olarak zenginleştirirken, kodun düzenliliğini ve bakımını kolaylaştırmaktır.
İçindekiler
CSS Nedir?
CSS (Cascading Style Sheets), web sayfalarının görsel sunumunu ve düzenini kontrol etmek için kullanılan bir stil dilidir. HTML veya XML belgeleri ile birlikte kullanılarak, bu belgelerin içeriğini biçimlendirmeye ve stil vermeye yarar. CSS, yazı tipleri, renkler, kenar boşlukları, hizalamalar ve diğer görsel öğeleri belirleyerek web sayfalarının estetik ve kullanıcı deneyimini iyileştirir. Bu sayede, içerik ve tasarım birbirinden bağımsız olarak yönetilebilir, bakım ve güncelleme süreçleri daha kolay hale gelir.
Ne İşe Yarar?
CSS (Cascading Style Sheets), web sayfalarının görünümünü ve düzenini özelleştirmek için kullanılır. CSS’in temel işlevleri şunlardır:
- Stil Verme: Yazı tipleri, renkler, kenar boşlukları, kenarlıklar ve arka planlar gibi görsel öğelerin stilini belirler.
- Düzenleme: Web sayfasının düzenini ve yerleşimini kontrol eder, elementlerin sayfa üzerindeki konumlarını ayarlar.
- Tutarlılık: Tüm sayfalarda tutarlı bir görünüm sağlar, böylece site genelinde aynı stil kuralları uygulanır.
- Bakım Kolaylığı: HTML içeriğinden ayrı olarak stil bilgilerini sakladığı için, stil değişikliklerini yapmak daha kolay ve hızlıdır.
- Performans İyileştirmesi: Sayfa yüklenme sürelerini optimize eder, çünkü stil kuralları bir kez yüklendikten sonra tüm sayfalar için geçerli olur.
- Responsive Tasarım: Farklı cihaz ve ekran boyutlarına uyum sağlayan esnek ve duyarlı tasarımlar oluşturulmasını sağlar.
Bu saydığımız özellikler sayesinde CSS, web sayfalarının daha estetik, kullanıcı dostu ve işlevsel olmasına katkıda bulunur.
En Çok Kullanılan CSS Kodları ve İşlevleri
CSS, web sayfalarının tasarımını ve düzenini kontrol etmek için kullanılan geniş bir stil kuralları setine sahiptir. İşte en çok kullanılan CSS kodları ve işlevleri:
1. Renk ve Yazı Tipi Ayarları
color: Metin rengini belirler.
//css//
color: #333;
font-family: Yazı tipini belirler.
//css//
font-family: Arial, sans-serif;
font-size: Yazı boyutunu ayarlar.
//css//
font-size: 16px;
font-weight: Yazı kalınlığını ayarlar.
//css//
font-weight: bold;
2. Arka Plan Ayarları
background-color: Arka plan rengini belirler.
//css//
background-color: #f0f0f0;
background-image: Arka plan resmi ekler.
//css//
background-image: url('image.jpg');
background-size: Arka plan resminin boyutunu ayarlar.
//css//
background-size: cover;
3. Kenarlıklar ve Kenar Boşlukları
border: Kenarlık ekler.
//css//
border: 1px solid #ccc;
margin: Dış boşlukları belirler.
//css//
margin: 10px;
padding: İç boşlukları belirler.
//css//
padding: 20px;
4. Boyutlandırma ve Yerleşim
width: Genişliği ayarlar.
//css//
width: 100%;
height: Yüksekliği ayarlar.
//css//
height: 500px;
display: Elemanın nasıl görüntüleneceğini belirler (blok, satır içi, vb.).
//css//
display: block;
position: Elemanın konumunu belirler (statik, mutlak, sabit, göreceli, yapışkan).
//css//
position: absolute;
5. Hizalama ve Esneklik
text-align: Metin hizalamasını ayarlar.
//css//
text-align: center;
flex: Flexbox düzeni kullanarak elemanları hizalar.
//css//
display: flex;
justify-content: center;
align-items: center;
6. Diğer Önemli Özellikler
overflow: Taşma durumunda elemanın nasıl davranacağını belirler.
//css//
overflow: hidden;
z-index: Elemanın yığılma sırasını belirler.
//css//
z-index: 10;
opacity: Elemanın şeffaflık seviyesini ayarlar.
//css//
opacity: 0.5;
Yukarıda saydığımız bu temel CSS kuralları, web sayfalarının stil ve düzenini etkili bir şekilde kontrol etmeye yardımcı olur. Bu kurallar, web tasarımcılarının kullanıcı deneyimini geliştirmek ve estetik açıdan hoş web siteleri oluşturmak için sıklıkla başvurdukları araçlardır.
Basit CSS Sayfası Örneği
Basit bir CSS sayfası örneği ve bu CSS’in uygulandığı bir HTML sayfası:
HTML Dosyası (index.html)
//html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basit CSS Örneği</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Merhaba Dünya!</h1>
</header>
<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<main>
<section>
<h2>CSS Nedir?</h2>
<p>CSS, web sayfalarının görünümünü ve düzenini belirlemek için kullanılan bir stil dilidir.</p>
</section>
</main>
<footer>
<p>© 2024 Tüm Hakları Saklıdır.</p>
</footer>
</body>
</html>
CSS Dosyası (styles.css)
//css//
/* Genel ayarlar */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* Başlık stili */
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
/* Navigasyon stili */
nav ul {
list-style: none;
padding: 0;
text-align: center;
background-color: #444;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
/* Ana içerik stili */
main {
padding: 20px;
max-width: 800px;
margin: 20px auto;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Bölüm başlıkları */
main h2 {
color: #333;
}
/* Altbilgi stili */
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
position: absolute;
bottom: 0;
width: 100%;
}
Bu örnek, basit bir HTML yapısı ve bu yapıyı stilize eden temel CSS kurallarını içerir. Sayfa başlığını, navigasyon menüsünü, ana içeriği ve altbilgiyi stilize ederek, temiz ve düzenli bir web sayfası oluşturur.
