CSS Properties Overview

CSS (Cascading Style Sheets) is used to style HTML elements and control the layout of web pages. CSS properties define how elements appear, including colors, fonts, spacing, and positioning.

Basic CSS Syntax

CSS rules consist of a selector and a declaration block. A declaration block contains one or more properties and values.

selector {
    property: value;
}

Example:

p {
    color: blue;
    font-size: 16px;
}

Commonly Used CSS Properties

1. Color and Background

These properties control text and background colors.

body {
    background-color: lightgray;
}

h1 {
    color: darkblue;
}

2. Fonts and Text Styling

These properties define the font style, size, weight, and spacing.

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}

3. Margins and Padding

These properties control spacing outside (margin) and inside (padding) an element.

div {
    margin: 20px;
    padding: 10px;
    border: 1px solid black;
}

4. Borders and Box Shadow

These properties define borders and shadows for elements.

.box {
    border: 2px solid red;
    border-radius: 10px;
    box-shadow: 5px 5px 10px gray;
}

5. Width, Height, and Display

These properties define element dimensions and layout.

.container {
    width: 80%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

6. Positioning Elements

CSS provides different positioning methods.

.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}

.absolute-box {
    position: absolute;
    top: 50px;
    left: 210px;
}

Practical Example

Here is a complete example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Properties & Styling Techniques</title>
    <style>
        /* Basic CSS styling examples */
        body {
            background-color: lightgray;
        }
        h1 {
            color: darkblue;
        }
        p {
            font-family: Arial, sans-serif;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            text-decoration: underline;
        }
        /* Margins and padding example */
        div {
            margin: 20px;
            padding: 10px;
            border: 1px solid black;
        }
        /* Borders and shadow example */
        .box {
            border: 2px solid red;
            border-radius: 10px;
            box-shadow: 5px 5px 10px gray;
        }
        /* Width, height, and display example */
        .container {
            width: 80%;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* Positioning example */
        .relative-box {
            position: relative;
            top: 10px;
            left: 20px;
        }
        .absolute-box {
            position: absolute;
            top: 50px;
            left: 100px;
        }
    </style>
</head>
<body>
    <h2>CSS Properties and Styling Techniques</h2>

    <!-- Color and background example -->
    <h1>Styled Heading</h1>
    <p>Styled paragraph with underline.</p>

    <!-- Margins and padding example -->
    <div>This is a box with margin, padding, and border.</div>

    <!-- Border and shadow example -->
    <div class="box">This is a box with border and shadow.</div>

    <!-- Width, height, and display example -->
    <div class="container">Centered content</div>

    <!-- Positioning example -->
    <div class="relative-box">Relatively positioned box</div>
    <div class="absolute-box">Absolutely positioned box</div>
</body>
</html>

Try It Now

Conclusion

These are some essential CSS properties to start styling web pages effectively. Learning how to combine them will help you create visually appealing websites.