CSS Basics

CSS Syntax

CSS uses a straightforward syntax to apply styles to HTML elements. You select an HTML element and then define the style properties you want to apply to it. Here's an example of CSS syntax:

selector {
    property: value;
}

Selector: Identifies the HTML element(s) to which you want to apply styles.
Property: Specifies the style property you want to modify (e.g., color, font-size, margin).
Value: Defines the value you want to set for the property (e.g., red, 16px, 10px 20px).

CSS Styles

Let's explore some common CSS styles you can apply:

Text Color:

p {
    color: blue;
}

This sets the text color of all <p> elements to blue.

Font Size:

h1 {
    font-size: 24px;
}

This increases the font size of all <h1> headings to 24 pixels.

Margins and Padding:

div {
    margin: 10px;
    padding: 20px;
}

This adds a 10-pixel margin and 20-pixel padding to all <div> elements.

CSS Classes and IDs

You can also target specific HTML elements using classes and IDs. Classes are used for multiple elements, while IDs are unique to a single element. Here's an example:

<p class="highlighted">This is a highlighted paragraph.</p>
<p id="special">This is a special paragraph.</p>

.highlighted {
    background-color: yellow;
}
 
#special {
    font-weight: bold;
}

In this example, the .highlighted class applies a yellow background color, and the #special ID sets the font weight to bold.

Practice Exercise

Now that you've learned the basics of CSS, let's practice. Create an HTML file with some elements (e.g., headings, paragraphs) and apply CSS styles to them. Change text colors, font sizes, and backgrounds to get a feel for CSS in action.

Here is the combination of the previous chapter html and this css

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
    <style>
        /* CSS styles go here */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
 
        h1 {
            font-size: 24px;
            font-weight: bold; /* Added font-weight */
            color: #333;
            text-align: center;
        }
 
        p {
            font-size: 18px;
            color: blue; /* Changed text color */
            text-align: center;
        }
 
        a {
            display: block;
            text-align: center;
            margin-top: 20px;
            font-weight: bold;
            text-decoration: none;
            color: #0073e6;
        }
 
        /* New CSS styles */
        .highlighted {
            background-color: yellow;
        }
 
        #special {
            font-weight: bold;
        }
 
        div {
            margin: 10px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p class="highlighted">This is a paragraph of text.</p>
    <div>
        <p id="special">This paragraph has special styling.</p>
        <a href="https://www.example.com">Visit Example.com</a>
    </div>
</body>
</html>