Introduction to CSS

CSS (Cascading Style Sheets) is a powerful language used to style HTML elements on web pages. This blog introduces CSS, explains how it works with HTML, explores its types, and guides you in setting up your first CSS file.

What is CSS?

CSS stands for Cascading Style Sheets. It is used to control the appearance of HTML elements, including layout, colors, fonts, and spacing. By separating style from structure, CSS helps create visually appealing and maintainable websites.

How CSS Works with HTML

CSS works alongside HTML to style content. HTML provides the structure, and CSS applies the styles. For example:

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Hello, CSS!</h1>
</body>
</html>

In this example, the CSS inside the <style> tag styles the <h1> element by changing its color to blue and centering it.

Types of CSS

CSS can be applied in three ways:

  1. Inline CSS: Styles are written directly within an HTML element using the style attribute.
    2. <h1 style="color: red;">Inline CSS Example</h1>
  2. Internal CSS: Styles are defined within a <style> tag inside the <head> section.
    3. <style>
    body {
        font-family: Arial, sans-serif;
    }
</style>
  3. External CSS: Styles are written in a separate file with a .css extension and linked to the HTML file.
    4. <link rel="stylesheet" href="styles.css">

Setting Up Your First CSS File

Follow these steps to set up an external CSS file:

  1. Create an HTML file (e.g., index.html) with the following content:
    2. <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to CSS!</h1>
</body>
</html>
  2. Create a CSS file (e.g., styles.css) and add this code:
    3. h1 {
    color: green;
    font-family: Verdana, sans-serif;
    text-align: center;
}
  3. Open the HTML file in your browser. You should see a styled heading.

Congratulations! You’ve just created your first styled web page using CSS.

Conclusion

This introduction covered the basics of CSS, its integration with HTML, types of CSS, and how to set up your first CSS file. In the next blog, we'll dive deeper into CSS selectors and specificity.

Tags:
ABBAOUI Amine

ABBAOUI Amine

I am a full-stack software engineer specializing in building robust, scalable solutions. I focus on analyzing requirements, designing, and implementing efficient end-to-end systems using reusable components across both front-end and back-end development.

Post a Comment

0 Comments