Web tasarımında, CSS (Cascading Style Sheets) kullanarak bir web sitesinin düzenini oluşturmak oldukça önemlidir. Doğru kullanıldığında, CSS sayesinde web siteleri daha çekici, düzenli ve kullanıcı dostu hale gelir. Bu yazıda, CSS ile website layout oluşturmanın temel bilgilerini ve örnek kodları paylaşacağım.
Temel HTML Yapısı
İlk olarak, bir web sayfasının temel HTML yapısını oluşturalım:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Website Başlığı</h1>
</header>
<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<main>
<section>
<h2>Hoş Geldiniz</h2>
<p>Web sitemize hoş geldiniz. Buraya site içeriği gelebilir.</p>
</section>
</main>
<footer>
<p>Telif Hakkı &copy; 2024 Website Adı</p>
</footer>
</body>
</html>
CSS ile Düzen Oluşturma
Şimdi, HTML yapılarını CSS kullanarak stilize edelim:
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
Yukarıdaki CSS kodları, HTML yapılarını stilize eder. Örneğin, <header>, <nav>, <main> ve <footer> gibi bölümleri düzenler ve renklendirir.
Bu örnekler, CSS kullanarak basit bir web sitesi düzeni oluşturmanın temelini oluşturur. Daha karmaşık düzenler için CSS’de daha fazla özellik ve teknikler bulunmaktadır. Ancak, bu temel örnekler, başlangıç için harika bir yer sağlar.