Un code par yuhhxn

1,275 yuhhxn

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 March 2025

Un code par andrej.social.network

13 January 2026

Modèle HTML de jeu Unity WebGL Swordfight

15 May 2026

Code source HTML5 du jeu Drive Mad

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