Web sayfalarının görünümünü ve düzenini belirlemek için HTML ile birlikte CSS kullanılır. HTML’de <style> etiketi, CSS kurallarını doğrudan HTML belgesine yerleştirmenizi sağlar. Bu sayede, web sayfanızın tasarımını daha esnek ve kontrol edilebilir hale getirebilirsiniz.
<style> Etiketi Kullanımı:
HTML belgesi içinde <head> bölümü içerisinde yer alır ve CSS kurallarını içerir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Sayfası</title>
<!-- CSS kurallarını içeren style etiketi -->
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1 {
color: #0066cc;
}
p {
line-height: 1.6;
}
.container {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- Sayfa içeriği -->
<div class="container">
<h1>Merhaba, CSS ile Web Sayfası Tasarımı</h1>
<p>HTML ve CSS kullanarak web sayfalarınızı istediğiniz gibi tasarlayabilirsiniz.</p>
</div>
</body>
</html>
Yukarıdaki örnekte, <style> etiketi içinde CSS kuralları belirtilmiştir. Bu kurallar, sayfanın genel arka plan renginden başlıkların renklerine ve içerik paragraflarının çizgi yüksekliğine kadar birçok özelliği belirtir.
CSS Kuralları:
body: Sayfanın genel özellikleri.h1: Başlık etiketinin özellikleri.p: Paragraf etiketinin özellikleri..container: Özel bir sınıfa sahip bir konteynerin özellikleri.
Bu örnekte, CSS kuralları sayesinde sayfanın tasarımını belirleyebilir ve sayfa içindeki öğeleri stilize edebilirsiniz. HTML’de <style> etiketi, CSS ile web tasarımında esneklik sağlar ve sayfanızın görünümünü özelleştirmenize olanak tanır.