Inline-CSS

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

Inline-CSS ist eine Methode, um CSS-Styles direkt zu einem HTML-Element unter Verwendung des style-Attributs hinzuzufügen. Dieser Ansatz ermöglicht es Ihnen, individuelle Styles auf einzelne Elemente anzuwenden, ohne dass externe oder interne Stylesheets erforderlich sind. Inline-Styles sind nützlich, um schnelle, spezifische Style-Änderungen an einem einzelnen Element vorzunehmen.

Hier ist die grundlegende Syntax für die Verwendung von Inline-CSS:

<element style="property: value;"></element>

<element>: Das HTML-Element, das Sie stylen möchten.
style: Ein Attribut, das die CSS-Deklarationen enthält.

property: Die CSS-Eigenschaft, die Sie festlegen möchten (z. B. color, font-size).
value: Der Wert, den Sie für die Eigenschaft festlegen möchten (z. B. blue, 16px).

Zum Beispiel:

<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>

In diesem Beispiel verfügt das Paragraph-Element über Inline-Styles, die die Textfarbe auf Blau und die Schriftgröße auf 16 Pixel festlegen. Diese Styles werden nur auf dieses spezifische Paragraph-Element angewendet.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit einem Absatzelement gegeben. Verwenden Sie Inline-CSS, um den Absatz mit den folgenden Eigenschaften zu gestalten:

Setzen Sie die Textfarbe auf red.
Setzen Sie die Schriftgröße auf 18 pixels.

Schauen Sie sich das Beispiel in der Lektion an, um eine Orientierung zu erhalten!

Spickzettel

Verwenden Sie das style-Attribut, um CSS direkt auf HTML-Elemente anzuwenden:

<element style="property: value;"></element>

Beispiel mit mehreren Eigenschaften:

<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS</title>
</head>
<body>
    <p>This is a paragraph.</p>
</body>
</html>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Styling with CSS

1Einführung

Was ist CSS?CSS-Syntax CSS-Kommentare Das Head-Tag Das Title-Tag

4Text-Grundlagen

Textfarbe Schriftfamilie Schriftgröße Schriftstärke Textausrichtung Textdekoration Wiederholungs-Challenge #1 Wiederholungs-Challenge #2

7Box-Modell Teil 1

Was ist das Box-Modell?Padding Margins Borders Breite und Höhe Wiederholungs-Challenge

10Login-Formular

Body Formular-Container

Eingabefeld

Button

13Tonga Webseite

Navigationsmenü Willkommens-Header

2CSS hinzufügen

Inline-CSSInternes CSS Externes CSS Grundlagen-Styling-Challenge

5Farben und Hintergründe

Hintergrundfarbe HEX-Farben RGB-Farben Transparenz mit RGBA Wiederholungs-Challenge #1

8Box-Modell Teil 2

Box-Sizing Border-Radius Overflow Box-Shadow Recap-Challenge

11Layout-Techniken

Block- vs. Inline-Elemente Grundlagen der Positionierung Relative Positionierung Absolute Positionierung Fixierte Positionierung Z-Index Grundlagen Wiederholungs-Challenge

14Abschluss-Herausforderungen

Elemente anordnen Filmliste Hochzeitseinladung Schwebende Benachrichtigung

3Grundlegende Selektoren

Einführung in Selektoren Typ-Selektor Klassen-Selektor ID-Selektor Gruppen-Selektoren Universal-Selektor Selektions-Herausforderung

6Café-Menü

Typografie-Grundlagen Text-Styling

Farben und Hintergründe

9Flexbox

Was ist Flexbox?Flex Direction Justify Content Align Items Die perfekte Zentrierung Flexbox-Herausforderung

12Grundlagen des Responsive Designs

Was ist Responsive Design?Viewport Meta Tag Fluid Layouts Viewport-Einheiten Media Queries Grundlagen Flexible Bilder