Textfarbe
Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 17 von 76.
In CSS wird die color-Eigenschaft verwendet, um die Farbe des Textes innerhalb eines Elements festzulegen. Sie können verschiedene Farbwerte auf Text anwenden, um das Erscheinungsbild Ihrer Webseite zu verbessern.
selector {
color: value;
}Zum Beispiel:
h3{
color: purple;
}
Aufgabe
EinfachSie erhalten ein HTML-Dokument mit einer Überschrift (<h1>) und einem Absatz (<p>). Ihre Aufgabe ist es, die Eigenschaft color zu verwenden, um diese Elemente zu gestalten. Befolgen Sie die folgenden Schritte:
- Schreiben Sie eine CSS-Regel, die auf das
<h1>-Element abzielt. Setzen Sie diecoloraufpurple. - Schreiben Sie eine CSS-Regel, die auf das
<p>-Element abzielt. Setzen Sie diecoloraufyellow.
Spickzettel
Die color-Eigenschaft legt die Farbe des Textes innerhalb eines Elements fest:
selector {
color: value;
}Beispiel:
h3 {
color: purple;
}Probier es selbst
<html>
<head>
<title>Text Color</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Styling with CSS
4Text-Grundlagen
TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungs-Challenge #1Wiederholungs-Challenge #2
5Farben und Hintergründe
HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #111Layout-Techniken
Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungZ-Index GrundlagenWiederholungs-Challenge14Abschluss-Herausforderungen
Elemente anordnenFilmlisteHochzeitseinladungSchwebende Benachrichtigung3Grundlegende Selektoren
Einführung in SelektorenTyp-SelektorKlassen-SelektorID-SelektorGruppen-SelektorenUniversal-SelektorSelektions-Herausforderung9Flexbox
Was ist Flexbox?Flex DirectionJustify ContentAlign ItemsDie perfekte ZentrierungFlexbox-Herausforderung12Grundlagen des Responsive Designs
Was ist Responsive Design?Viewport Meta TagFluid LayoutsViewport-EinheitenMedia Queries GrundlagenFlexible Bilder