CSS Temelleri
CSS ile biçimlendirmeye giriş (isteğe bağlı genel bakış)
CSS Temelleri, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 4 dersten oluşur.
CSS Temelleri: CSS ile Biçimlendirmeye Giriş
CSS dünyasına hoş geldiniz! Bugün, web sayfalarınızı biçimlendirmek ve harika görünmelerini sağlamak için Basamaklı Stil Şablonlarını (CSS) nasıl kullanacağımızı öğreneceğiz.
CSS Nedir?
CSS, Basamaklı Stil Şablonları anlamına gelir. Web sayfalarınızın görünümünü ve tarzını denetlemek için kullanılan bir dildir.
CSS ile renkleri, yazı tiplerini, yerleşimleri ve çok daha fazlasını değiştirebilirsiniz!
CSS Nasıl Çalışır
CSS, HTML öğelerini seçerek onlara stiller uygular. CSS'yi üç şekilde kullanabilirsiniz:
- Satır içi: Stilleri doğrudan HTML öğelerinin içine ekleyin.
- Dahili: Stilleri
<head>içindeki bir<style>etiketine ekleyin. - Harici: Ayrı bir CSS dosyası kullanın.
Bu derste dahili ve harici stillere odaklanacağız.
Dahili CSS
Dahili CSS, HTML belgenizin <head> bölümündeki bir <style> etiketi içinde yazılır.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
Harici CSS
Harici CSS, .css uzantısına sahip ayrı bir dosyada yazılır. <link> etiketini kullanarak bu dosyayı HTML belgenize bağlarsınız.
Örnek:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
CSS'de Seçiciler
Seçiciler, belirli HTML öğelerini biçimlendirme amacıyla hedeflemek için kullanılır. Yaygın seçiciler şunlardır:
- Etiket Seçici: Belirli bir etikete sahip tüm öğeleri hedefler. Örnek:
p. - Sınıf Seçici: Belirli bir sınıfa sahip öğeleri hedefler. Örnek:
.myClass. - ID Seçici: Belirli bir ID'ye sahip bir öğeyi hedefler. Örnek:
#myID.
Bunları nasıl kullanacağımızı görelim!
Sınıf ve ID Seçicileri
Birden çok öğeyi biçimlendirmek istediğinizde sınıf kullanın. Tek ve benzersiz bir öğe için ID kullanın.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
Kendiniz Deneyin
Dahili CSS kullanarak bir web sayfası oluşturalım. Başlangıç için bir örnek aşağıda verilmiştir:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
Harika İş!
Tebrikler! CSS'nin temellerini ve web sayfalarınızı biçimlendirmek için onu nasıl kullanacağınızı öğrendiniz. CSS, sayfalarınızın profesyonel ve görsel açıdan çekici görünmesini sağlar. Bir sonraki derste, sayfalarınızı daha da canlı hâle getirmek için renkleri ve arka planları daha ayrıntılı inceleyeceğiz. Yaratıcılığınızı ortaya çıkarmaya hazır olun!
Sıkça Sorulan Sorular
“CSS Temelleri” dersi ücretsiz mi?
Evet — “CSS Temelleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 4 dersten oluşur.
“CSS Temelleri” dersinde ne öğreneceğim?
CSS ile biçimlendirmeye giriş (isteğe bağlı genel bakış) HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“CSS Temelleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.