CSS Code-Challenge: Blogartikel stylen

Wie funktioniert diese Challenge?

Diese Coding-Challenge besteht aus 4 verschiedenen Aufgaben.
Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.

Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.

Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉

Starten wir mit der ersten Aufgabe:

1. body-Element selektieren und stylen

Selektiere das Body-Element und gib diesem folgende Eigenschaft und Wert: font-family: Arial, sans-serif;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

body {
  font-family: Arial, sans-serif;
}

[/lp_spoiler]

2. p-Element selektieren und stylen

Selektiere das p-Element und gib diesem folgende Eigenschaft und Wert: color: darkgrey;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

p {
  color: darkgrey;
}

[/lp_spoiler]

3. Klasse selektieren und stylen

Selektiere die ort-Klasse und gib dieser folgende Eigenschaft und Wert: text-decoration : underline;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

.ort {
  text-decoration : underline;
}

[/lp_spoiler]

4. Element mit ID selektieren und stylen

Selektiere das Element mit der ID ende

Gib diesem Element folgende Eigenschaft und Wert:

font-style : italic; font-weight : bold;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

#ende {
  font-style : italic;
  font-weight : bold;
}

[/lp_spoiler]

Komplettlösung:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

&lt;!DOCTYPE html&gt;
&lt;html lang="de"&gt;

&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;style&gt;
        body {
            font-family: Arial, sans-serif;
        }

        p {
            color: darkgrey;
        }

        .ort {
            text-decoration: underline;
        }

        #ende {
            font-style: italic;
            font-weight: bold;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;Meine Reise in die USA&lt;/h1&gt;

    &lt;h2&gt;Bald geht es los!&lt;/h2&gt;

    &lt;p&gt;USA! USA! USA! Soviel Vorfreude hatte ich noch nie.
        Morgen um &lt;i&gt;6:53 Uhr&lt;/i&gt; geht der Flieger von &lt;span class="ort"&gt;Berlin&lt;/span&gt; nach &lt;span
            class="ort"&gt;Atlanta&lt;/span&gt;. So früh aufstehen wird der &lt;i&gt;Horror&lt;/i&gt;.
        Dort haben wir eine Zwischenlandung und ca. 3 Stunden Aufenthalt, gut um sich nach dem langen Flug etwas zu
        bewegen.
    &lt;p&gt;

    &lt;h3&gt;Der Plan&lt;/h3&gt;
    &lt;p&gt;Dann geht es weiter nach &lt;span class="ort"&gt;Los Angeles&lt;/span&gt;. 3 Tage alles anschauen, was wir in der Zeit
        erreichen können. &lt;/p&gt;
    &lt;p&gt;Danach geht es noch an folgende Punkte:&lt;/p&gt;
    &lt;ol&gt;
        &lt;li class="ort"&gt;San Francisco&lt;/li&gt;
        &lt;li class="ort"&gt;Las Vegas&lt;/li&gt;
        &lt;li class="ort"&gt;Rocky Mountains&lt;/li&gt;
    &lt;/ol&gt;

    &lt;h3&gt;Die Unterbringung&lt;/h3&gt;
    &lt;p&gt;Für die ersten Tage haben haben wir ein kleines Apartement gemietet, in dem wir übernachten werden.&lt;/p&gt;
    &lt;p&gt;Danach geht es mit einem gemieteten Wohnwagen weiter.&lt;/p&gt;

    &lt;p&gt;Sobald ich da bin, werde ich euch Bilder zeigen und mehr erzählen!&lt;/p&gt;
    &lt;p id="ende"&gt;Bis bald!&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;

[/lp_spoiler]

CSS Code-Challenge: Blogartikel stylen

Wie funktioniert diese Challenge?

1. body-Element selektieren und stylen

2. p-Element selektieren und stylen

3. Klasse selektieren und stylen

4. Element mit ID selektieren und stylen

CSS Schnellstart – Modul 1 – CSS Grundlagen einfach verstehen