CSS - erste Schritte

Cascading Style Sheets (CSS)

Stylesheets (Formatvorlagen) dienen der einheitlichen und praktikablen Gestaltung von HTML-Seiten. Mit Hilfe von Stylesheets lassen sich Schriftarten, Farben, Hintergründe, […], global für ein HTML-Dokument oder eine Sammlung von HTML-Dokumenten definieren. Um Formatvorlagen zu definieren, bieten sich drei Möglichkeiten an: Inline-Styles, Stylesheets im Dokumentkopf und externe Stylesheets in einer separaten .css Datei.

Inline-Style:

Die einfachste Möglichkeit, die Darstellung eines Tags zu beeinflussen: Das style-Attribut wird in das Tag eingefügt: <h1 style="font-family: Arial; color: blue;">Diese Überschrift wird in der Schriftart Arial und blau dargestellt</h1>

Stylesheetdefinition im HTML-Dokument:

Die im Dokumentkopf definierten Stile haben Auswirkung auf Darstellung und Verhalten aller Tags des HTML-Dokumentes.
<style type="text/css">

h1 { color: red; font-family: Arial; }

h1:hover { color: blue; }

</style>

<h1>Diese Überschrift wird in der Schriftart Arial und rot dargestellt</h1>

Inline-Styles

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wilster-Ortsschild</title>
</head>
<body>
    <section style="width: 250px; padding: 3px; border-radius: 10px; text-align: center; font-family: sans-serif; background-color:rgb(240,201,0);">
        <div style="border: 5px solid black; border-radius: 10px;">
            <h1 style="font-size: 24pt; font-weight: normal;">Wilster</h1>
            <h2 style="font-size: 16pt; font-weight: normal;">Kreis Steinburg</h2>
        </div>
    </section>
</body>
</html>

Wilster

Kreis Steinburg

CSS in Datei auslagern

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/style.css">
    <title>Wilster</title>
</head>
<body>
    <div class="ortsschild">
        <div class="ortsschild__border">
            <h1 class="ortsschild__stadt">Wilster</h1>
            <h2 class="ortsschild__kreis">Kreis Steinburg</h2>
        </div>
    </div>

    <div class="ortsschild">
        <div class="ortsschild__border">
            <h1 class="ortsschild__stadt">Köln</h1>
        </div>
    </div>
</body>
</html>

.ortsschild {
    background-color: rgb(199,168,14);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    width: 470px;
    padding: 10px;
    border-radius: 20px;
    margin-bottom: 30px;
}
    
.ortsschild__border {
    border: 10px solid black;
    border-radius: 20px;
}

.ortsschild__stadt {
    font-size: 80pt;
}

.ortsschild__kreis {
    font-size: 40pt;
}