Merhaba sevgili Webkolog dostları,
Bugün sizlere web sayfalarımızı sadece bilgilendirici değil, aynı zamanda görsel olarak da çekici hale getiren büyüleyici bir konudan bahsedeceğim: CSS (Cascading Style Sheets) ve onun HTML 4.01 ile nasıl bir araya geldiği! Artık web sitelerimizin sadece içerikten ibaret olmadığını, şık tasarımlara da sahip olması gerektiğini çok iyi biliyoruz. İşte CSS, bize bu gücü veriyor. HTML ile içeriği yapılandırırken, CSS ile bu içeriğin görünümünü (renkler, fontlar, düzen vb.) belirliyoruz. Hadi gelin, CSS kodlarını HTML 4.01'de sayfamıza dahil etmenin üç temel yolunu keşfedelim!
1. Satır İçi Stil (Inline Style): Hızlı ve Yerel Dokunuşlar
CSS'i HTML öğelerine doğrudan uygulamak istediğimizde, satır içi stil kullanırız. Bu yöntem, tek bir öğenin görünümünü hızlıca değiştirmek için pratik olabilir. Bunun için HTML etiketinin içine style
özelliğini ekleriz.
<p style="color: blue; font-size: 16px;">Bu paragraf mavi ve biraz daha büyük olacak.</p>
<strong style="color: #FF0000; background-color: yellow;">Bu yazı hem kırmızı hem de sarı arka planlı!</strong>
Burada, style
özelliğinin içine doğrudan CSS kurallarını yazıyoruz. Her bir kural, bir özellik (örneğin color
) ve bir değerden (örneğin blue
veya #FF0000
) oluşur ve noktalı virgül (;
) ile ayrılır.
Ancak unutmayın, bu yöntem sadece tekil öğeler için uygundur. Sayfanızda birden fazla aynı stili uygulamak isterseniz, kod tekrarına yol açar ve yönetimi zorlaştırır.
2. Sayfa İçi Stil (Internal Style Sheet): Belirli Bir Sayfa İçin Genel Kurallar
Eğer belirli bir HTML belgesindeki birçok öğeye stil vermek istiyorsanız, sayfa içi stil kullanmak daha düzenli bir yaklaşımdır. Bu yöntemde, CSS kurallarını HTML belgesinin <head>
bölümüne yerleştirdiğimiz <style>
etiketlerinin arasına yazarız.
<head>
<title>Webkolog Stil Rehberi</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h4 {
color: #336699;
text-align: center;
}
.highlight {
color: #CC0000;
font-weight: bold;
}
</style>
</head>
<!-- ... body bölümündeki kodlar ... -->
<p class="highlight">Bu metin önemli bir vurguya sahiptir.</p>
Yukarıdaki örnekte:
body
için genel font ve arka plan rengi belirledik.h4
başlıklarımız için mavi renk ve ortalama hizalama verdik..highlight
bir sınıftır (class). Bu sınıfı taşıyan herhangi bir HTML öğesi (örneğin bir paragraf), tanımlanan stil kurallarını alacaktır. HTML elemanlarınaclass="highlight"
şeklinde atayabiliriz.
Bu yöntem, tek bir sayfadaki stilleri merkezi bir yerden yönetmek için idealdir. Ancak birden fazla sayfada aynı stilleri kullanmak isterseniz, bu kodları her sayfaya kopyalamanız gerekir ki bu da ideal bir çözüm değildir.
3. Harici Stil Sayfası (External Style Sheet): Web Sitenizin Genel Tasarımı İçin
Bir web sitesindeki tüm sayfalarda aynı tasarımı ve görünümü korumak istiyorsak, en güçlü ve en profesyonel yöntem harici stil sayfaları kullanmaktır. Bu yöntemde, tüm CSS kurallarınızı ayrı bir .css
uzantılı dosyaya yazarsınız ve bu dosyayı her HTML belgesine bağlarsınız.
Öncelikle, CSS kodlarınızı içeren bir dosya oluşturursunuz (örneğin, still.css
):
/* still.css dosyasının içeriği */
body {
margin: 20px;
line-height: 1.6;
}
h4 {
color: green;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
p {
color: #333;
}
Ardından, bu CSS dosyasını HTML belgenizin <head>
bölümüne <link>
etiketi ile bağlarsınız:
<head>
<title>Harici Stilli Sayfa</title>
<link rel="stylesheet" type="text/css" href="still.css" />
<!-- Yazıcılar için özel bir stil dosyası da ekleyebiliriz -->
<link rel="stylesheet" type="text/css" href="yazici.css" media="print" />
</head>
rel="stylesheet"
: Bağlanan dosyanın bir stil sayfası olduğunu belirtir.type="text/css"
: Bağlanan dosyanın MIME türünü (CSS dosyası) belirtir.href="still.css"
: CSS dosyasının yolunu veya URL'sini belirtir.media="print"
: Bu özellik, stil sayfasının hangi medya türleri için geçerli olduğunu belirler. Örneğin,print
değeri, bu stilin sadece sayfa yazdırılırken uygulanacağı anlamına gelir.
Bu yöntem, tüm sitenizin tasarımını merkezi bir yerden yönetmenizi sağlar. Bir tasarım değişikliği yapmak istediğinizde, sadece tek bir CSS dosyasını güncellersiniz ve bu değişiklik sitenizdeki tüm sayfaları etkiler. Bu, modern web geliştirmenin temelini oluşturur ve size zaman kazandırır!
HTML 4.01 ile CSS kullanmak, web sayfalarınıza hayat veren, onları sadece bilgi yığını olmaktan çıkarıp görsel bir şölene dönüştüren sihirli bir dokunuş gibidir. Bu üç yöntemi anlayarak, web sitelerinizin görünümünü tamamen kontrol edebilir ve ziyaretçilerinize daha iyi bir deneyim sunabilirsiniz.
Webkolog'u takipte kalın!
Hepinize bol kodlu ve keyifli öğrenme süreçleri dilerim!
0 yorum:
Yorum Gönder