Articles
CSS'e Giriş
CSS Temelleri

CSS Temelleri

Bu makale, CSS'in temellerini açıklar.

CSS seçicileri, kombinatorlar ve özgüllük hakkında bilgi edinebilirsiniz.

YouTube Video

Önizleme için HTML/CSS

css-base.css 
  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 600px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29    padding-left: 10px;
 30    border-left: 2px solid #ccc;
 31}
 32
 33h4 {
 34    margin: 0;
 35    margin-left: 10px;
 36    font-size: 14px;
 37}
 38
 39article section p {
 40    margin-left:  40px;
 41}
 42
 43p, pre {
 44    margin: 10px 0;
 45    padding: 0;
 46}
 47
 48ul, ol, dl, menu {
 49    margin: 0;
 50}
 51
 52pre {
 53    background-color: #f0f0f0;
 54    border-left: 4px solid #ccc;
 55    padding: 10px;
 56    overflow-x: auto;
 57}
 58
 59.sample-view {
 60    border: 1px solid #eee;
 61    border-left: 4px solid #eee;
 62    padding: 10px;
 63    overflow-x: auto;
 64}
 65
 66p.sample, .sample {
 67    background-color: #e7f4e9;
 68    padding: 10px;
 69    border-left: 4px solid #7bbd82;
 70    color: #333;
 71}
 72
 73p.sample-error, .sample-error {
 74    background-color: #f4e7e7;
 75    padding: 10px;
 76    border-left: 4px solid lightcoral;
 77    color: #333;
 78}
 79
 80.example {
 81    background-color: #e0f0ff;
 82    padding: 10px;
 83    border-left: 4px solid #4a90e2;
 84    color: #333;
 85}
 86
 87p.sample-warn, .sample-warn {
 88    background-color: #f4f1e7;
 89    padding: 10px;
 90    border-left: 4px solid #bda97b;
 91    color: #333;
 92}
 93
 94code {
 95    background-color: #f4f4f4;
 96    padding: 2px 4px;
 97    border-radius: 4px;
 98    font-family: monospace;
 99}
100
101span {
102    font-weight: bold;
103}
104
105article {
106    background-color: white;
107    padding: 20px;
108    margin-bottom: 10px;
109    border-radius: 8px;
110    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114    margin-bottom: 20px;
115}
116
117section div {
118    width: 400px;
119    height: 50px;
120    margin: 20px auto;
121    color: white;
122    display: flex;
123    align-items: center;
124    justify-content: center;
125    font-size: 1.2rem;
126    background-color: lightgray;
127    border: 1px solid #ccc;
128}
129
130header h4 {
131    text-align: right;
132    color: #666;
133    font-size: 0.8em;
134    text-decoration: none;
135}
136
137header + pre {
138    margin: 0;
139    margin-top: -20px;
140    padding-top: 14px;
141    font-size: 0.9em;
142}
143
144header + .sample-view {
145    margin: 0;
146    margin-top: -16px;
147}
148
149.sample-view p {
150    margin: 0;
151    padding: 0;
152}
css-basics.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Basics</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-basics.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Basics</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Selectors</h2></header>
 19        <article>
 20            <h3>Universal Selector : *</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24* {
 25    font-family:'Courier New', Courier, monospace;
 26}
 27</pre>
 28            </section>
 29        </article>
 30        <article>
 31            <h3>Element Selector</h3>
 32            <section>
 33                <header><h4>CSS</h4></header>
 34<pre class="sample">
 35strong {
 36    color: red;
 37}
 38</pre>
 39                <header><h4>HTML</h4></header>
 40                <pre>This is &lt;strong&gt;sample&lt;/strong&gt; text.</pre>
 41                <header><h4>HTML+CSS</h4></header>
 42                <section class="sample-view">
 43                    This is <strong>sample</strong> text.
 44                </section>
 45            </section>
 46        </article>
 47        <article>
 48            <h3>ID Selector : #</h3>
 49            <section>
 50                <header><h4>CSS</h4></header>
 51<pre class="sample">
 52#example1 {
 53    color: steelblue;
 54}
 55</pre>
 56                <header><h4>HTML</h4></header>
 57                <pre>&lt;span id="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 58                <header><h4>HTML+CSS</h4></header>
 59                <section class="sample-view">
 60                    <span id="example1">This is sample text.</span>
 61                </section>
 62            </section>
 63        </article>
 64        <article>
 65            <h3>Class Selector : .</h3>
 66            <section>
 67                <header><h4>CSS</h4></header>
 68<pre class="sample">
 69.example1 {
 70    background-color: yellow;
 71    font-weight: bold;
 72}
 73</pre>
 74                <header><h4>HTML</h4></header>
 75                <pre>&lt;span class="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 76                <header><h4>HTML+CSS</h4></header>
 77                <section class="sample-view">
 78                <section>
 79                    <span class="example1">This is sample text.</span>
 80                </section>
 81            </section>
 82        </article>
 83        <article>
 84            <h3>Attribute Selector : [property=value]</h3>
 85            <section>
 86                <header><h4>CSS</h4></header>
 87<pre class="sample">
 88a[href="index.html"] {
 89    font-weight: bold;
 90}
 91</pre>
 92                <header><h4>HTML</h4></header>
 93<pre>
 94&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;br&gt;
 95&lt;a href="about.html"&gt;About&lt;/a&gt;
 96</pre>
 97                <header><h4>HTML+CSS</h4></header>
 98                <section class="sample-view">
 99                    <a href="index.html">Home</a><br>
100                    <a href="about.html">About</a>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>Descendant Combinator</h3>
106            <section>
107                <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110    text-decoration: underline;
111}
112</pre>
113                <header><h4>HTML</h4></header>
114                <pre>&lt;span&gt;This is &lt;strong&gt;sample&lt;/strong&gt; text.&lt;/span&gt;</pre>
115                <header><h4>HTML+CSS</h4></header>
116                <section class="sample-view">
117                    <span>This is <strong>sample</strong> text.</span>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>Child Combinator : &gt;</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127    color: blue;
128}
129</pre>
130                <header><h4>HTML</h4></header>
131<pre>
132This is &lt;em&gt;sample&lt;/em&gt; text.&lt;br&gt;
133&lt;span&gt;This is &lt;em&gt;another&lt;/em&gt; text.&lt;/span&gt;&lt;br&gt;
134&lt;span&gt;This text is not &lt;s&gt;&lt;em&gt;blue&lt;/em&gt;&lt;/s&gt; in color.&lt;/span&gt;
135</pre>
136                <header><h4>HTML+CSS</h4></header>
137                <section class="sample-view">
138                    This is <em>sample</em> text.<br>
139                    <span>This is <em>another</em> text.</span><br>
140                    <span>This text is not <s><em>blue</em></s> in color.</span>
141                </section>
142            </section>
143        </article>
144        <article>
145            <h3> Next Sibling combinator : +</h3>
146            <section>
147                <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150    color: green;
151}
152</pre>
153                <header><h4>HTML</h4></header>
154<pre>
155&lt;span&gt;
156    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
157    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
158    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
159&lt;/span&gt;
160</pre>
161                <header><h4>HTML+CSS</h4></header>
162                <section class="sample-view">
163                    <span>
164                        This is <b>first text</b>.<br>
165                        This is <b>second text</b>.<br>
166                        <i>This</i> is <b>third text</b>.<br>
167                    </span>
168                </section>
169            </section>
170        </article>
171                <article>
172            <h3>Subsequent Sibling Combinator : ~</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177    color: steelblue;
178}
179</pre>
180                <header><h4>HTML</h4></header>
181<pre>
182&lt;span&gt;
183    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
184    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
185    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
186&lt;/span&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <span>
191                        This is <b>first text</b>.<br>
192                        This is <b>second text</b>.<br>
193                        <i>This</i> is <b>third text</b>.<br>
194                    </span>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>Pseudo Class ":" </h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204    background-color: lightskyblue;
205}
206</pre>
207                <header><h4>HTML</h4></header>
208<pre>
209    &lt;a href="#"&gt;Click here&lt;/a&gt;&lt;br&gt;
210</pre>
211                <header><h4>HTML+CSS</h4></header>
212                <section class="sample-view">
213                    <a href="#">Click here</a><br>
214                </section>
215            </section>
216        </article>
217        <article>
218            <h3>Pseudo Element "::" </h3>
219            <section>
220                <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223    content: " ** ";
224    color: red;
225    font-weight: bold;
226}
227</pre>
228                <header><h4>HTML</h4></header>
229<pre>
230    &lt;u&gt;Sample Text&lt;/u&gt;
231</pre>
232                <header><h4>HTML+CSS</h4></header>
233                <section class="sample-view">
234                    <u>Sample Text</u>
235                </section>
236            </section>
237        </article>
238    </main>
239
240    <main>
241        <header><h2>Inheritance &amp; Priority of CSS</h2></header>
242        <article>
243            <h3>CSS Specificity Rule</h3>
244            <section>
245                <header><h4>CSS Specificity</h4></header>
246                <section class="example">
247                <ol>
248                    <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249                    <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251                    <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252                    <li><b>Universal Selector</b>: <code>*</code></li>
253                </ol>
254                </section>
255
256                <header><h4>How Specificity is Calculated</h4></header>
257                <section class="example">
258                <ol>
259                    <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260                    <li><b>ID Selectors</b>: Worth 100 points each.</li>
261                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262                    <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263                </ol>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>Example of CSS Specificity Rule</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274    color: blue;
275}
276
277/* Class Selector */
278.header {
279    color: red;
280}
281
282/* Element Selector */
283h1 {
284    color: green;
285}
286</pre>
287            <header><h4>HTML</h4></header>
288            <pre>&lt;h1 id="header" class="header"&gt;Example of CSS Specificity Rule&lt;/h1&gt;</pre>
289            <header><h4>HTML+CSS</h4></header>
290            <section class="sample-view">
291                <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292            </section>
293        </section>
294    </article>
295    <article>
296        <h3>Using <code>!important</code> in CSS</h3>
297        <section>
298            <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301    color: blue;
302}
303
304.important-header {
305    color: red !important;
306}
307</pre>
308            <header><h4>HTML</h4></header>
309            <pre>&lt;h1 id="important-header" class="important-header"&gt;Example of &lt;code&gt;!important&lt;/code&gt;&lt;/h1&gt;</pre>
310            <header><h4>HTML+CSS</h4></header>
311            <section class="sample-view">
312                <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313            </section>
314        </section>
315    </article>
316    <article>
317        <h3>CSS Inheritance</h3>
318        <section>
319            <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322    color: gray;
323}
324
325p {
326    color: black;
327}
328</pre>
329            <header><h4>HTML</h4></header>
330<pre>
331&lt;footer&gt;
332    &lt;p&gt;This paragraph's text will be black.&lt;/p&gt;
333    &lt;span&gt;This text will be gray.&lt;/span&gt;
334&lt;/footer&gt;
335</pre>
336            <header><h4>HTML+CSS</h4></header>
337            <section class="sample-view">
338                <footer>
339                    <p>This paragraph's text will be black.</p>
340                    <span>This text will be gray.</span>
341                </footer>
342            </section>
343        </section>
344    </article>
345    <article>
346        <h3>Cascading Styles</h3>
347        <section>
348            <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351    color: red;
352}
353
354.text {
355    color: blue;
356}
357</pre>
358            <header><h4>HTML</h4></header>
359            <pre>&lt;p class="text"&gt;This text will be blue.&lt;/p&gt;</pre>
360            <header><h4>HTML+CSS</h4></header>
361            <section class="sample-view">
362                <p class="text">This text will be blue.</p>
363            </section>
364        </section>
365    </article>
366
367</body>
368</html>

Temel Sözdizimi 

1selector {
2    property: value;
3}

CSS'in temel yapısı seçici, özellik ve değerden oluşur. Her özellik ve değer çifti bir noktalı virgül ile takip edilir.

  • seçici, stilin hangi HTML öğesine uygulanacağını belirtir. Bu örnekte, stiller tüm <header> öğelerine uygulanır.
  • özellik, renk veya yazı tipi boyutu gibi değiştirilecek stil özelliğini belirtir. Bu örnekte Padding ve color özelliklerdir.
  • değer, özelliğe atanan değerdir. Örneğin, color (renk) için white veya #9cf, margin size (kenar boşluğu boyutu) için ise 20px olabilir.

Seçiciler

CSS seçicileri, HTML öğelerini seçmek için kullanılan desenlerdir. Seçicileri kullanarak belirli öğelere veya öğe gruplarına stiller uygulayabilirsiniz.

Evrensel Seçici 

1/* Universal Selector : "*" */
2* {
3    font-family:'Courier New', Courier, monospace;
4}
  • *, tüm öğelere uygulanan bir evrensel seçicidir.
  • Bu örnekte, tüm öğelerin yazı tipi değiştiriliyor.

Öğe Seçici 

1/* Element Selector */
2strong {
3    color: red;
4}
  • Bir öğe seçici, HTML etiket adını yazarak belirli HTML etiketlerine uygulanan bir seçicidir.
  • Bu örnekte, <strong> öğesinin metin rengi kırmızıya değiştiriliyor.

Kimlik (ID) Seçici 

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}
  • #, öğeleri kimliğe (ID) göre seçmek için kullanılan bir kimlik seçicidir.
  • Kimlikler (ID) benzersizdir, bu nedenle bir sayfada aynı kimliğe sahip yalnızca bir öğe bulunabilir.

Sınıf (Class) Seçici 

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}
  • ., öğeleri bir sınıfa göre seçmek için kullanılan bir sınıf seçicidir.
  • Bir sınıfa ait öğelere stil uygulamak için HTML öğelerine bir sınıf özelliği ekleyin.

Özellik (Attribute) Seçici 

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}
  • [href="index.html"], belirli bir özelliğe sahip öğeleri seçen bir özellik seçicisidir.
  • Bu örnekte, href özelliği değeri index.html olan <a> öğesinin metni kalın olarak ayarlanıyor.

Birleştirici

Birleştiriciler, belirli ilişkileri olan öğeleri seçmek için birden fazla seçiciyi birleştirmek amacıyla kullanılır. Bir seçici öğeleri tek tek seçerken, bir birleştirici öğeler arasındaki yapısal ilişkileri tanımlama görevini üstlenir.

Alt öğe (Descendant) Birleştirici 

1/* Descendant Combinator : " " */
2span strong {
3    text-decoration: underline;
4}
  • Bir alt öğe birleştirici, belirli bir öğe içinde belirtilen tüm öğelere stil uygular.
  • Bu örnekte, <span> öğesi içindeki <strong> öğelerine altı çizili bir stil uygulanıyor.

Doğrudan çocuk öğe (Child) Birleştirici 

1/* Child Combinator : ">" */
2span > em {
3    color: blue;
4}
  • > işareti, span ve em arasındaki doğrudan çocuk birleştirici olarak kullanılır. Bu örnekte, stil yalnızca <span> öğelerinin doğrudan çocukları olan <em> öğelerine uygulanır. Üçüncü satır örneğinde, <span> ve <em> etiketleri arasında bir <s> etiketi bulunduğundan, stil uygulanmaz.

Bitişik kardeş öğe (Adjacent Sibling) Birleştirici 

1/* Next Sibling combinator */
2br + b {
3    color: green;
4}
  • + sembolünü kullanan bitişik kardeş birleştirici, belirli bir elemanın hemen arkasında görünen kardeş bir elemana stil uygular.
  • Bu örnekte, metin rengi yalnızca bir <b> etiketinin bir <br> etiketinden hemen sonra görünmesi durumunda yeşil olur.

Genel kardeş birleştirici 

1/* Subsequent Sibling Combinator */
2br ~ b {
3    color: steelblue;
4}
  • ~ sembolünü kullanan genel kardeş birleştirici, belirli bir elemanın ardından görünen tüm kardeş elemanları seçer.
  • Bu örnekte, bir <br> etiketinin ardından görünen tüm <b> etiketlerinin metin rengi mavi tonunda olacaktır.

Pseudo-sınıflar 

1/* Pseudo Class : ":" */
2a:hover {
3    background-color: lightskyblue;
4}
  • Pseudo-sınıfları seçmek için : kullanılır.
  • Pseudo-sınıflarla ilgili detaylar başka bir makalede açıklanacaktır.

Pseudo-elementler 

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}
  • Pseudo-elemanları seçmek için :: kullanılır.
  • Pseudo-elemanlarla ilgili detaylar da başka bir makalede açıklanacaktır.

CSS Özgüllüğü

CSS'deki öncelik, CSS'in nasıl çalıştığını anlamak ve beklenmeyen stil uygulamalarını önlemek için çok önemlidir. CSS önceliği, aynı elemente birden fazla CSS kuralı uygulandığında hangi kuralın en etkili olduğunu belirler. CSS önceliği başlıca aşağıdaki faktörlere göre belirlenir.

  1. Satır içi stiller: HTML içinde doğrudan yazılmış stiller
  2. ID Seçiciler ：#id
  3. Sınıflar, Öznitelik Seçiciler, Pseudo-sınıflar ：.class, [attribute=value], :hover, etc
  4. Eleman Seçiciler ：div, h1, p, etc
  5. Evrensel Seçici ：*

Liste yukarı çıktıkça öncelik artar, aşağı indikçe öncelik azalır.

Özgüllük Nasıl Hesaplanır

CSS önceliği, her seçicinin 'ağırlığını' ölçerek hesaplanır. Her seçicinin ağırlığı şu şekilde temsil edilir.

  1. Satır içi stiller: Satır içi stiller en güçlü olanıdır ve her zaman önceliklidir.
  2. ID seçiciler: Bir ID seçici '100 puan'a karşılık gelir.
  3. Sınıf, öznitelik seçicileri, pseudo-sınıflar: Bunlar '10 puan'a karşılık gelir.
  4. Element seçicileri, pseudo-elemanlar: Bunlar '1 puan'a karşılık gelir.

En yüksek puana sahip kural uygulanır.

Örnek: 

 1/* ID Selector */
 2#header {
 3    color: blue;
 4}
 5
 6/* Class Selector */
 7.header {
 8    color: red;
 9}
10
11/* Element Selector */
12h1 {
13    color: green;
14}
1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>

Burada, <h1> etiketi üç farklı stil uygulanmış durumda:

  • h1 element seçici (1 puan)
  • .header sınıf seçici (10 puan)
  • #header ID seçici (100 puan)

Bu durumda, ID seçici en yüksek önceliğe sahip olduğu için color: blue uygulanır.

!important ile önceliğin geçersiz kılınması

Bir stili zorlamak ve normal öncelikleri yok saymak istiyorsanız !important kullanın. !important, tüm kurallar üzerinde en güçlü etkiye sahiptir ve diğer her şeyi geçersiz kılar.

Örnek: 

1#important-header {
2    color: blue;
3}
4
5.important-header {
6    color: red !important;
7}
1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
  • Burada, color: red !important; belirtilmiştir, bu nedenle color: red önceliklidir.

Kalıtım ve Öncelik

CSS, stilleri üst öğelerden alt öğelere miras alma yeteneğine sahiptir. Örneğin, color ve font-family gibi özellikler varsayılan olarak miras alınır. Ancak, belirli bir alt öğe doğrudan stillendirilmişse, doğrudan uygulanan stil, miras alınan stillere üstünlük sağlar.

Örnek: 

1footer {
2    color: gray;
3}
4
5p {
6    color: black;
7}
1<footer>
2    <p>This paragraph's text will be black.</p>
3    <span>This text will be gray.</span>
4</footer>
  • Burada, footer etiketi için color: gray; uygulanmış, ancak p öğesi için açıkça color: black; belirtilmiş olduğundan, p öğesinin metni siyah görüntülenir. Bu arada, span öğesi footer öğesinden color özelliğini miras alır ve gri renkte görüntülenir.

CSS Zinciri ve Öncelik

'Cascading Style Sheets (CSS)' adından da anlaşılacağı gibi, stiller 'birbirine zincirlenir'. Bu, birden fazla stil sayfası veya kural varsa, son tanımlanan kuralın öncelikli olduğu anlamına gelir. Öncelikler aynıysa, daha sonra yazılan stil uygulanır.

Örnek: 

1.text {
2    color: red;
3}
4
5.text {
6    color: blue;
7}
1<p class="text">This text will be blue.</p>
  • Burada, color: blue; daha sonra tanımlanmıştır, bu yüzden metin mavi olarak görüntülenir.

Özet

CSS'nin önceliği özgüllük gibi algoritmalar kullanılarak belirlenir, ancak burada yalnızca temel kısımları ele aldık.

Temel kurallar şu şekildedir:

  • Satır içi stiller her zaman en yüksek önceliğe sahiptir.
  • ID seçicileri güçlüdür ve sınıflar ve etiketler üzerinde önceliğe sahiptir.
  • Sınıf seçicileri ve pseudo-class'lar orta düzeyde bir önceliğe sahiptir.
  • Etiket seçicileri ve pseudo-element'ler en düşük öncelik seviyesine sahiptir.
  • !important, normal önceliği geçersiz kılar ve stili zorla uygular.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

CSS'de Kalıtım