İçindekiler Tablosu
Giriş
Web geliştirme dünyasında aktif olan herkes, HTML ve CSS gibi temel yapı taşlarını mutlaka kullanmıştır. CSS, açılımı “Cascading Style Sheets” veya “Basamaklı Stil Sayfaları” olan bir terimdir. CSS, web sayfalarının tasarımını, düzenini ayrıca farklı cihazlara uyumunu sağlamada kritik bir rol oynar. Başlangıçta HTML, sayfa biçimlendirmesi amacı ile tasarlanmadığı için web geliştiricileri için karmaşık sorunlara neden olmuştur. Ancak CSS bu sorunu çözerek stil tanımlamalarını HTML sayfalarından ayırarak web geliştiricilerine büyük kolaylık sağlamıştır. Stil tanımlamaları genellikle harici .css dosyalarında saklandığından, sadece bir dosyayı değiştirerek tüm web sitesinin görünümünü güncellemek mümkün hale gelmiştir.
CSS Söz Dizimi(Syntax)
CSS’de bir seçici (Selector), stil vermek istediğiniz HTML öğesini işaret eder. Bir deklarasyon bloğu, bir veya daha fazla deklarasyon içerebilir ve bu deklarasyonlar noktalı virgülle ayrılabilir. Her deklarasyon, bir CSS özellik adı ayrıca bir değer içerir, bu iki bilgi iki nokta üst üste ile ayrılır. Birden fazla CSS deklarasyonu noktalı virgüllerle ayrılır ve deklarasyon blokları süslü parantezlerle çevrelenir.
CSS Seçiciler(Selectors)
CSS Seçiciler, HTML öğelerini seçerek veya stil vererek tasarımınızı geliştirmenize yardımcı olur.
- Basit Seçiciler (Simple Selectors): Element adına, id’sine veya sınıfına göre elementleri seçme.
- Kombinatör Seçiciler (Combinator Selectors): Elementler arasındaki belirli ilişkilere dayalı olarak elementleri seçme.
- Sözde-sınıf Seçiciler (Pseudo-class Selectors): Elementlerin belirli durumlarına dayalı olarak elementleri seçme.
- Sözde-element Seçiciler (Pseudo-element Selectors): Elementlerin belirli bir bölümünü seçme veya stil verme.
- Öznitelik Seçiciler (Attribute Selectors): Elementleri bir özniteliğe veya öznitelik değerine göre seçme.
Bu kategorilerin bazı örneklerini inceleyerek, CSS Seçicilerin temel kavramlarını anlamaya çalışacağız.
Basit Seçiciler (Simple Selectors)
Element Seçici (Element Selector): Element seçici, elementin adına göre elementleri seçer. Örnek:
p {
text-align: center;
color: red;
}Bu kod, sayfadaki tüm <p> elementlerini merkeze hizalar ve metin rengini kırmızı yapar.
ID Seçici (ID Selector): ID seçici bir elementin ID özniteliğini kullanarak belirli bir elementi seçer. ID’ler benzersizdir ve yalnızca bir elementi seçmek için kullanırız.
#para1 {
text-align: center;
color: red;
}Sınıf Seçici (Class Selector): Sınıf seçici, belirli bir sınıf özniteliğine sahip elementleri seçer.
.center {
text-align: center;
color: red;
}Yalnızca belirli elementleri seçmek için element adı ile sınıf seçicisini bir araya getirebilirsiniz.
p.center {
text-align: center;
color: red;
}Genel Seçici (Universal Selector): Genel seçici, sayfadaki tüm HTML elementlerini seçer.
* {
text-align: center;
color: blue;
}Grup Seçici (Grouping Selector): Aynı stil tanımlarına sahip elementleri seçmek için grup seçicileri kullanırız.
h1, h2, p {
text-align: center;
color: red;
}CSS Nasıl Eklenir?
Tarayıcılar stil sayfalarını okuyarak, HTML belgelerini stil sayfasındaki bilgilere göre biçimlendirirler. Bunun yanında Web sayfalarına CSS eklemenin üç farklı yolu vardır: Harici CSS (External CSS), İçsel CSS (Internal CSS) ve İç İçe CSS (Inline CSS). Bu yöntemlerin her birini kullanarak sayfanın görünümünü özelleştirebilirsiniz.
Harici CSS (External CSS)
Harici CSS, tüm web sitesinin görünümünü tek bir dosya değiştirerek kolayca değiştirmenize olanak tanır. Bu yöntemi web sayfalarınız arasında tutarlılık sağlamak için çok yaygın olarak kullanırız. İşte harici CSS kullanmanın temel adımları:
- Harici CSS dosyasını oluşturun ve “.css” uzantısı ile kaydedin. Ek olarak bu dosya HTML etiketleri içermemelidir, yalnızca CSS kurallarını içermelidir.
- HTML belgenizin
<head>bölümünde, CSS dosyasına bir referans eklemek için<link>etiketini kullanın.
Giriş
Web geliştirme dünyasında aktif olan herkes, HTML ve CSS gibi temel yapı taşlarını mutlaka kullanmıştır. CSS, açılımı “Cascading Style Sheets” veya “Basamaklı Stil Sayfaları” olan bir terimdir. CSS, web sayfalarının tasarımını, düzenini ayrıca farklı cihazlara uyumunu sağlamada kritik bir rol oynar. Başlangıçta HTML, sayfa biçimlendirmesi amacı ile tasarlanmadığı için web geliştiricileri için karmaşık sorunlara neden olmuştur. Ancak CSS bu sorunu çözerek stil tanımlamalarını HTML sayfalarından ayırarak web geliştiricilerine büyük kolaylık sağlamıştır. Stil tanımlamaları genellikle harici .css dosyalarında saklandığından, sadece bir dosyayı değiştirerek tüm web sitesinin görünümünü güncellemek mümkün hale gelmiştir.
CSS Söz Dizimi(Syntax)
CSS’de bir seçici (Selector), stil vermek istediğiniz HTML öğesini işaret eder. Bir deklarasyon bloğu, bir veya daha fazla deklarasyon içerebilir ve bu deklarasyonlar noktalı virgülle ayrılabilir. Her deklarasyon, bir CSS özellik adı ayrıca bir değer içerir, bu iki bilgi iki nokta üst üste ile ayrılır. Birden fazla CSS deklarasyonu noktalı virgüllerle ayrılır ve deklarasyon blokları süslü parantezlerle çevrelenir.
CSS Seçiciler(Selectors)
CSS Seçiciler, HTML öğelerini seçerek veya stil vererek tasarımınızı geliştirmenize yardımcı olur.
- Basit Seçiciler (Simple Selectors): Element adına, id’sine veya sınıfına göre elementleri seçme.
- Kombinatör Seçiciler (Combinator Selectors): Elementler arasındaki belirli ilişkilere dayalı olarak elementleri seçme.
- Sözde-sınıf Seçiciler (Pseudo-class Selectors): Elementlerin belirli durumlarına dayalı olarak elementleri seçme.
- Sözde-element Seçiciler (Pseudo-element Selectors): Elementlerin belirli bir bölümünü seçme veya stil verme.
- Öznitelik Seçiciler (Attribute Selectors): Elementleri bir özniteliğe veya öznitelik değerine göre seçme.
Bu kategorilerin bazı örneklerini inceleyerek, CSS Seçicilerin temel kavramlarını anlamaya çalışacağız.
Basit Seçiciler (Simple Selectors)
Element Seçici (Element Selector): Element seçici, elementin adına göre elementleri seçer. Örnek:
p {
text-align: center;
color: red;
}Bu kod, sayfadaki tüm <p> elementlerini merkeze hizalar ve metin rengini kırmızı yapar.
ID Seçici (ID Selector): ID seçici bir elementin ID özniteliğini kullanarak belirli bir elementi seçer. ID’ler benzersizdir ve yalnızca bir elementi seçmek için kullanırız.
#para1 {
text-align: center;
color: red;
}Sınıf Seçici (Class Selector): Sınıf seçici, belirli bir sınıf özniteliğine sahip elementleri seçer.
.center {
text-align: center;
color: red;
}Yalnızca belirli elementleri seçmek için element adı ile sınıf seçicisini bir araya getirebilirsiniz.
p.center {
text-align: center;
color: red;
}Genel Seçici (Universal Selector): Genel seçici, sayfadaki tüm HTML elementlerini seçer.
* {
text-align: center;
color: blue;
}Grup Seçici (Grouping Selector): Aynı stil tanımlarına sahip elementleri seçmek için grup seçicileri kullanırız.
h1, h2, p {
text-align: center;
color: red;
}CSS Nasıl Eklenir?
Tarayıcılar stil sayfalarını okuyarak, HTML belgelerini stil sayfasındaki bilgilere göre biçimlendirirler. Bunun yanında Web sayfalarına CSS eklemenin üç farklı yolu vardır: Harici CSS (External CSS), İçsel CSS (Internal CSS) ve İç İçe CSS (Inline CSS). Bu yöntemlerin her birini kullanarak sayfanın görünümünü özelleştirebilirsiniz.
Harici CSS (External CSS)
Harici CSS, tüm web sitesinin görünümünü tek bir dosya değiştirerek kolayca değiştirmenize olanak tanır. Bu yöntemi web sayfalarınız arasında tutarlılık sağlamak için çok yaygın olarak kullanırız. İşte harici CSS kullanmanın temel adımları:
- Harici CSS dosyasını oluşturun ve “.css” uzantısı ile kaydedin. Ek olarak bu dosya HTML etiketleri içermemelidir, yalnızca CSS kurallarını içermelidir.
- HTML belgenizin
<head>bölümünde, CSS dosyasına bir referans eklemek için<link>etiketini kullanın.
Giriş
Web geliştirme dünyasında aktif olan herkes, HTML ve CSS gibi temel yapı taşlarını mutlaka kullanmıştır. CSS, açılımı “Cascading Style Sheets” veya “Basamaklı Stil Sayfaları” olan bir terimdir. CSS, web sayfalarının tasarımını, düzenini ayrıca farklı cihazlara uyumunu sağlamada kritik bir rol oynar. Başlangıçta HTML, sayfa biçimlendirmesi amacı ile tasarlanmadığı için web geliştiricileri için karmaşık sorunlara neden olmuştur. Ancak CSS bu sorunu çözerek stil tanımlamalarını HTML sayfalarından ayırarak web geliştiricilerine büyük kolaylık sağlamıştır. Stil tanımlamaları genellikle harici .css dosyalarında saklandığından, sadece bir dosyayı değiştirerek tüm web sitesinin görünümünü güncellemek mümkün hale gelmiştir.
CSS Söz Dizimi(Syntax)
CSS’de bir seçici (Selector), stil vermek istediğiniz HTML öğesini işaret eder. Bir deklarasyon bloğu, bir veya daha fazla deklarasyon içerebilir ve bu deklarasyonlar noktalı virgülle ayrılabilir. Her deklarasyon, bir CSS özellik adı ayrıca bir değer içerir, bu iki bilgi iki nokta üst üste ile ayrılır. Birden fazla CSS deklarasyonu noktalı virgüllerle ayrılır ve deklarasyon blokları süslü parantezlerle çevrelenir.
CSS Seçiciler(Selectors)
CSS Seçiciler, HTML öğelerini seçerek veya stil vererek tasarımınızı geliştirmenize yardımcı olur.
- Basit Seçiciler (Simple Selectors): Element adına, id’sine veya sınıfına göre elementleri seçme.
- Kombinatör Seçiciler (Combinator Selectors): Elementler arasındaki belirli ilişkilere dayalı olarak elementleri seçme.
- Sözde-sınıf Seçiciler (Pseudo-class Selectors): Elementlerin belirli durumlarına dayalı olarak elementleri seçme.
- Sözde-element Seçiciler (Pseudo-element Selectors): Elementlerin belirli bir bölümünü seçme veya stil verme.
- Öznitelik Seçiciler (Attribute Selectors): Elementleri bir özniteliğe veya öznitelik değerine göre seçme.
Bu kategorilerin bazı örneklerini inceleyerek, CSS Seçicilerin temel kavramlarını anlamaya çalışacağız.
Basit Seçiciler (Simple Selectors)
Element Seçici (Element Selector): Element seçici, elementin adına göre elementleri seçer. Örnek:
p {
text-align: center;
color: red;
}Bu kod, sayfadaki tüm <p> elementlerini merkeze hizalar ve metin rengini kırmızı yapar.
ID Seçici (ID Selector): ID seçici bir elementin ID özniteliğini kullanarak belirli bir elementi seçer. ID’ler benzersizdir ve yalnızca bir elementi seçmek için kullanırız.
#para1 {
text-align: center;
color: red;
}Sınıf Seçici (Class Selector): Sınıf seçici, belirli bir sınıf özniteliğine sahip elementleri seçer.
.center {
text-align: center;
color: red;
}Yalnızca belirli elementleri seçmek için element adı ile sınıf seçicisini bir araya getirebilirsiniz.
p.center {
text-align: center;
color: red;
}Genel Seçici (Universal Selector): Genel seçici, sayfadaki tüm HTML elementlerini seçer.
* {
text-align: center;
color: blue;
}Grup Seçici (Grouping Selector): Aynı stil tanımlarına sahip elementleri seçmek için grup seçicileri kullanırız.
h1, h2, p {
text-align: center;
color: red;
}CSS Nasıl Eklenir?
Tarayıcılar stil sayfalarını okuyarak, HTML belgelerini stil sayfasındaki bilgilere göre biçimlendirirler. Bunun yanında Web sayfalarına CSS eklemenin üç farklı yolu vardır: Harici CSS (External CSS), İçsel CSS (Internal CSS) ve İç İçe CSS (Inline CSS). Bu yöntemlerin her birini kullanarak sayfanın görünümünü özelleştirebilirsiniz.
Harici CSS (External CSS)
Harici CSS, tüm web sitesinin görünümünü tek bir dosya değiştirerek kolayca değiştirmenize olanak tanır. Bu yöntemi web sayfalarınız arasında tutarlılık sağlamak için çok yaygın olarak kullanırız. İşte harici CSS kullanmanın temel adımları:
- Harici CSS dosyasını oluşturun ve “.css” uzantısı ile kaydedin. Ek olarak bu dosya HTML etiketleri içermemelidir, yalnızca CSS kurallarını içermelidir.
- HTML belgenizin
<head>bölümünde, CSS dosyasına bir referans eklemek için<link>etiketini kullanın.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<!-- Web sayfanızın içeriği -->
</body>
</html>İçsel CSS (Internal CSS)
İçsel CSS, tek bir HTML sayfasının özgün bir stil gerektirdiği durumlar için kullanışlıdır. Bu yöntem, CSS kurallarınızı HTML sayfanızın <style> etiketi içine eklemenizi gerektirir.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<!-- Web sayfanızın içeriği -->
</body>
</html>
İç İçe CSS (Inline CSS)
İç içe CSS, yalnızca belirli bir öğenin stilini değiştirmeniz gerektiği durumlar için kullanışlıdır. Bu yöntem, stil bilgilerini HTML öğelerinin style özniteliği içine eklemenizi sağlar.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: blue; text-align: center;">Bu bir başlık</h1>
<p style="color: red;">Bu bir paragraf.</p>
</body>
</html>Birden Fazla Stil Sayfası
Eğer aynı eleman için farklı stil tanımları birden fazla stil sayfasında bulunursa, en son okunan stil sayfasının kuralları uygulanır. Örneğin, harici stil sayfanızda <h1> için mavi bir metin rengi tanımlanmışsa veya içsel stil sayfanızda aynı seçici için turuncu bir metin rengi tanımlanmışsa, içsel stil sayfanızın kuralları en son okunduğu için metin rengi turuncu olacaktır. İçsel stil sayfanın harici stil sayfadan önce okunup okunmadığını kontrol etmek için stil sayfalarının <head> bölümünde sıralamasına dikkat etmelisiniz.
CSS Yorum Ekleme(Comments)
CSS yorumları tarayıcıda görüntülenemez. Ancak kodun daha iyi belgelendirilmesini sağlar, bakım ve geliştirme süreçlerini kolaylaştırır ve diğer geliştiricilerle işbirliği yapılırken iletişimi iyileştirmeye olanak tanır. Ayrıca belirli kuralları veya kod bloklarını geçici olarak devre dışı bırakmak veya test etmek için de kullanabiliriz.
/* Bu bir CSS yorum örneğidir.
Bu yorumlar kodun anlaşılmasını kolaylaştırır
ve açıklamaları içerir. */
h1 {
font-size: 24px;
color: #333; /* Metin rengi */
}CSS Renkler(Colors)
CSS’de renkler, önceden tanımlanmış renk adları veya RGB, HEX, HSL, RGBA ve HSLA değerleri kullanılarak ifade edilir.
<h1 style="background-color:rgb(63, 51, 175);">...</h1>
<h1 style="background-color:#3f33af;">...</h1>
<h1 style="background-color:hsl(246, 55%, 44%);">...</h1>
<h1 style="background-color:rgba(63, 51, 175, 0.5)">...</h1>
<h1 style="background-color:hsla(246, 55%, 44%, 0.5);">...</h1>Beklenen görüntü;
CSS Arka Planları(Backgrounds)
CSS arka plan özellikleri, web sayfalarındaki öğelerin arka plan rengini, görsel desenleri, resimleri veya animasyonlarını özelleştirmek için kullanabiliriz. Bu sayede web tasarımcıları, sitelerini daha çekici ve etkileyici hale getirebilirler. Ek olarak renk gradyanlar ve görsel efektler aracılığıyla arka planlara kolayca görsel çekicilik ekleyebilirsiniz.
CSS Arka planları özellikleri:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(shorthand property)
CSS background-color:
Bu özellik sayesinde bir öğenin arka plan rengini belirtebiliriz.
div {
background-color: #3f33af;
color: #fff;
}
Opacity / Transparency
Bir öğenin arka planına şeffaflık eklemek için opacity özelliği kullanıldığında, öğenin tüm alt öğeleri de şeffaf hale gelir. Sonuç olarak bu durum tamamen şeffaf bir öğenin içindeki metnin okunmasını zorlaştırır:
div {
background-color: #3f33af;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
opacity özelliği kullanıldığında veya bir öğenin arka planı şeffaflaştığında, bu şeffaflık alt öğeleri de etkiler. Sonuç olarak bu durum eleman içindeki metni okunaksız hale getirebilir.
RGBA kullanarak Transparency
Alt öğelerin opaklık etkisi olmadan yalnızca arka planın şeffaflığını ayarlamak için RGBA renk değerlerini kullanabilirsiniz. Aşağıdaki örnek, metnin okunabilirliğini korurken arka planın opaklığını değiştirmenizi sağlar:
div {
background: rgb(63, 51, 175);
}
div.first {
background: rgba(63, 51, 175, 0.1);
}
div.second {
background: rgba(63, 51, 175, 0.3);
}
div.third {
background: rgba(63, 51, 175, 0.6);
}
CSS background-image
“background-image” özelliği, bir HTML öğesinin arka planına eklemek istediğiniz bir görseli belirtir. Özellikle, bu görsel varsayılan olarak, öğeyi tamamen kaplayacak şekilde yinelenir, yani birden fazla kopyası arka planı doldurur. Bu sayede öğenin arka planını istediğimiz resimle süsleyebiliriz.
body {
background-image: url('arkaplan-resmi.jpg');
}CSS background-repeat
CSS’de, arka plan görselinin tekrarlanma davranışını belirlemek amacıyla “background-repeat” özelliği kullanılır. Bu özellik, bir arka plan görselinin yatayda veya dikeyde nasıl tekrarlanacağını kontrol etmenizi sağlar. İşte kullanımı ve örnek bir kod:
body {
background-image: url('arkaplan-resmi.jpg');
background-repeat: repeat-x; /* Sadece yatayda tekrarla */
}Yukarıdaki örnek, arka plan görselinin sadece yatayda tekrarlanacağını belirtiyor. “background-repeat” özelliğinin diğer değerleri “repeat-y” (sadece dikeyde tekrarla), “no-repeat” (tekrarlama yok) ve “repeat” (hem yatayda hem dikeyde tekrarla) gibi seçenekleri içerir.
CSS Background Attachment
CSS’de “background-attachment” özelliği, arka plan görselinin sayfa içeriği ile nasıl etkileşimde bulunacağını belirlemek amacıyla kullanılmakta. bununla birlikte özelliğin iki temel değeri vardır: “scroll” ve “fixed”. İşte kullanımı ve örnek bir kod:
body {
background-image: url('arkaplan-resmi.jpg');
background-attachment: fixed; /* Arka plan görseli sabit */
}Yukarıdaki örnek, arka plan görselinin sabit kalacağını, yani sayfa kaydırıldığında bile pozisyonunun değişmeyeceğini belirtiyor. “background-attachment” özelliğinin “scroll” değeri ise arka planın sayfa ile kaydırıldığını ifade eder.
CSS background – Shorthand property
CSS’de arka plan özelliklerini tek bir kısa kodla tanımlamak için “background” özelliği kullanılır. Bu özellik, arka plan rengi, görseli, tekrarlama davranışı ve eklemeyi tek bir satırda toplar. İşte kullanımı ve örnek bir kod:
body {
background: #f1f1f1 url('arkaplan-resmi.jpg') repeat-x fixed;
}Yukarıdaki örnek, arka plan rengini gri yapar, bir arka plan görseli ekler, yatayda tekrarlanmasını belirtir ve görselin sabit olmasını sağlar. “background” özelliği sayesinde arka planı hızlı ve etkili bir şekilde tanımlayabilirsiniz.
Sonuç
Bu makale web tasarım dünyasına giriş yapmak isteyen herkes için temel bir adımdır. CSS-1 serisinin başlangıcı olarak, web tasarımının anahtarı olan CSS hakkında temel bilgileri örnekler ile size sundum. CSS, bir web sitesinin görünümünü ve düzenini kontrol etmek için kullanılan kritik bir araçtır. Bu makalede öğrendiğiniz temel bilgiler, CSS ile web sitelerinizi daha çekici aynı zamanda daha profesyonel hale getirmenize yardımcı olacak.
Daha fazla bilgi edinmek ve pratiğe dökmek isterseniz, Mozilla Developer Network (MDN) ve W3Schools gibi kaynaklar size rehberlik edebilir. Bu kaynaklar, CSS’yi daha derinlemesine anlamanızı sağlayacak kaynaklardır. CSS becerilerinizi geliştirerek, web tasarım projelerinizde daha fazla özgürlük ve yaratıcılık kazanabilirsiniz.
Unutmayın, her başlangıç bir adım gerektirir ve bu makale ile CSS dünyasına ilk adımı atmış oldunuz. Şimdi, bu temel bilgileri pekiştirerek ve uygulayarak daha ileri seviyelere ulaşmak için hazırsınız. Yeni beceriler edinmek ve web tasarımını daha derinlemesine öğrenmek için bu yolculuğa devam edin. İyi şanslar ve görüşmek üzere!
HacktorX
HacktorX YazarıSilinmiş kullanıcıların yazıları bu kullanıcı hesabı ile yayına devam etmektedir.
Web Tasarımının Stil Mucidi: CSS-1
