CSS, Inline (satır içi) / External (dış dosya) CSS ve Temel CSS Bilgileri

AÖF Web Tasarımı ve Kodlama CSS

CSS #1

CSS (Cascading Style Sheets – Basamaklandırılmış Biçim Sayfaları)

CSS Notları

CSS özetle bir HTML elemanın görsel ve biçimsel olarak düzene konmasına yarayan betiklerden oluşur. Bir kutunun (div) içeriğindeki yazıların renginden tutun da bir paragraf nesnesinin (p) her satırının yüksekliği, bir resmin boyutları, bir HTML elemanının arka planına konacak resim veya renk, mobil uyumlu (responsive / duyarlı / tepkisel) ögelerin hangi ekran çözünürlüğünde nasıl görüneceği, bir nesnenin sayfadaki saydamlık (opacity) değeri gibi bir çok ayarlamayı CSS sayesinde yaparız.

CSS, bir HTML sayfasında üç ayrı şekilde kullanılabilir.

1- Dışarıdan çağrılan CSS dosyası kullanılarak CSS biçimlendirmesi:

HTML dokümanımızın bulunduğu dizinde veya farklı bir dizinde (klasörde) tutulan .css uzantılı dosyayı, HTML etiketleri içerisindeki <head> ….. </head> kod blokları içerisinde sayfaya çağırıp dahil edebiliriz.

index.html adıyla aşağıdaki kodları içeren dosyamızı kaydedelim.

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="stil_dosyam.css" type="text/css" />
    <title>Web Tasarımı ve Kodlama</title>
</head>

<body>
    <span>Bu yazı dışarıdan çekilen bir CSS dosyası tarafından biçimlendirilmiştir.</span>
</body>

</html>

Yukarıdaki örnekte <body> kod bloğundaki span nesnesine dikkat edersek; anlatılana göre stil_dosyam.css adında bir dosyamız daha olmalıdır. Ve bu dosyamız index.html dosyasının bulunduğu dizinde olmalıdır. Çünkü href=”stil_dosyam.css” olarak yol tarifi yapılmıştır. Eğer bu dosya depo adlı bir dizinde bulunsaydı yol tarifi href=”depo/stil_dosyam.css” şeklinde olurdu. Şimdi bunları bildiğimize göre, HTML dosyamız ile aynı dizinde stil_dosyam.css adında bir dosya oluşturalım ve aşağıdaki kodları yazarak kaydedelim.

stil_dosyam.css

span{
color: red; 
/* veya color: #FF0000; şeklinde HEX kodu kullanarak RGB renge ulaşmamız mümkündür. */
}

Bu iki dosyayı doğru kaydettiyseniz ve aynı dizinde bulunuyorlarsa index.html dosyanızı açtığınızda “Bu yazı dışarıdan çekilen bir CSS dosyası tarafından biçimlendirilmiştir.” ifadesinin kırmızı yazı ile yazıldığını göreceksiniz. Bu özelliği veren stil_dosyam.css dosyasındaki span biçimlendirmesidir.

2- İlgili HTML elemanına satır içi stil parametresi tanımlayıp biçimlendirme (inline style)

Aşağıdaki örnekte stil dosyası dışarıdan çağrılmamış, her bir HTML nesnesi için biçimlendirme parametreleri “satır içi (inline)” yöntem ile nesneye dahil edilmiştir.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web Tasarımı ve Kodlama</title>
</head>
<body>
    <div style="color: #0000ff;">Bu kutudaki yazıyı mavi olarak göreceksiniz</div>
<p style="font-weight: bold;">Bu paragraf yazısını kalın yazı stili ile yazılmış olarak göreceksiniz.</p>
</body>
</html>

Görüldüğü üzere yukarıdaki örnekte dışarıdan herhangi bir biçim dosyası (CSS) çağırmadık. Biçimlendirmelerimizi satır içi yöntemler ile yaparak ilk nesnemiz olan kutunun (div) yazı içeriğini mavi renkli, paragrafımızın (p) içeriğini ise kalın puntolu olarak belirledik. Fakat sayfamızda oldukça kalabalık bir kod karmaşasına sebep olacağından çok tercih edilmez.

3- Tek sayfa <style> …. </style> etiketleri kullanarak biçimlendirme

Bu yöntem, dışarıdan CSS dosyası çağrılmaması bakımından ikinci yönteme benzemektedir. Aşağıdaki örneği inceleyiniz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web Tasarımı ve Kodlama</title>
<style>
p{
color: #0000ff;
font-size: 22px;
font-family: 'Verdana';
}
div{
font-weight: bold;
text-align:center;
}
</style>
</head>
<body>
    <div>Bu kutudaki yazıyı kalın yazılmış ve ortalanmış olarak göreceksiniz</div>
<p>Bu paragraf yazısını mavi renk ile, 22 piksel yazı boyutu ile ve Verdana yazı tipi ile yazılmış olarak göreceksiniz.</p>
</body>
</html>

Gördüğünüz gibi <style> …. </style> kod bloğu içerisinde stillerimizi yazarak istediğimizi elde etmiş bulunmaktayız. Her ne kadar ikinci yöntemden daha iyi bir yöntem olsa da yine kodlarda kalabalık meydana geleceği için ilk yöntemi tercih ederek CSS biçimlendirmelerimizi bir dış dosyadan (stil_dosyam.css gibi) çekmemiz daha uygun olacaktır.