Html 5 bölümünde bir çok html 5 etiketinin kullanımını
öğrendik. Dikkat ederseniz eklediğiniz her html etiketinin
görüntülenme şekli tarayıcının önceden o html etiketi için
belirlediği bir başlangıç değeri ile olmaktadır.
Peki web sayfalarımızda css kodlarını nasıl
kullanırım ? Css ile html sayfalarında neler
yapabiliriz ? Web sayfalarına stil kodları nasıl ekleriz ?
Örneğin; h1 etiketi chrome tarayıcı için 32px
olarak belirlenmiş ve her h1 etiketini kullandığımızda 32 px lik
koyu bir yazı karşımıza çıkıyor. Ya da kullandığımız <p>
etiketleri için üstten ve alttan biraz boşluk (margin) bırakılır.
Ancak tarayıcıların html etiketleri için atadıkları bu başlangıç
değerlerine (css özellikleri) rağmen sitelerimiz soluk ve
cansız bir şekilde karşımıza çıkmaktadır.
Günümüz web sayfalarında görsellik daha da ön çıkmaktadır
dolayısıyla her html etiketi için varsayılan görüntü biçimini
değiştirebileceğimiz bir araca ihtiyacımız var. Bu araç yani
kodlama dili Css (Cascading Style Sheet) 'dir.
Örneğin sayfa üzerinde bulunan <h1> etiketi için css kodu
yazalım ;
<h1>Sayfa Başlığı</h1>
css kodunu aşağıdaki gibi yazıyoruz.
h1 {
font-size:50px;
color: red;
}
Örnek için tıklayınız.
Burada css kodları ile html sayfası üzerindeki tüm h1
etiketlerinin font büyüklüğünü 40 px ve
yazı renginin mavi olarak ayarlanmasıdır.
En basitiyle bir css kodunun hangi amaçla kullanıldığını ve
nasıl yazıldığını öğrendik. Bu dersimizden itibaren css
kodlarının nasıl yazıldığını öğrenmeye başlayacağız.
Css kodlarımızı 3 farklı şekilde tanımlayabiliriz.
Bunlar;
- Inline
- Internal
- External css, yöntemleridir.
Inline Css Nedir ve Nasıl Kullanılır ?
Sadece tanımlandığı etiket için geçerli olmasını
istediğimiz css kodlarımızı inline olarak tanımlarız.
Örneğin ; <span
style="color:red;"> text
</span>
Inline olarak tanımladığımız css kodları sadece css kodunun
tanımlandığı <span> etiketi için uygulanır
ve yazı rengi kırmızı olur.
Eğer ki sayfadaki tüm
<span> etiketleri için bir css kodu
yazmak istersek bu yöntemi kullanmamalıyız
çünkü sayfadaki her bir <span> etiketi
içine <span
style="color:red;"> text
</span> şeklinde bir tanımlama yapmak oldukça
güç olur.
Örneğin; sayfadaki tüm <a>
etiketleri için değil de sadece bir tek <a> etiketi
için text-decoration:none; yani linkin
altında oluşan çizgiyi silmek için gereken bir css
kodunu yazmak istersek aşağıdaki gibi yazabiliriz.
<a href="http://sadikturan.com" style="text-decotation:none;">
ziyaret etmek için tıklayınız.
</a>
peki inline olarak birden fazla css kodunu nasıl eklerim ?
** araya ; ekleyerek
birden fazla css tanımlamasını inline olarak yapabilirsiniz.
<a href="http://sadikturan.com" style="text-decotation:none;color:red">
ziyaret etmek için tıklayınız.
</a>
Internal Css Nedir ve Nasıl Kullanılır ?
Internal css
<head> </head> etiketleri arasına
<style type="text/css"> </style>
etiketleri eklenerek kullanılır.
<head>
<style type="text/css">
h1{
font-size :32px;
color :blue;
}
</style>
</head>
Internal olarak tanımlanan css kodları sadece bulunduğu html
sayfasını ilgilendirir. Yani index.html sayfamız
içindeki tüm <h1> etiketleri
için font büyüklüğü 32 px ve yazı rengi
mavi olarak tanımlanır. Ancak about.html sayfamız
için bu özellikler etkin olmaz. Eğer aynı
özellikleri about.html sayfası içinde
uygulansın istiyorsak aynı tanımlamaları about.html sayfasında da
yapmamız gerekir. Dolayısıyla
sadece bir .html sayfasına özgü olan özellikleri
Internal olarak tanımlamak mantıklıdır.
External Css Nedir ve Nasıl Kullanılır ?
Eğer tanımladığımız css kodları birden fazla html sayfasını
ilgilendiriyor ise bu durumda .css uzantılı bir
dosya oluşturup bu dosya içerisine css kodlarımızı
tanımlamamız gerekir.
Örneğin; index.html ve
about.html sayfalarımız var ve bu iki sayfada da
<h1> etiketi için
ortak olan css kodları yazmak istiyoruz. Bu
durumda external css kullanmalıyız yani yeni bir
.css uzantılı bir dosya oluşturup bu dosya
içine ortak olan css kodlarını eklemek en kolayı olacaktır.
Çünkü oluşturduğumuz
.css uzantılı dosyayı istediğimiz html sayfasına
eklememiz oldukça kolaydır.
Yeni bir style.css dosyası oluşturalım ve dosya
içeriğini aşağıdaki gibi güncelleyelim.
h1 {
font-size :32px;
color :blue;
}
p {
color : red;
font-size: 16px;
}
style.css dosyası içindeki css kodlarını uygulamak
istediğimiz her html sayfasına style.css dosyasını tanıtmamız
gerekiyor. Bu işlemi aşağıdaki gibi yapabiliriz.
Html ve style.css dosyamız aynı dizin yani aynı klasör
içinde ise bu durumda css dosyamız ile html dosyamızı şu
şekilde ilişkilendirebiliriz.
<head>
...
<link rel="stylesheet" href="style.css">
...
</head>
** index.html ve about.html sayfamız için bu işlemi
tekrarlamamız gerekiyor. Ardından bu iki html sayfamız için
ilgili css kodlarının hepsi etkin olacaktır.
Eğer ki aşağıdaki css kodumuzu 3 farklı şekilde tanımlarsak
bunların birbirine üstün gelmesi söz konusudur.
Örneğin aşağıdaki <p> etiketi için 3 farklı
şekilde css kodu yazalım.
<p>
Komple Uygulamalı Web Geliştirme Eğitimi
</p>
inline olarak => color : red;
internal olarak => color : blue;
external olarak => color : yellow;
Bu durumda <p> etiketi içindeki yazının
rengi kırmızı (red) olacaktır.
Öncelik sıralaması şu şekildedir.
- Inline
- Internal
- External