Chapter 5: Colors, Backgrounds, and Borders

CSS allows you to add colors, backgrounds, and borders to your elements, which can enhance the visual appeal of your website. In this chapter, we’ll cover the basics of using colors, backgrounds, and borders in CSS to make your webpage more engaging and visually appealing.

Applying Colors to Text and Backgrounds

CSS allows you to apply colors to elements using color names, HEX codes, RGB values, or HSL values. You can also set background colors for any element.

        /* Setting Text Color */
        h1 {
            color: #333333; /* HEX */
        }
        
        p {
            color: rgb(85, 85, 85); /* RGB */
        }
        
        /* Setting Background Color */
        body {
            background-color: #f4f4f4;
        }
        
        div {
            background-color: hsl(210, 50%, 90%); /* HSL */
        }

Using Background Images

CSS allows you to use images as backgrounds, with options for controlling size, position, and repeat behavior. This can be useful for creating visually rich layouts.

        /* Adding a Background Image */
        .hero {
            background-image: url('background.jpg');
            background-size: cover; /* Scales image to cover the element */
            background-position: center; /* Centers the image */
            background-repeat: no-repeat; /* Prevents tiling */
        }

Creating Borders and Rounded Corners

Borders can add definition to elements. You can specify the border’s width, style, and color. CSS also allows you to create rounded corners using the border-radius property.

        /* Basic Border */
        .box {
            border: 2px solid #cccccc; /* Width, Style, Color */
        }
        
        /* Rounded Corners */
        .rounded-box {
            border: 2px solid #333333;
            border-radius: 10px; /* Rounds the corners */
        }
        
        /* Circular Element */
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%; /* Makes a perfect circle */
            background-color: #555555;
        }

Example: Applying Colors, Backgrounds, and Borders

Let’s use these CSS properties to create a styled card with a background color, border, and rounded corners.

        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Styled Card Example</title>
                <link rel="stylesheet" href="styles.css">
            </head>
            <body>
                <div class="card">
                    <h2>Welcome to the Styled Card</h2>
                    <p>This card has a background color, border, and rounded corners.</p>
                </div>
            </body>
        </html>

Experimenting with Colors, Backgrounds, and Borders

Now that you have an understanding of colors, backgrounds, and borders in CSS, try experimenting with these properties to customize your webpage. Play with different color schemes, background images, and border styles to achieve the look you want for your design.