Introduction
In this tutorial, we aim to teach you how to design a simple template for a website using CSS. This content is structured in a friendly and easy-to-follow manner, dealing with practical points regarding the topic and suitable for those who are just starting to learn CSS.
First, it is essential to understand that CSS is a language for styling web pages that gives us the ability to enhance the appearance of our sites with various features such as color, font, borders, and more. With CSS, you can style HTML elements in any way you like.
To design a web template with CSS, we need to divide our page into different sections and use CSS to define how each of these sections is displayed. This helps us organize web content in a structured and user-friendly way.
Next, we will provide a real-life example of CSS code that can assist in designing a better website template. We will strive to explain the concepts in simple language so that it is understandable for everyone.
Code Example
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web Template</title>
<style>
body {
font-family: Tahoma, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #444;
color: #fff;
padding: 10px 0;
}
nav a {
color: #fff;
padding: 0 15px;
text-decoration: none;
}
.container {
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>Simple Web Template</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</nav>
<div class="container">
<p>Welcome to our website.</p>
</div>
</body>
</html>
Code Explanation
<!DOCTYPE html>: This part indicates that the document is of the HTML5 type.
<html lang="fa">: This tag specifies that the language of the document is Persian.
<meta charset="UTF-8">: This part is used for encoding the character set to UTF-8, which includes most characters from around the world.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This line is for responsively designing the site and adapting to different screen sizes.
<style>: This block contains our CSS styles, including general styles for HTML elements like <body>, <header>, and others.
<header>: Used to display the title of the site at the top of the page.
<nav>: This includes the navigation links of the site that lead to different sections.
.container: This class is defined for the main content area, which includes the descriptions and text of the site.