Un code par yuhhxn

999 yuhhxn

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

9 July 2025

Iframe réactif avec navigation d'aperçu de l'appareil

22 July 2025

Page de destination du Samsung Galaxy S24 Ultra

13 June 2025

Un code de Metehan

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>

Recommandé

Iframe réactif avec navigation d'aperçu de l'appareil

Page de destination du Samsung Galaxy S24 Ultra

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS