HTML

HTML < style > Etiketi | CSS ile HTML Stillendirme

HTML <style> etiketi, web sayfalarının görünümünü özelleştirmek ve stil eklemek için kullanılan güçlü bir araçtır. Bu etiket, CSS (Cascading Style Sheets) kodlarını doğrudan HTML belgesine eklemenizi sağlar. Bu yazıda, HTML <style> etiketinin ne olduğunu, nasıl kullanıldığını ve sayfa stillerini nasıl özelleştirebileceğinizi öğreneceksiniz.

HTML <style> Etiketi Nedir?

Reklam

HTML <style> etiketi, sayfa içerisine yerleştirilen CSS kodlarını belirtmek için kullanılır. Bu etiket sayfanın görünümünü belirlemede kullanılan stil kurallarını içerir. CSS, HTML’den ayrı bir dil olduğu için, <style> etiketiyle HTML belgesine doğrudan stil ekleyebilirsiniz.

HTML <style> Etiketi Nasıl Kullanılır?

<style> etiketini kullanarak CSS kodlarını HTML belgenize eklemek oldukça basittir. İşte temel kullanım:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Style Etiketi Örneği</title>

    <style>
        /* CSS Kodları Buraya Gelecek */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            color: #333;
            margin: 20px;
        }

        h1 {
            color: #007BFF;
        }

        p {
            line-height: 1.6;
        }
    </style>
</head>
<body>

    <h1>Web Sayfamızın Başlığı</h1>
    <p>Bu bir paragraf metni örneğidir. Sayfa stilleri bu şekilde özelleştirilebilir.</p>

</body>
</html>

Yukarıdaki örnekte, <style> etiketi içinde CSS kodları yer alır. Bu kodlar, sayfanın genel görünümünü, başlık (<h1>) ve paragraf (<p>) gibi öğelerin stilini belirler.

HTML <style> Etiketi ile Sayfa Stillerini Özelleştirme:

  • Arka Plan ve Yazı Rengi Değiştirme:
body {
    background-color: #f0f0f0;
    color: #333;
}
  • Başlık Stilini Değiştirme:
h1 {
    color: #007BFF;
}
  • Paragraf İçi Boşluk Ayarlama:
p {
    line-height: 1.6;
}
  • Kenar Boşluğu Ekleme:
body {
    margin: 20px;
}
  • Yazı Tipi Belirleme:
body {
    font-family: 'Arial', sans-serif;
}

Buton Stilini Özelleştirme:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buton Stil Örneği</title>

    <style>
        button {
            background-color: #28a745;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>

    <button>Sayfaya Git</button>

</body>
</html>

Bu örnek, bir sayfaya gitmek için kullanılan bir butonun stilini özelleştirir. Buton üzerine gelindiğinde (:hover), arka plan rengi değişir.

Menü Stilini Ayarlama:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menü Stil Örneği</title>

    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: #111;
        }
    </style>
</head>
<body>

    <ul>
        <li><a href="#home">Ana Sayfa</a></li>
        <li><a href="#news">Haberler</a></li>
        <li><a href="#contact">İletişim</a></li>
        <li><a href="#about">Hakkımızda</a></li>
    </ul>

</body>
</html>

Bu örnekte, bir yatay menünün stilini belirliyoruz. Menü öğeleri üzerine gelindiğinde (:hover), arka plan rengi değişir.

Form Elemanlarını Düzenleme:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Stil Örneği</title>

    <style>
        input[type=text], input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }

        button:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>

    <form action="/submit" method="post">
        <label for="uname"><b>Kullanıcı Adı</b></label>
        <input type="text" placeholder="Kullanıcı adınızı girin" name="uname" required>

        <label for="psw"><b>Şifre</b></label>
        <input type="password" placeholder="Şifrenizi girin" name="psw" required>

        <button type="submit">Giriş Yap</button>
    </form>

</body>
</html>

Bu örnekte, bir formun stilini belirliyoruz. Text ve şifre girişi alanları, buton ve buton üzerine gelindiğindeki davranışlar özelleştirilmiştir.

HTML <style> Etiketi İle Dinamik Stil Değişiklikleri:

Sayfanızın içindeki öğelerin bazılarına dinamik olarak stil eklemek istiyorsanız, JavaScript kullanarak stil özelliklerini değiştirebilirsiniz.

Reklam
<script>
    function degistir() {
        var element = document.getElementById("degisecek");
        element.style.color = "red";
        element.style.fontWeight = "bold";
    }
</script>

Bu örnekte, bir JavaScript fonksiyonu kullanarak belirli bir öğenin (<p id="degisecek">) stil özelliklerini değiştiriyoruz.

Sonuç:

HTML <style> etiketi, web sayfalarınızın görünümünü özelleştirmek ve stil eklemek için güçlü bir araçtır. CSS kodlarını doğrudan HTML belgenize ekleyerek sayfanızın estetik görünümünü iyileştirebilir ve kullanıcı deneyimini artırabilirsiniz. Doğru ve özenli kullanıldığında, HTML <style> etiketi, web geliştirme projelerinizde yaratıcılığınızı sergilemenize olanak tanır. İyi kodlamalar!

Author

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu