CSS Rules

CSS Rules

CSS rules are instructions used to style HTML elements. A CSS rule tells the browser how an HTML element should appear on a webpage. CSS rules consist of a selector and a declaration block containing one or more declarations.

1. Structure of a CSS Rule

A CSS rule follows this basic structure:

selector {
    property: value;
}

Example:

h1 {
    color: blue;
    font-size: 30px;
}

In this example:

• h1: Selector that targets heading elements.
• color: CSS property.
• blue: CSS value.
• font-size: CSS property.
• 30px: CSS value.
• { } Declaration block.

2. CSS Rule with Multiple Declarations

A CSS rule can contain multiple declarations to apply different styles to the same HTML element.

Example:

p {
    color: green;
    font-size: 18px;
    text-align: center;
    background-color: lightyellow;
}

This rule changes the text color, font size, alignment, and background color of all paragraph elements.

3. CSS Rules for Different Selectors

You can create different CSS rules for different HTML elements.

Example:

h1 {
    color: blue;
}

h2 {
    color: green;
}

p {
    font-size: 18px;
}

Each CSS rule applies styles to its selected HTML elements.

4. CSS Grouping Rules

You can group multiple selectors together when they need the same styling. Use a comma to separate the selectors.

Example:

h1, h2, h3 {
    color: red;
    font-family: Arial, sans-serif;
}

This rule applies the same text color and font family to all h1, h2, and h3 elements.

5. CSS Rules Using Class Selectors

A class selector is used to apply styles to HTML elements that have a particular class attribute. Class selectors begin with a dot (.) followed by the class name.

Example:

.highlight {
    color: white;
    background-color: blue;
    padding: 10px;
}

HTML:

<p class="highlight">This paragraph is highlighted.</p>
<h2 class="highlight">This heading is highlighted.</h2>

The same CSS rule can style multiple elements with the highlight class.

6. CSS Rules Using ID Selectors

An ID selector is used to style an HTML element with a specific ID. ID selectors begin with a hash (#) followed by the ID name.

Example:

#header {
    background-color: black;
    color: white;
    padding: 20px;
}

HTML:

<div id="header">
    Welcome to CodingRider
</div>

An ID should be unique within an HTML document.

7. CSS Rules and the Cascade

The cascade is the process browsers use to determine which CSS declarations apply when multiple rules target the same element.

Example:

p {
    color: blue;
}

p {
    color: red;
}

In this example, the paragraph text will be red because both rules have the same specificity, and the later declaration wins.

8. CSS Rules with Comments

You can add comments inside CSS rules to explain your code.

Example:

/* Styling the main heading */
h1 {
    color: blue;
    font-size: 32px;
}

/* Styling the paragraph */
p {
    color: gray;
}

CSS Rules Summary

Conclusion

CSS rules are the foundation of webpage styling. By using selectors, properties, and values, developers can control the appearance of HTML elements and create attractive, responsive websites.

Practice Tasks

1. Create a CSS rule to make all headings blue.
2. Create a class named box and apply a background color to it.
3. Create an ID selector named header and style a header element.
4. Group h1 and h2 selectors and apply the same color.
5. Create two CSS rules for the same paragraph and observe how the cascade works.