Basic Styling Techniques

This example demonstrates basic CSS styling applied to paragraphs (<p> elements).

<style>
    p {
        color: blue;
        font-size: 18px;
        background-color: lightgray;
        padding: 10px;
    }
</style>

These styles enhance the visual appearance of paragraphs by changing their text color, font size, and background color.

This is a paragraph with some text.

CSS Box Model

This example illustrates the CSS box model by styling a <div> element with a class of .box.

<style>
    .box {
        width: 200px;
        height: 100px;
        border: 2px solid black;
        padding: 20px;
        margin: 10px;
    }
</style>

<div class="box">
    This is a box element.
</div>

The box model defines the dimensions, border, padding, and margin of the box element, showcasing how content is displayed within the box.

Layout and Positioning

This example demonstrates layout and positioning using flexbox.

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
    }
    .item {
        flex: 1;
        text-align: center;
    }
</style>

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

This layout positions three items horizontally centered within a flex container, showcasing the use of flexbox for layout purposes.

Typography

This example showcases typography styling for headings (<h1> elements) using CSS.

<style>
    .heading {
        font-family: 'Arial', sans-serif;
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }
</style>

<h1 class="heading">This is a styled heading.</h1>

The heading is styled according to the specified styles.

This is a styled heading.