CSS

CSS (Cascading Style Sheets) is a powerful tool that lets you style and lay out your web pages effectively. Whether you’re creating your first website or improving an existing one, understanding CSS is essential.

Table of Contents

  1. What is CSS?
  2. How to Add CSS to Your Website
  1. Selectors in CSS
  2. CSS Properties
  1. Advanced CSS Features
  1. Conclusion

1. What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language that controls the appearance of HTML elements on a web page. It allows you to change colors, fonts, layouts, and more, making your web page visually appealing and user-friendly.

2. How to Add CSS to Your Website

There are three main ways to apply CSS to your HTML document:

Inline CSS

Add CSS directly to an HTML element using the style attribute.

<p style="color: blue;">This text is blue.</p>

Internal CSS

Use the <style> tag within the <head> section of your HTML document.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
<p>This text is red.</p>
</body>
</html>

External CSS

Link an external CSS file using the <link> tag.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This text is styled from an external file.</p>
</body>
</html>

3. Selectors in CSS

CSS selectors are used to “select” HTML elements to style them.

Examples:

  • Element selector: p { color: green; }
  • Class selector: .className { font-size: 16px; }
  • ID selector: #idName { margin: 10px; }

4. CSS Properties

Colors and Backgrounds

Set text color and background styles.

body {
    background-color: lightgray;
    color: darkblue;
}

Fonts and Text

Customize font style, size, and alignment.

h1 {
    font-family: Arial, sans-serif;
    text-align: center;
}

Box Model

Define margins, borders, padding, and content.

div {
    margin: 20px;
    padding: 10px;
    border: 1px solid black;
}

5. Advanced CSS Features

Media Queries

Adapt styles to different screen sizes.

@media (max-width: 600px) {
    body {
        background-color: yellow;
    }
}

CSS Variables

Reuse values throughout your stylesheet.

:root {
    --main-color: teal;
}

h1 {
    color: var(--main-color);
}

6. Conclusion

CSS is an essential part of modern web development. By mastering its basics and advanced features, you can create visually stunning and responsive websites. Keep experimenting with different properties and layouts to find what works best for your projects.

Happy coding!

Table of contents