Yazılım Öğrenme: Kapsamlı Rehber 5

Yazılım Öğrenme Rehberi 5, CSS’in temellerini ve HTML ile birlikte nasıl kullanıldığını öğrenmeye odaklanır. Bu yazıda, CSS’in temel yapı taşlarını, nasıl kullanıldığını ve HTML ile birlikte nasıl stil verildiğini inceleyeceğiz. Yazılım öğrenme sürecinizde bu bilgileri anlamak, web sayfalarınızı daha çekici ve kullanıcı dostu hale getirmenize yardımcı olacaktır.

Giriş

Önceki yazılarda, temel bilgisayar bilgisi, veri yapıları, algoritmalar ve HTML hakkında kapsamlı bilgiler sunduk. Bu bilgiler, yazılım geliştirme sürecinde karşılaşacağınız birçok problemin çözümünde size yardımcı olacaktır. Şimdi, CSS’in temellerini öğrenerek web sayfalarınızı nasıl stil verebileceğinizi keşfedeceğiz. CSS, web sayfalarının görsel düzenini belirleyen ve HTML ile birlikte kullanılan bir stil dilidir.

CSS Nedir?

CSS (Cascading Style Sheets), HTML belgelerinin görünümünü ve düzenini tanımlamak için kullanılan bir stil dilidir. CSS, HTML etiketlerine stil ekleyerek sayfaların daha çekici ve kullanıcı dostu olmasını sağlar. CSS, stil kurallarını tanımlamak için seçiciler (selectors) ve bildirimler (declarations) kullanır.

CSS’in Temel Yapısı

Bir CSS kuralı, seçici (selector) ve bildirim bloğundan (declaration block) oluşur. İşte basit bir CSS kuralının yapısı:

/* CSS Kuralı */
selector {
    property: value;
}

selector: Stil uygulanacak HTML öğesini seçer.
property: Stil özelliğini belirtir (örn. color, font-size).
value: Stil özelliğinin değerini belirtir (örn. red, 16px).

CSS’in HTML’e Dahil Edilmesi

CSS, HTML belgesine üç farklı yolla dahil edilebilir:

İç stil (Inline style): HTML etiketine doğrudan stil eklemek için kullanılır.
Dahili stil (Internal style): HTML belgesinin <head> bölümünde <style> etiketi içinde stil tanımlamak için kullanılır.
Harici stil (External style): Ayrı bir CSS dosyasında stil tanımlamak ve HTML belgesine bağlamak için kullanılır.

İşte bu yöntemlerin örnekleri:

İç stil (Inline style)

<!DOCTYPE html>
<html>
<head>
    <title>Inline Style Örneği</title>
</head>
<body>
    <h1 style="color: blue;">Merhaba Dünya!</h1>
</body>
</html>

Dahili stil (Internal style)

<!DOCTYPE html>
<html>
<head>
    <title>Internal Style Örneği</title>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
</body>
</html>

Harici stil (External style)

style.css

h1 {
    color: blue;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>External Style Örneği</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Merhaba Dünya!</h1>
</body>
</html>

CSS Seçiciler

CSS seçiciler, hangi HTML öğelerine stil uygulanacağını belirler. İşte bazı temel CSS seçiciler:

Etiket seçici (Type selector): Belirli bir HTML etiketini seçer. Örneğin, h1 tüm <h1> etiketlerini seçer.
Sınıf seçici (Class selector): Belirli bir sınıfa sahip HTML öğelerini seçer. Sınıf adının önüne . eklenir. Örneğin, `.my

h1 {
    color: blue;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>External Style Örneği</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Merhaba Dünya!</h1>
</body>
</html>

CSS Seçiciler

CSS seçiciler, hangi HTML öğelerine stil uygulanacağını belirler. İşte bazı temel CSS seçiciler:

Etiket seçici (Type selector): Belirli bir HTML etiketini seçer. Örneğin, h1 tüm <h1> etiketlerini seçer.
Sınıf seçici (Class selector): Belirli bir sınıfa sahip HTML öğelerini seçer. Sınıf adının önüne . eklenir. Örneğin, .myClass sınıfına sahip öğeleri seçer.
Kimlik seçici (ID selector): Belirli bir kimliğe sahip HTML öğelerini seçer. Kimlik adının önüne # eklenir. Örneğin, #myId kimliğine sahip öğeleri seçer.
Evrensel seçici (Universal selector): Tüm HTML öğelerini seçer. Örneğin, * tüm öğeleri seçer.
Bağlantı seçici (Attribute selector): Belirli bir özniteliğe sahip HTML öğelerini seçer. Örneğin, [type="text"] type özniteliği text olan öğeleri seçer.

CSS Özellikleri

CSS, HTML öğelerinin görünümünü değiştirmek için birçok stil özelliği sunar. İşte bazı yaygın CSS özellikleri:

color: Metin rengini belirler.
background-color: Arka plan rengini belirler.
font-size: Metin boyutunu belirler.
margin: Öğenin dış boşluğunu belirler.
padding: Öğenin iç boşluğunu belirler.
border: Öğenin kenarlığını belirler.

/* Örnek CSS Stilleri */
h1 {
    color: blue;
    background-color: lightgray;
    font-size: 24px;
    margin: 20px;
    padding: 10px;
    border: 2px solid black;
}

HTML ve CSS İle Basit Bir Proje

HTML ve CSS kullanarak basit bir proje oluşturalım. Bu projede, bir başlık ve birkaç paragraf içeren basit bir web sayfası oluşturacağız.

style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
}

p {
    line-height: 1.6;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Basit Web Sayfası</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Merhaba Dünya!</h1>
        <p>Bu, HTML ve CSS kullanılarak oluşturulmuş basit bir web sayfasıdır.</p>
        <p>CSS, sayfanın stilini ve düzenini belirlerken, HTML sayfanın içeriğini yapılandırır.</p>
    </div>
</body>
</html>

Bu örnekte, HTML ve CSS kullanarak basit ve şık bir web sayfası oluşturduk. CSS, sayfanın stilini belirlerken, HTML sayfanın içeriğini yapılandırır.

Yazılım Geliştirme Sürecinde Dikkat Edilmesi Gerekenler

Yazılım geliştirme sürecinde dikkat etmeniz gereken bazı önemli noktalar şunlardır:

Sürekli İyileştirme ve Öğrenme

Yazılım dünyası sürekli değişen ve gelişen bir alandır. Yeni teknolojileri, araçları ve yöntemleri takip etmek için sürekli öğrenme alışkanlığı edinmek önemlidir. Bloglar, podcast’ler ve konferanslar bu konuda faydalı kaynaklar olabilir.

İşbirliği ve Katkı

Açık kaynak projelere katkıda bulunmak, topluluk içinde işbirliği yapmak ve ekip projelerinde yer almak, yazılım öğrenme sürecinizi hızlandırır ve geliştirici olarak büyümenizi sağlar.

Geri Bildirim ve Test

Kodunuzu düzenli olarak test etmek ve geri bildirim almak, yazılım geliştirme sürecinde önemli bir yer tutar. Birim testleri, entegrasyon testleri ve kullanıcı geri bildirimi, kodunuzun kalitesini artırmanıza yardımcı olur.

Sonuç

CSS, web sayfalarının görünümünü ve düzenini belirleyen temel bir stil dilidir. HTML ile birlikte kullanıldığında, web sayfalarınızı daha çekici ve kullanıcı dostu hale getirir. Bu rehberde, CSS’in temel yapı taşlarını ve HTML ile nasıl birlikte kullanıldığını öğrendik. Bir sonraki rehberde, HTML, CSS ve JavaScript’i birleştirerek basit bir uygulama oluşturacağız. Yazılım geliştirme dünyasında başarılı bir kariyer yapmak için bu bilgileri kullanarak yolculuğunuza başlayabilirsiniz. Yazının devamı için burayı inceleyebilirsiniz.

Yararlandığım Kaynaklar

CSS Standard
MDN Web Docs – CSS
W3Schools – CSS
Coursera
Udemy
edX
freeCodeCamp
“Clean Code” – Robert C. Martin
“The Pragmatic Programmer” – Andrew Hunt ve David Thomas
“You Don’t Know JS” – Kyle Simpson
Stack Overflow
GitHub
Reddit

Bu kaynaklardan yararlanarak yazılım öğrenme sürecinizi daha verimli ve etkili hale getirebilirsiniz. Yazılım geliştirme dünyasında başarılı bir kariyer yapmak için bu rehberi ve kaynakları kullanarak yolculuğunuza başlayabilirsiniz.

Yazılım Öğrenme: Kapsamlı Rehber 5

Giriş

CSS Nedir?

CSS’in Temel Yapısı

CSS’in HTML’e Dahil Edilmesi

CSS Seçiciler

CSS Seçiciler

CSS Özellikleri

HTML ve CSS İle Basit Bir Proje

Yazılım Geliştirme Sürecinde Dikkat Edilmesi Gerekenler

Sürekli İyileştirme ve Öğrenme

İşbirliği ve Katkı

Geri Bildirim ve Test

Sonuç

Yararlandığım Kaynaklar