Menu
Coddy logo textTech
JETZT LERNEN
flag De iconDeutschdown icon

Grundlagen-Styling-Challenge

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 9 von 76.

challenge icon

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit einer Überschrift (<h1>) und einem Absatz (<p>) gegeben. Deine Aufgabe ist es, diese Elemente mit einer Kombination aus Inline-, internem und externem CSS zu gestalten. Folge den unten stehenden Schritten:

  1. Verwende inline CSS, um die Textfarbe der <h1> Überschrift auf blue zu ändern.
  2. Verwende internal CSS, um die Hintergrundfarbe des body auf lightgray und die Schriftgröße des Absatzes (<p>) auf 16px zu ändern.
  3. Verwende die gegebene external CSS Datei namens styles.css, um die Textfarbe des Absatzes (<p>) auf red zu ändern.
  4. Verknüpfe die externe CSS-Datei mit dem HTML-Dokument unter Verwendung des <link> Tags.

Probier es selbst

<html>
<head>
    <title>Basic Styling Challenge</title>
    <style>
        body {
            background-color: white;
        }
        p {
            font-size: 12px;
        }
    </style>
    <!-- Link zur externen CSS-Datei hier -->
</head>
<body>
    <h1 style="color: red;">This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Alle Lektionen in Styling with CSS

1Einführung

Was ist CSS?CSS-SyntaxCSS-KommentareDas Head-TagDas Title-Tag

4Text-Grundlagen

TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungs-Challenge #1Wiederholungs-Challenge #2

7Box-Modell Teil 1

Was ist das Box-Modell?PaddingMarginsBordersBreite und HöheWiederholungs-Challenge

10Login-Formular

BodyFormular-ContainerProjekt-LektionEingabefeldProjekt-LektionButtonProjekt-Lektion

13Tonga Webseite

NavigationsmenüWillkommens-HeaderProjekt-LektionÜber-uns-BereichProjekt-LektionKontakt-BereichProjekt-LektionViewport-TagProjekt-LektionMedia QueryProjekt-Lektion

2CSS hinzufügen

Inline-CSSInternes CSSExternes CSSGrundlagen-Styling-Challenge

5Farben und Hintergründe

HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #1

8Box-Modell Teil 2

Box-SizingBorder-RadiusOverflowBox-ShadowRecap-Challenge

11Layout-Techniken

Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungZ-Index GrundlagenWiederholungs-Challenge

14Abschluss-Herausforderungen

Elemente anordnenFilmlisteHochzeitseinladungSchwebende Benachrichtigung

3Grundlegende Selektoren

Einführung in SelektorenTyp-SelektorKlassen-SelektorID-SelektorGruppen-SelektorenUniversal-SelektorSelektions-Herausforderung

6Café-Menü

Typografie-GrundlagenText-StylingProjekt-LektionFarben und HintergründeProjekt-Lektion

9Flexbox

Was ist Flexbox?Flex DirectionJustify ContentAlign ItemsDie perfekte ZentrierungFlexbox-Herausforderung

12Grundlagen des Responsive Designs

Was ist Responsive Design?Viewport Meta TagFluid LayoutsViewport-EinheitenMedia Queries GrundlagenFlexible Bilder