Hello friends! If you are not familiar with CSS yet, let me explain that CSS is the primary language for designing the appearance of web pages. CSS allows us to control the look and feel of web pages, including colors, fonts, layouts, and so on, in a responsive design for different devices. This language can create pages that may seem simple at first and perhaps even a little monotonous at first glance, but can become vibrant and dynamic over time.
Starting with CSS might feel overwhelming at first, but don’t worry! Here we have simple and clear guides that will help you easily grasp CSS. The first important step is learning how to add CSS to your HTML documents. However, we can't forget that CSS can be included in three different ways: inline, internal, and external.
Inserting CSS as inline can be quick, but generally, it’s not the best method since managing it for large and complex projects might be difficult. Instead, it's better to use either an internal or external method. Using external styles is especially advisable for larger and more complex projects, as it allows you to easily manage different styles for different pages.
Now let's look at a simple example that shows how to add CSS to an HTML file. This example demonstrates all three methods for including CSS, which can be applied in real projects.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<style>
/* Internal Styles */
body {
background-color: lightblue;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 style="color: navy;">Hello to the World of CSS</h1>
<p>This is an example of working with CSS.</p>
</body>
</html>
<!DOCTYPE html>: This line indicates that our HTML document is of the HTML5 type.<html lang="fa">: We specify that the language of the document is Persian.<head>: This section contains metadata for the document, including tags and styles.<meta charset="UTF-8">: Specifies that our encoding is UTF-8, allowing Persian characters to be displayed.<meta name="viewport"...: For responsive design, it ensures proper rendering on different devices.<title>CSS Example</title>: This is the page title displayed in the browser’s title bar.<style>: This section is for adding internal styles to the document.body { background-color: lightblue; }: The internal style that sets the background color of the page to light blue.<link rel="stylesheet" href="styles.css">: With this line, we attach an external CSS file to our document.<h1 style="color: navy;">: The header text is styled to be navy-colored; this style is inline.