Untitled

avatar
unknown
plain_text
a month ago
3.0 kB
2
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Examples</title>
    <style>
        /* General Styling */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        p {
            margin: 10px 0;
            padding: 10px;
            border-radius: 5px;
            font-size: 16px;
        }

        /* Task 1: Paragraph Alignment */
        .left-align { text-align: left; background-color: #d8f3dc; }
        .right-align { text-align: right; background-color: #fbc4ab; }
        .center-align { text-align: center; background-color: #a0c4ff; }

        /* Task 2: Div Classes */
        .karman {
            background-color: #ffafcc;
            padding: 15px;
            margin: 10px;
            border: 2px solid #ffcad4;
            border-radius: 8px;
        }
        .igloa {
            background-color: #caffbf;
            padding: 15px;
            margin: 10px;
            border: 2px solid #a3d9a5;
            border-radius: 8px;
        }

        /* Task 4: Pseudo-class selectors */
        div:hover {
            background-color: #ffe066;
            transform: scale(1.05);
            transition: 0.3s;
        }

        /* Task 5: Pseudo-elements */
        div::before {
            content: "🔥 ";
        }
        div::after {
            content: " 🔥";
        }

        /* Task 6: IDs Styling */
        #box1 { background-color: #9bf6ff; }
        #box2 { background-color: #ffc6ff; }
        #box3 { background-color: #ffadad; }
        #box4 { background-color: #fdffb6; }

        /* Task 7: Inline Styling (in HTML directly) */

        /* Task 8: Focus and Hover */
        div:focus {
            outline: 3px solid #ff99c8;
        }

        /* Task 11: First-line and First-letter */
        p:first-line {
            font-weight: bold;
            color: #333;
        }
        p:first-letter {
            font-size: 2em;
            color: #ff595e;
        }
    </style>
</head>
<body>
    <h1>CSS Examples</h1>

    <!-- Task 1: Paragraph Alignment -->
    <p class="left-align">This is a left-aligned paragraph.</p>
    <p class="right-align">This is a right-aligned paragraph.</p>
    <p class="center-align">This is a center-aligned paragraph.</p>

    <!-- Task 2: Div Classes -->
    <div class="karman">Div with Karman Class</div>
    <div class="igloa">Div with Igloa Class</div>

    <!-- Task 6: 8 Divs with IDs -->
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>
    <div id="box3">Box 3</div>
    <div id="box4">Box 4</div>

    <!-- Task 7: Inline Styling -->
    <div style="background-color: #ffdab9; padding: 20px; border-radius: 5px;">Inline Styled Div 1</div>
    <div style="background-color: #e6e
Leave a Comment