Web Geliştirme Css Kural Seti Nedir?

Nizam-ı Alem · 16 Kas 2025

CSS Kuralları Kümesi

CSS kuralları kümesi, stillerin bir web sayfasındaki HTML öğelerine nasıl uygulanacağının temelini oluşturur.

Bir kural kümesi iki ana bölümden oluşur:

Seçici (Selector): Stillerin uygulanacağı HTML öğelerini hedefler.
Bildirimler (Declarations): Seçilen öğelerin nasıl biçimlendirileceğini tanımlayan özellik-değer çiftleridir.

Bildirimler her zaman süslü parantez {} içine alınır.

Kod:

<html>

<head>
<!--Driver Code Ends-->
    <style>
        /* This is a CSS ruleset */
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
<!--Driver Code Starts-->
</head>

<body>
    <p>This is a paragraph with blue text and a font size of 16px.</p>
</body>

</html>
<!--Driver Code Ends-->

Örnek Kural İncelemesi

Örnekte, seçici p'dir ve HTML'deki tüm <p> (paragraf) öğelerini hedefler.

Bildirimler, <p> öğesinin nasıl görünmesi gerektiğini tanımlar:

color özelliği, metin rengini maviye ayarlar.
font-size özelliği, metin boyutunu 16 piksele ayarlar.

Seçici Türleri

CSS'deki seçiciler, biçimlendirmek istediğiniz HTML öğelerini hedeflemek için kullanılır ve kural kümesinin ilk parçasını oluştururlar.

Tür Seçici: Öğeleri etiket adlarına göre hedefler (ör. div, p).
Sınıf Seçici: Öğeleri sınıflarına göre hedefler (ör. .myClass).
Kimlik Seçici: Bir öğeyi kimliğine göre hedefler (ör. #myId).
Evrensel Seçici: Tüm öğeleri hedefler (ör. *).
Öznitelik Seçici: #myIdri özniteliklerine göre hedefler (ör. [type="text"]).

Seçiciler: Öğeleri Hedefleme

Seçiciler, stillerin hangi HTML öğelerine uygulanacağını belirler. Kural kümesinin hangi öğeye uygulanacağı konusunda çok önemli bir rol oynarlar.

İşte bazı yaygın türler:

1. Evrensel Seçici

Evrensel seçici (*), bir HTML belgesindeki tüm öğeleri hedefler.
Türüne bakılmaksızın sayfadaki her etikete (örneğin <body>, <p>, <div>, <span> vb.) stil uygulamak için kullanılır.

Kod:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        * {
            font-family: sans-serif;
            font-weight: 900;
        }
    </style>
<!--Driver Code Starts-->
</head>

<body>
    <p id="one">Hello GFG</p>
    <p id="two">Hello GEEKS </p>
</body>
</html>

Metninizdeki kavram karmaşasını ve hatalı ifadeleri düzelterek yeniden düzenledim:

Evrensel seçici (*) kullanıldığında, font-family ve font-size gibi özellikler, belirli bir ID veya sınıfa sahip olup olmadıklarına bakılmaksızın sayfadaki tüm öğelere (sadece paragraf etiketlerine değil) uygulanır.

2. Tür Seçici

Belirli HTML etiketlerini (öğeleri) adlarına göre hedefler.

Örnek: p (tüm paragrafları), h1 (tüm 1. seviye başlıkları) veya div (tüm div kutularını) seçer.

Kod:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        h1 {
            font-size: 25px;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <h1>Welcome GEEKS</h1>
</body>

</html>

3. Sınıf Seçici (Class Selector)

Sınıf seçiciler, HTML'de belirli bir class (sınıf) niteliğine sahip öğeleri hedefler.

CSS'de sınıf seçiciler her zaman bir nokta (.) ile başlar. Bu, aynı sınıfa sahip birden fazla öğeye (örneğin .uyari sınıfına sahip tüm paragraflar ve kutular) aynı stili uygulamanıza olanak tanır.

Kod:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        .alert {
            height: 200px;
            width: 200px;
            background-color: blueviolet;
            color: white;
            font-size: 23px;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div class="alert">I am selected by my class name</div>
</body>
</html>

4. Kimlik Seçici (ID Selector)

Kimlik seçiciler, HTML'de belirli bir id (kimlik) niteliğine sahip tek bir öğeyi hedefler.

CSS'de kimlik seçiciler her zaman bir diyez (#) işareti ile başlar. Her id değeri bir sayfada benzersiz (unique) olmalıdır; bu nedenle bu seçici, yalnızca o spesifik öğeye stil vermek için kullanılır.

Kod:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        #GFG {
            height: 200px;
            width: 200px;
            background-color: blueviolet;
            color: white;
            font-size: 23px;
            text-align: center;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div id="GFG">I am selected by my id's name</div>
</body>
</html>

5. Gruplama Seçicisi (Grouping Selector)

Gruplama seçicisi, aynı stil kurallarını birden fazla farklı seçiciye (öğe, sınıf veya kimlik) aynı anda uygulamak için kullanılır.

Seçiciler virgül (,) ile ayrılarak gruplanır. Bu yöntem, CSS kodunu tekrar etmekten kaçınarak daha temiz ve kısa kod yazmayı sağlar.

Örnek:h1, h2 ve p öğelerinin hepsinin metin rengini mavi yapmak için gruplama kullanılır:

Kod:

<html>
<head>
<!--Driver Code Ends-->
    <style>
       h1,h2,h3{
        font-family: sans-serif;
        font-size: 25px;
        color: green;
       }
    </style>
<!--Driver Code Starts-->
</head>
<body>
   <h1>G</h1>
   <h2>F</h2>
   <h3>G</h3>
</body>

</html>

6. Alt Soy Seçici (Descendant Selector)

Alt soy seçici, belirli bir üst öğenin içinde yer alan tüm alt öğeleri (veya "torunları") hedeflemek için kullanılır.

Bu seçici, hedeflenen öğenin, üst öğenin doğrudan alt öğesi (child) mi yoksa daha derindeki dolaylı bir alt öğesi mi (descendant) olduğuna bakmaksızın, o üst öğenin içerisindeki tüm eşleşen öğeleri seçer.

CSS'de üst öğe ile alt öğe arasına bir boşluk konularak belirtilir.

Örnek: div p seçicisi, bir <div> etiketinin içinde yer alan tüm <p> etiketlerini hedefler (paragraflar div'in doğrudan içinde olmasa bile)

Kod:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        #one p {
            color: blueviolet;
        }
    </style>
<!--Driver Code Starts-->
</head>

<body>
    <div id="one">
        <p>paragraph-1</p>
        <p>paragraph-2</p>
        <p>paragraph-3</p>
        <div id="two">
            <p>paragraph-4</p>
        </div>
    </div>
</body>
</html>

7. Çocuk Seçici (Child Selector)

Çocuk seçici, bir üst (ebeveyn) öğenin yalnızca doğrudan alt öğelerini (çocuklarını) hedefler.

CSS'de, ebeveyn öğe ile çocuk öğe arasına büyüktür işareti (>) konularak belirtilir. Bu işarete "çocuk birleştirici" (child combinator) denir.

Alt soy seçiciden (boşluk) farklı olarak, bu seçici daha derindeki "torunları" veya iç içe geçmiş diğer öğeleri hedeflemez.

Örnek: div > p seçicisi, yalnızca bir <div> etiketinin doğrudan alt öğesi olan <p> etiketlerini seçer.

Kod:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        #one>p {
            color: blueviolet;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div id="one">
        <p>paragraph-1</p>
        <p>paragraph-2</p>
        <p>paragraph-3</p>
        <div id="two">
            <p>paragraph-4</p>
        </div>
    </div>
</body>
</html>

8. Sözde Sınıflar (Pseudo-classes)

Sözde sınıflar, bir öğenin belirli bir durumuna (state) veya özel bir konumuna göre stil uygulamak için kullanılır.

HTML'e ekstra bir sınıf (class) veya kimlik (id) eklemeden, öğenin o anki davranışına (örneğin üzerine fare gelmesi, tıklanması veya bir listenin ilk öğesi olması) göre stil vermenizi sağlar.

CSS'de iki nokta üst üste ) ile başlarlar.

Yaygın Örnekler:

:hover (Fare öğenin üzerine geldiğinde)
:focus (Öğe seçildiğinde, örn. bir form alanına tıklandığında)
:active (Öğeye tıklandığı anda)
:first-child (Bir ebeveynin ilk alt öğesi olduğunda)
:nth-child() (Belirli bir sıradaki alt öğeyi seçmek için)

Kod:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        #one {
            height: 200px;
            width: 200px;
            border: 2px solid black;
        }

        #one:hover {
            background-color: blueviolet;
        }
    </style>
<!--Driver Code Starts-->
</head>

<body>
    <div id="one">

    </div>
    </div>
</body>
</html>

Bildirimler: Stil Özellikleri

Bir bildirim, bir CSS özelliğini ve o özelliğin değerini belirtir. Bu ikisi birbirinden iki nokta üst üste ) ile ayrılır. Bir kural kümesindeki her bildirim noktalı virgül ( ile bitmelidir.

Bildirimler, seçicinin hedeflediği öğenin nasıl görüneceğini tanımlar ve süslü parantez {} içine yazılırlar.

1. Renk ve Arka Plan

color (metin rengi) ve background-color (arka plan rengi) en temel bildirim özelliklerindendir.

Örneğin, tüm web sayfasının varsayılan metin rengini ve arka plan rengini ayarlamak için body seçicisi kullanılabilir.

Kod:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        body {
            color: black;
            background-color: white;
            background-image: url('background.jpg');
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
</body>
</html>

2. Yazı Tipi ve Metin
H1 öğesini bir öğe seçici kullanarak biçimlendirmek için kullanılan bildirim bloğu.

Kod:

  <style>
        h1 {
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            text-transform: uppercase;
        }
    </style>

3. Kutu Modeli (Kenar Boşluğu, Dolgu, Kenarlık)
Kutu modeli, bir öğenin yapısını içerik, dolgu, kenarlık ve kenarlıktan oluşan dikdörtgen bir kutu olarak tanımlar.

Kod:

 <style>
        div {
            margin: 20px;
            padding: 10px;
            border: 1px solid black;
        }
    </style>

4. Öğelerin ekranın genişliği ve yüksekliği içindeki konumlandırılması
CSS konumlandırması, bir öğenin sayfaya nasıl yerleştirileceğini statik, bağıl, mutlak, sabit ve yapışkan gibi özellikler kullanarak kontrol eder.

[CODE title="html"]<link rel="stylesheet" href="styles.css">[/CODE]

[CODE lang="css" title="css"]/*styles.css*/
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 200vh;
/* To demonstrate scrolling for fixed and sticky positions */
}

.container {
position: relative;
height: 400px;
border: 2px solid black;
padding: 20px;
}

.box {
width: 100px;
height: 50px;
margin: 10px;
padding: 10px;
color: white;
text-align: center;
line-height: 50px;
}

.static {
position: static;
background-color: gray;
}

.relative {
position: relative;
background-color: blue;
top: 20px;
/* Moves relative to its original position */
left: 20px;
}

.absolute {
position: absolute;
background-color: red;
top: 50px;
/* Moves relative to the nearest positioned ancestor */
left: 50px;
}

.fixed {
position: fixed;
background-color: green;
top: 10px;
/* Always stays at the same position relative to the viewport */
right: 10px;
}

.sticky {
position: sticky;
background-color: orange;
top: 0;
/* Sticks to the top of its container while scrolling */
}[/CODE]

5. Flexbox
Flexbox, boyutları dinamik olsa bile, bir konteynerdeki öğeler arasında alanın verimli bir şekilde hizalanmasını ve dağıtılmasını sağlayan bir düzen modelidir.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: lightgray;
        }

        .box {
            width: 150px;
            height: 150px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div class="box">Centered Box</div>
</body>
</html>

6. Duyarlı Tasarım
Farklı ekran boyutlarına göre stilleri ayarlamak için medya sorgularını kullanma.

HTML:

<head>
    <style>
        body {
            font-size: 16px;
        }

        @media (max-width: 600px) {
            body {
                font-size: 14px;
            }
        }
    </style>
<!--Driver Code Starts-->
</head>

<body>
    <p>Resize the browser to see the font size change.</p>
</body>

</html>
<!--Driver Code Ends-->

7. Gelişmiş Seçiciler
CSS'deki gelişmiş seçiciler, sözde sınıflar (örneğin :nth-child()), sözde öğeler (örneğin ::before), öznitelik seçicileri ve > veya ~ gibi birleştiriciler gibi öğelerin daha hassas bir şekilde hedeflenmesine olanak tanır. Durumlara, ilişkilere ve öğe özniteliklerine dayalı dinamik ve bağlamsal stil oluşturmayı mümkün kılarak stil oluşturma yeteneklerini geliştirirler.

CSS:

 <style>
        /* Attribute selector */
        input[type="text"] {
            border: 1px solid gray;
            padding: 5px;
        }

        /* Pseudo-element */
        p::first-letter {
            font-size: 2em;
            color: red;
        }
    </style>

8. Sözde sınıflar
Sözde sınıf, seçili öğelerin özel bir durumunu tanımlayan bir seçiciye eklenen bir anahtar sözcüktür. Örneğin, kullanıcı bir öğenin üzerine geldiğinde veya bir bağlantı ziyaret edildiğinde stil uygulamak isteyebilirsiniz.

:hover-: Kullanıcı bir öğenin üzerine geldiğinde stil uygular. Fare imleci düğmenin üzerindeyken, arka planı kahverengiye ve metin rengi beyaza döner.

CSS:

<html>

<head>
<!--Driver Code Ends-->
    <style>
        button:hover {
            background-color: brown;
            color: white;
        }
    </style>
<!--Driver Code Starts-->
</head>

<body>
    <button>Click me</button>
</body>

</html>
/CODE]

:nth-child()-: Üst öğedeki konumlarına göre öğeleri hedefler. Liste öğelerinin arka plan rengini değiştirerek çizgili bir efekt oluşturur.

[CODE=css]<style>
        li:nth-child(odd) {
            background-color: #f0f0f0;
            /* Light gray */
        }

        li:nth-child(even) {
            background-color: #ffffff;
            /* White */
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            padding: 10px;
        }
    </style>

:focus –: Bir öğeye (örneğin bir giriş alanına) odaklanıldığında stilleri uygular. Kullanıcı bir giriş alanına tıkladığında veya sekme yaptığında, kenarlık yeşil renge döner ve ana hatlar kaldırılır.

CSS:

 <style>
        input:focus {
            border: 2px solid green;
            outline: none;
        }

        input {
            border: 1px solid gray;
            padding: 5px;
            width: 200px;
        }
    </style>

:visited –:Kullanıcının daha önce tıkladığı bağlantılara stil verir. Kullanıcının daha önce ziyaret ettiği bağlantıların rengini mora çevirir.

CSS:

<style>
        a:visited {
            color: purple;
        }

        a {
            color: blue;
            text-decoration: none;
            font-size: 18px;
        }
    </style>

:not() –: Belirli bir seçiciyle eşleşen öğeleri hariç tutar. .special sınıfına sahip olanlar hariç tüm <p> öğelerine stil uygular.

CSS:

 <style>
        p:not(.special) {
            color: gray;
        }

        p.special {
            color: blue;
            font-weight: bold;
        }
    </style>

9. Sözde Öğeler
Sözde öğeler, bir öğenin ilk harfi veya ilk satırı gibi belirli bölümlerine stil vermenize ve hatta öğeden önce veya sonra içerik eklemenize olanak tanır.

(Not: Sözde öğeler için çift iki nokta üst üste :: önerilir, ancak bazı eski tarayıcılar tek iki nokta üst üsteyi de destekler

::before –: Öğeden önce içerik ekler. Her <h1> karakterinden önce kırmızı ok emojisi ekler.

CSS:

 <style>
        h1::before {
            content: " ";
            color: red;
        }
    </style>

::after –: Bir öğeden sonra içerik ekler. Her paragrafa " (Devamını oku)" ekler.

CSS:

 <style>
        p::after {
            content: " (Read more)";
            color: blue;
        }
    </style>

::first-letter – : Bir metin bloğunun ilk harfine stil verir.

CSS:

<style>
        p::first-letter {
            font-size: 100px;
            color: red;
        }

        p {
            color: green;
        }
    </style>

Bu kod paragrafın ilk harfini, yani bu durumda w harfini büyütür.

::first-line –: Bir metin bloğunun ilk satırına stil verir. İlk satırı kalın ve büyük harfle yazar.

CSS:

<style>
        p::first-line {
            font-size: 30px;
            font-family: sans-serif;
            font-weight: 900;
        }

        p {
            color: green;
        }
    </style>

:

laceholder –: Giriş alanlarındaki yer tutucu metnin stilini belirler. Giriş alanlarındaki yer tutucu metnin görünümünü değiştirir.

CSS:

<style>
        input::placeholder {
            color: gray;
            font-style: italic;
            font-size: 12px;
            font-weight: 900;
        }

        input {
            height: 50px;
            width: 200px;
        }
    </style>

10. Sözde Sınıfları ve Sözde Öğeleri Birleştirme
Gelişmiş stil için sözde sınıfları ve sözde öğeleri birlikte kullanabilirsiniz. Düğmenin üzerine gelindiğinde, içeriğin önünde bir alev simgesi belirir (örneğin, "Butonda bana tıkla").

CSS:

<style>
        button:hover::before {
            content: " ";
            font-size: 1.2rem;
        }
    </style>

Tolstoy · 16 Kas 2025

:

laceholder –: Yazım hataları ve birden fazla
RED.

Web Geliştirme Css Kural Seti Nedir?

Nizam-ı Alem

Asalet kana değil, duruşa bakar.

CSS Kuralları Kümesi

Örnek Kural İncelemesi

Seçici Türleri

Seçiciler: Öğeleri Hedefleme

1. Evrensel Seçici

2. Tür Seçici

3. Sınıf Seçici (Class Selector)

4. Kimlik Seçici (ID Selector)

5. Gruplama Seçicisi (Grouping Selector)

6. Alt Soy Seçici (Descendant Selector)

7. Çocuk Seçici (Child Selector)

8. Sözde Sınıflar (Pseudo-classes)

Bildirimler: Stil Özellikleri

1. Renk ve Arka Plan

Tolstoy

Co-Administrator

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

Web Geliştirme Css Kural Seti Nedir?

Nizam-ı Alem

Asalet kana değil, duruşa bakar.

CSS Kuralları Kümesi​

Örnek Kural İncelemesi​

Seçici Türleri​

Seçiciler: Öğeleri Hedefleme​

1. Evrensel Seçici​

2. Tür Seçici​

3. Sınıf Seçici (Class Selector)​

4. Kimlik Seçici (ID Selector)​

5. Gruplama Seçicisi (Grouping Selector)​

6. Alt Soy Seçici (Descendant Selector)​

7. Çocuk Seçici (Child Selector)​

8. Sözde Sınıflar (Pseudo-classes)​

Bildirimler: Stil Özellikleri​

1. Renk ve Arka Plan​

Tolstoy

Co-Administrator

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

CSS Kuralları Kümesi

Örnek Kural İncelemesi

Seçici Türleri

Seçiciler: Öğeleri Hedefleme

1. Evrensel Seçici

2. Tür Seçici

3. Sınıf Seçici (Class Selector)

4. Kimlik Seçici (ID Selector)

5. Gruplama Seçicisi (Grouping Selector)

6. Alt Soy Seçici (Descendant Selector)

7. Çocuk Seçici (Child Selector)

8. Sözde Sınıflar (Pseudo-classes)

Bildirimler: Stil Özellikleri

1. Renk ve Arka Plan