FrontEnd Developer Road Map

FrontEnd Developer RoadMap – CSS3 Tutorial 10 CSS Kodun Uygulanma Önceliğini Anlamak

Merhabalar, bu yazımda yazılmış CSS kodlarının öncelik sırasını anlamaya çalışacağız.

Burada Browser’ın, Ögeyi Denetle kısmına göz atıp burada CSS kodlarımızın nasıl uygulandığını görmeye çalışacağız.

CSS kod yazmak için bir çok yöntem göstermiştik. Inline – Internal – External – CDN…

Peki hangisinin durumu önceliklidir.

Aşağıdaki koda bir bakalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
</head>
<body>
    
    <h1>Murat Bilginer</h1>
 
</body>
</html>

h1 etiketi için hiç CSS uygulamadım.

Sayfayı çalıştırıp. F12’ye basalım. Ya da sayfa üzerinde sağ tıklayıp Ögeyi Denetle diyebilirsiniz.

Gördüğünüz gibi h1 etiketi için tarayıcının default belirlediği değerler var ve eğer biz hiçbir CSS bildirimi yapmazsak bu değerler uygulanıyor.

Şimdi gelin şunu yapalım.

h1’e Internal şekilde CSS değerleri uygulayalım

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
 
        h1{
            font-size: 15px;
            color: blue;
        }
    </style>
 
</head>
<body>
    
    <h1>Murat Bilginer</h1>
 
</body>
</html>

Benim yaptığım Internal atama sıralamada bir üste çıktı. Tarayıcının standartları alt tarafta kaldı. Benim belirlediğim CSS bildirimleri içinde tarayıcının belirledikleri varsa bunları artık ezdik. font-size değeri 2em verilmiş tarayıcı tarafından ama biz 15px olarak güncelleyince bunu ezmiş oldu.

Şimdi gelin bir de Internal CSS ekleyelim.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
 
        h1{
            font-size: 15px;
            color: blue;
        }
    </style>
 
</head>
<body>
    
    <h1 style="color: red; font-size: 80px; font-weight: 400;">Murat Bilginer</h1>
 
</body>
</html>

Inline eklediklerim element.style blokları içine yazıldı. Internal olanlar onun bir altında, tarayıcının default değerleri de onun altında yer alıyor.

Öncelik sıramızı böylece görmüş olduk.

Peki farklı CSS dosyalarında h1 etiketi için CSS değerleri yazsaydık, iki dosyayı da bu html içinde tanıtsaydık. Hangisini sıralamada sonra tanıttıysak yani daha aşağıya yazdıysak ondaki değerler son değer olarak uygulanacaktır.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
 
        h1{
            font-size: 15px;
            color: blue;
        }
    </style>
 
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    
    <h1 style="color: red; font-size: 80px; font-weight: 400;">Murat Bilginer</h1>
 
</body>
</html>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="main.css">

main.css içinde h1 için tanımlanmış değerler varsa onlar uygulanır.

Öncelik sıramızı tekrar yazarsak.

Inline CSS > Internal CSS – External CSS ( Head İçinde Yazıldığı Sıraya Göre En Altta Yazılanın Değerleri uygulanır > Tarayıcı Default  

Bir sonraki yazımda görüşmek üzere.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 10 – Oly’nin PCR Sonucu Çıktı FCov Pozitif…

Selamlar, bu yazımda sizlere Oly’nin çıkan PCR sonucu ve geçtiğimiz bir haftada hastalığın genel seyrinden…

5 saat ago

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

5 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

5 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

5 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

6 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

6 gün ago