Welcome to the world of CSS! In this tutorial, you'll learn the basics of Cascading Style Sheets, which is the language used to style an HTML document. CSS is essential for web development, as it allows you to control the look and feel of your web pages.

Understanding CSS

CSS stands for Cascading Style Sheets. It's a language used to describe the presentation of a document written in HTML or XML. With CSS, you can control the color, font, layout, and other aspects of a web page.

Key Concepts

  • Selector: A selector tells the browser which elements on the page to style.
  • Property: A property is a characteristic of an element, such as color, font-size, or background-color.
  • Value: A value is the specific setting for a property, such as red, 12px, or url(image.png).

CSS Selectors

There are several types of selectors in CSS, including:

  • Element selectors: Select elements by their tag name, such as h1, p, or div.
  • Class selectors: Select elements by their class attribute, such as .my-class.
  • ID selectors: Select a single element by its ID attribute, such as #my-id.

Example

Here's an example of a simple CSS rule that styles all <p> elements with a red font color:

p {
    color: red;
}

Applying CSS

There are several ways to apply CSS to your HTML document:

  • Internal CSS: Embed CSS directly within the <head> section of your HTML document.
  • External CSS: Link to an external CSS file using the <link> tag.
  • Inline CSS: Apply CSS directly to an HTML element using the style attribute.

Example

Here's an example of internal CSS:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with internal CSS.</p>
</body>
</html>

Further Reading

To learn more about CSS, you can visit our comprehensive CSS Tutorial.

CSS Example