HTML Stylings

HTML Stylings

HTML Stylings

Explore the diverse range of styling techniques in HTML and CSS to create visually stunning and engaging web pages!

Basic Styling Techniques

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

    p {
        color: blue;
        font-size: 18px;
        background-color: lightgray;
        padding: 10px;

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.

    .box {
        width: 200px;
        height: 100px;
        border: 2px solid black;
        padding: 20px;
        margin: 10px;

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

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

This is a box element.

Layout and Positioning

This example demonstrates layout and positioning using flexbox.

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
    .item {
        flex: 1;
        text-align: center;

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

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

Item 1
Item 2
Item 3


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

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

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

The heading is styled according to the specified styles.

This is a styled heading.

Practice Your CSS Skills

Enhance your web design skills with HTML and CSS. Let your creativity shine and build captivating web experiences!

© 2023 Your Website. All rights reserved.