CSS Dersleri 3 - Inline , Internal ve External CSS Kullanımı

CSS'in External, Internal ve Inline kullanımını anlatıyoruz. CSS kullanım şekilleri nelerdir ?

Taha Furkan Bayar Taha Furkan Bayar
Kasım 12, 2022 - 15:50 Updated: Kasım 2, 2022 - 00:00
0 40
CSS Dersleri 3 - Inline , Internal ve External CSS Kullanımı

Harici, dahili ve satır içi CSS kullanımı

CSS, web sitenizin ekranda nasıl görüneceğini belirleyen belirli stil kurallarına sahip bir dosyadır. CSS kuralları, web sitenizin HTML dosyalarına çeşitli şekillerde ve yerlerde uygulanabilir. Harici stil sayfalarını, dahili stil sayfalarını veya satır içi stilleri kullanabilirsiniz. Her yöntemin belirli bir amaç için avantajları vardır.

Harici stil sayfaları, web sayfalarından bağlantılı ayrı .css dosyalarıdır. Harici stil sayfalarının avantajı, aynı anda birden çok web sayfasına uygulanabilmeleridir. Web sitenizin tasarımında büyük değişiklikler yapmanız gerekiyorsa, tüm bağlantılı sayfalara uygulanacak stil sayfasında tek bir değişiklik yaparak zamandan ve emekten tasarruf edebilirsiniz.

Dahili stil sayfaları, HTML dosyasının <head> bölümündeki sayfa için CSS kural kodunu içerir. Kural kodu yalnızca o sayfa için geçerlidir, ancak sayfa kodunda birden çok öğeye stil vermek için kullanılabilen sınıfları ve kimlikleri yapılandırabilirsiniz. Benzer şekilde, sayfadaki tüm işaretleme öğelerine CSS kodunda yapılacak bir değişiklik uygulanacaktır.

Satır içi stiller, belirli sayfa öğelerine stil vermek için belirli HTML etiketlerinde kullanılır. Hızlı ve kalıcı değişiklikler için kullanışlıdırlar, ancak bir tasarım değişikliği yapmaya karar verirseniz, oluşturduğunuz her satır içi stilin ayrı ayrı düzenlenmesi gerektiğinden, harici ve dahili stil sayfalarından daha kullanışlı ve popüler değildirler.

External CSS Kullanımı

Yukarıda bahsettiğimiz gibi harici CSS, normal HTML dosyalarından ayrı bir dosyadır ve .css uzantısına sahiptir. CSS dosyasını oluşturduktan sonra onu HTML dosyasına bağlamanız gerekir. Aksi takdirde CSS dosyalarınız işe yaramaz hale gelecek ve HTML sayfalarınızda yaptığınız değişiklikleri göremezsiniz. Bir örneğe bakalım.

.css dosyasını oluşturduktan sonra içine kodu şu şekilde yazıyoruz:

body {
  background-color: #f7cac9;
}

.firstDiv, .secondDiv, .thirdDiv {
  border: 7px outset gold;
  background-color: lightblue;
  text-align: center;
}

HTML sayfamıza dönerek <head> kısmına aşağıda bulunan kodu yazıyoruz.

<link rel="stylesheet" href="style.css">

Internal CSS Kullanımı

Dahili CSS, stil kodunu doğrudan bir HTML dosyasının <head> bölümünde kullanmanın bir yoludur. <head> bölümündeki <style> etiketini açtıktan sonra içine gerekli CSS kodunu yazabilirsiniz.

Örneğin; kodunuz şöyle görünecek:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #f7cac9;
}

.firstDiv {
  border: 7px outset gold;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="firstDiv">
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet consectetuer</p>
</div>
</body>
</html>

Inline CSS Kullanımı

Satır içi stiller, doğrudan HTML kodundaki herhangi bir öğeye uygulanır. Normal CSS özellikleri tarafından takip edilen stil nitelikleri, HTML etiketleri içinde belirtilir. Kullanımı aşağıdaki örnekte gösterilmiştir:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="border-width:7px; border-style:outset; border-color:gold; background-color:lightblue; text-align:center;">
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet consectetuer</p>
</div>
</body>
</html>

Etiketler: