Webleb - UI Elements - A Code by yuhhxn

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Editor Example</title>

<style>
        /* General body styling */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
        }

/* Styling for headings */
        h1 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }

h2 {
            color: #34495e;
        }

/* Styling for paragraphs */
        p {
            line-height: 1.6;
            margin-bottom: 15px;
        }

/* Styling for a custom class */
        .highlight-box {
            background-color: #ecf0f1;
            border: 1px solid #ccc;
            padding: 15px;
            margin-top: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

/* Styling for a button with an ID */
        #main-button {
            background-color: #3498db;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

#main-button:hover {
            background-color: #2980b9;
        }
    </style>

</head>
<body>

<h1>Welcome to the CSS Editor Example</h1>

<p>
        This page demonstrates how CSS (Cascading Style Sheets) is used to style HTML content.
        CSS separates the presentation of a document from its structure.
    </p>

<h2>Understanding CSS Inclusion Methods</h2>

<div class="highlight-box">
        <h3>Internal CSS Applied Here</h3>
        <p>
            This entire box is styled using the <code>.highlight-box</code> class defined in the <code><style></code>
            tags within the <code><head></code> section of this HTML document.
        </p>
        <button id="main-button">Click Me (Styled by ID)</button>
    </div>

<p style="color: #e74c3c; font-weight: bold; margin-top: 25px;">
        This paragraph has inline CSS applied directly to its tag. While convenient for quick tests,
        it is generally not recommended for large projects as it mixes content with presentation
        and makes maintenance difficult.
    </p>

<p>
        Explore the HTML source code to see how the CSS rules are linked and applied to different elements.
        You can modify the internal CSS in the <code><style></code> block to see immediate changes.
    </p>

</body>
</html>

CSS

JS

A Code by yuhhxn

Recommended