Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Features Demonstration</title>
    <style>
        /* 2) Alignment for paragraphs */
        .left-align {
            text-align: left;
        }
        .right-align {
            text-align: right;
        }
        .center-align {
            text-align: center;
        }

        /* 3) Classes for divs */
        .kar {
            background-color: lightblue;
            padding: 10px;
            margin: 5px;
        }
        .man {
            background-color: lightgreen;
            padding: 10px;
            margin: 5px;
        }
        .igloa {
            background-color: lightcoral;
            padding: 10px;
            margin: 5px;
        }

        /* 4) Pseudo-class selectors */
        div:hover {
            background-color: yellow;
        }
        div:focus {
            outline: 2px solid blue;
        }

        /* 5) Pseudo-element selectors */
        p::before {
            content: "Before: ";
            color: red;
        }
        p::after {
            content: " :After";
            color: blue;
        }

        /* 6) IDs for specific divs */
        #div1 { background-color: red; padding: 10px; }
        #div2 { background-color: green; padding: 10px; }
        #div3 { background-color: blue; padding: 10px; }
        #div4 { background-color: yellow; padding: 10px; }
        #div5 { background-color: orange; padding: 10px; }
        #div6 { background-color: purple; padding: 10px; }
        #div7 { background-color: pink; padding: 10px; }
        #div8 { background-color: brown; padding: 10px; }

        /* 9) Focus and hover */
        input:focus {
            border: 2px solid green;
        }
        button:hover {
            background-color: lightblue;
        }

        /* 10) Before and after */
        h1::before {
            content: "Start: ";
        }
        h1::after {
            content: " :End";
        }

        /* 11) First-line and first-letter */
        p::first-line {
            font-weight: bold;
            color: blue;
        }
        p::first-letter {
            font-size: 2em;
            color: red;
        }

        /* 12) Selection and marker */
        ::selection {
            background-color: yellow;
            color: black;
        }
        ::marker {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>CSS Features Demonstration</h1>

    <!-- 2) Paragraph alignments -->
    <p class="left-align">This is left-aligned text.</p>
    <p class="right-align">This is right-aligned text.</p>
    <p class="center-align">This is center-aligned text.</p>

    <!-- 3) Classes applied to divs -->
    <div class="kar">Styled with class "kar".</div>
    <div class="man">Styled with class "man".</div>
    <div class="igloa">Styled with class "igloa".</div>
    <div class="kar">Another "kar" styled div.</div>
    <div class="man">Another "man" styled div.</div>
    <div class="igloa">Another "igloa" styled div.</div>

    <!-- 4) Pseudo-class -->
    <div tabindex="0">Hover or focus on me.</div>

    <!-- 5) Pseudo-element -->
    <p>This is a paragraph with pseudo-elements.</p>

    <!-- 6) IDs for divs -->
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3">Div 3</div>
    <div id="div4">Div 4</div>
    <div id="div5">Div 5</div>
    <div id="div6">Div 6</div>
    <div id="div7">Div 7</div>
    <div id="div8">Div 8</div>

    <!-- 7) Inline styling -->
    <div style="color: red; font-size: 20px;">Div 1 with inline style.</div>
    <div style="color: blue; font-size: 18px;">Div 2 with inline style.</div>
    <div style="color: green; font-size: 22px;">Div 3 with inline style.</div>
    <div style="color: orange; font-size: 24px;">Div 4 with inline style.</div>

    <!-- 9) Focus and hover -->
    <input type="text" placeholder="Focus on me">
    <button>Hover over me</button>

    <!-- 10) Before and after -->
    <h1>This is a heading</h1>

    <!-- 11) First-line and first-letter -->
    <p>This is a paragraph demonstrating first-line and first-letter styling.</p>

    <!-- 12) Selection and marker -->
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <p>Try selecting this text to see the selection effect.</p>
</body>
</html>
Editor is loading...