CSS3 Essentials

Key Concepts

• Selectors and Combinators
• Box Model
• Flexbox Layout

Selectors and Combinators

CSS selectors are patterns used to select the elements you want to style. Combinators are special characters that define the relationship between selectors. For example, the descendant combinator (space) selects elements that are descendants of another element, while the child combinator (>) selects direct children.

Example:

        <style>
            div p {
                color: blue;
            }
            div > p {
                font-weight: bold;
            }
        </style>
        <div>
            <p>This text is blue and bold.</p>
            <div>
                <p>This text is only blue.</p>
            </div>
        </div>
    

Box Model

The CSS box model is a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. The content area contains the "real" content, such as text or an image. Padding is the space between the content and the border. The border goes around the padding and content. Margins are the outermost layer, clearing an area outside the border.

Example:

        <style>
            .box {
                width: 300px;
                border: 15px solid green;
                padding: 50px;
                margin: 20px;
            }
        </style>
        <div class="box">
            This is the content of the box.
        </div>
    

Flexbox Layout

Flexbox is a layout model that allows elements to align and distribute space within a container. It is useful for creating responsive designs. The main axis is the primary axis along which flex items are laid out, and the cross axis is perpendicular to it. Flexbox properties include flex-direction, justify-content, align-items, and flex-wrap.

Example:

        <style>
            .flex-container {
                display: flex;
                justify-content: space-around;
                align-items: center;
                height: 200px;
                background-color: lightblue;
            }
            .flex-container > div {
                background-color: #f1f1f1;
                width: 100px;
                margin: 10px;
                text-align: center;
                line-height: 75px;
                font-size: 30px;
            }
        </style>
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>