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 name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wilster-Ortsschild</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <section id="street-sign-1" class="street-sign">
        <div class="border-container">
            <h1 class="city">Wilster</h1>
            <h2 class="district">Kreis Steinburg</h2>
        </div>
    </section>
    <section id="street-sign-2" class="street-sign">
        <div class="border-container">
            <h1 class="city">Köln</h1>
        </div>
    </section>
</body>
</html>

.street-sign {
    width: 250px; 
    padding: 3px; 
    border-radius: 10px; 
    text-align: center; 
    font-family: sans-serif; 
    background-color:rgb(240,201,0);
}

#street-sign-2.street-sign {
    background-color: red;
}

#street-sign-2 .city {
    font-size: 40px;
    color: white;
    font-weight: 800;
}

#street-sign-2 .border-container {
    border-color: white;
}

.border-container {
    border: 5px solid black;
    border-radius: 10px;
}
.city {
    font-size: 24pt; 
    font-weight: normal;
}

.district {
    font-size: 16pt; 
    font-weight: normal;
}