Day 3: CSS - Colors, Backgrounds, Borders, Margins, and Paddings

NiLBiTE Web Development Course

Day 3: CSS - Colors, Backgrounds, Borders, Margins, and Paddings

CSS: Colors, Backgrounds, Borders, Margins, and Paddings

CSS Colors

CSS allows you to set the color of text and other elements using the color property.


p {
    color: blue;
}

Colors can be specified by name, hex value, rgb value, or other methods.


p {
    color: #ff0000; /* Hex */
    color: rgb(255, 0, 0); /* RGB */
    color: red; /* Name */
}

CSS Backgrounds

Background properties allow you to set the background color or image for an element.


body {
    background-color: #f0f0f0;
}

You can also set background images:


body {
    background-image: url('path/to/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

CSS Borders

Borders can be added to elements using the border property.


p {
    border: 1px solid black;
}

You can specify border width, style, and color.


p {
    border-width: 2px;
    border-style: dashed;
    border-color: blue;
}

CSS Margins

Margins are used to create space around elements, outside of any defined borders.


p {
    margin: 20px;
}

Margins can be set for each side individually:


p {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
}

CSS Paddings

Paddings are used to create space around an element's content, inside of any defined borders.


p {
    padding: 20px;
}

Paddings can also be set for each side individually:


p {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
}

Put It Together

Let's combine what we've learned about colors, backgrounds, borders, margins, and paddings into a single example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Example</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .container {
            background-color: #fff;
            padding: 20px;
            margin: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }

        h1 {
            color: #007bff;
            text-align: center;
        }

        p {
            color: #333;
            border: 1px solid #007bff;
            padding: 10px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to CSS Styling</h1>
        <p>This is a paragraph with a border, padding, and margin.</p>
        <p>Here's another paragraph with the same styles applied.</p>
    </div>
</body>
</html>

Result of this code

Summary

Today, we've covered:

CSS Colors: Learned how to set colors for text and other elements using the color property.
CSS Backgrounds: Learned how to set background colors and images using the background-color and background-image properties.
CSS Borders: Learned how to add borders to elements using the border property.
CSS Margins: Learned how to create space around elements using the margin property.
CSS Paddings: Learned how to create space around an element's content using the padding property.

Practice Exercise

Try creating a simple webpage that includes the following:

A paragraph with a border.
A div with a background image.
Two paragraphs with different margin and padding settings.
Use CSS to style your webpage with the following:
- Set the background color of the body to light gray.
- Set the text color of all paragraphs to blue.
- Add a border to one of the paragraphs.

Module -1 | Day 3

NiLBiTE Web Development Course

Day 3: CSS - Colors, Backgrounds, Borders, Margins, and Paddings

CSS: Colors, Backgrounds, Borders, Margins, and Paddings

CSS Colors

CSS Backgrounds

CSS Borders

CSS Margins

CSS Paddings

Put It Together

Result of this code

Summary

Practice Exercise

Here is a sample project

Preview of this project