HTML ile CSS Kullanımı ~ Webkolog

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ına class="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!

2 Ağustos 2006 Çarşamba