Un code par yuhhxn

1,091 yuhhxn

Ouvrir dans l'éditeur Publiez votre code

Recommandé

11 February 2026

Jeu HTML5 Friday Night Funkin' Psych Engine

12 January 2025

Un code de Mikeykun

12 March 2026

Épeler avec Flickr : Générateur de texte à partir d’images

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