Module 2:2 CSS- Understanding syntax

Understanding CSS Syntax

CSS (Cascading Style Sheets) is used to style and layout web pages. It allows you to apply styles to HTML elements and control their appearance. Here, we'll cover the basics of CSS syntax and provide solved examples to help you understand how to use CSS effectively.

CSS Rule Set

A CSS rule set consists of a selector and a declaration block. The selector targets the HTML element you want to style, and the declaration block contains the style properties and values.

Example: CSS Rule Set

            selector {
                property: value;
                property: value;
            }
        

Selectors

Selectors are used to select the HTML elements you want to style. Common selectors include:

• Element Selector: Selects all elements of a specified type. p { ... }
• ID Selector: Selects an element with a specific id. #id { ... }
• Class Selector: Selects all elements with a specific class. .class { ... }
• Attribute Selector: Selects elements with a specific attribute. [attribute] { ... }

Example: Different Selectors

            /* Element selector */
            p {
                color: blue;
            }

            /* ID selector */
            #header {
                background-color: yellow;
            }

            /* Class selector */
            .highlight {
                font-weight: bold;
            }

            /* Attribute selector */
            [type="text"] {
                border: 1px solid #ccc;
            }
        

Properties and Values

CSS properties are the aspects of the elements you want to style, such as color, font, and layout. Each property is followed by a colon and then the value.

Example: CSS Properties and Values

            p {
                color: green;
                font-size: 16px;
                line-height: 1.5;
            }
        

Grouping Selectors

You can group selectors that share the same style rules to reduce redundancy.

Example: Grouping Selectors

            h1, h2, h3 {
                color: #333;
                font-family: 'Arial', sans-serif;
            }
        

Combining Selectors

You can combine selectors to apply styles to elements based on their relationship to other elements.

• Descendant Selector: Selects elements that are descendants of another element. div p { ... }
• Child Selector: Selects elements that are direct children of another element. ul > li { ... }
• Adjacent Sibling Selector: Selects an element that is the adjacent sibling of another element. h1 + p { ... }
• General Sibling Selector: Selects all siblings of an element. h1 ~ p { ... }

Example: Combining Selectors

            /* Descendant selector */
            div p {
                color: red;
            }

            /* Child selector */
            ul > li {
                list-style-type: none;
            }

            /* Adjacent sibling selector */
            h1 + p {
                margin-top: 0;
            }

            /* General sibling selector */
            h1 ~ p {
                color: blue;
            }
        

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are used to style elements based on their state or position in the document.

• Pseudo-classes: Apply styles to elements in a specific state. a:hover { ... }
• Pseudo-elements: Apply styles to a specific part of an element. p::first-line { ... }

Example: Pseudo-classes and Pseudo-elements

            /* Pseudo-class */
            a:hover {
                color: red;
            }

            /* Pseudo-element */
            p::first-line {
                font-weight: bold;
            }
        

Comments

Comments are used to explain your code and are ignored by browsers. In CSS, comments are placed between /* */.

Example: CSS Comments

            /* This is a single-line comment */

            /*
                This is a
                multi-line comment
            */
        

Example: Styling a Web Page

Let's put everything together and style a simple web page.

Example: Complete CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Web Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #555;
        }
        .highlight {
            background-color: yellow;
        }
        a:hover {
            color: red;
        }
        p::first-line {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p class="highlight">This is an example of a paragraph with highlighted text.</p>
    <p>Hover over this <a href="#">link</a> to see the effect.</p>
</body>
</html>