Un codice di yuhhxn

670 yuhhxn

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

13 October 2024

Esempio di animazione di frammenti CSS

7 October 2024

numeri cardinali

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>

Un codice di yuhhxn

Consigliato

i miei social media

Esempio di animazione di frammenti CSS

numeri cardinali

HTML

CSS

JS

Consigliato

i miei social media

Esempio di animazione di frammenti CSS

numeri cardinali

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS