Wenn du CSS in HTML einfügen willst dann geht das ganz schnell un unkompliziert. Dafür hast du wieder zwei Möglichkeiten. Entweder du fügst den CSS Code direkt in dein HTML Dokument ein oder du erstellst eine extra style.css Datei die du dann in deine HTML Seite einfügen kannst.
Stelle deine HTML oder CSS Frage in unserem Forum kostenlos!
CSS Code in HTML einfügen
Mit der ersten Möglichkeit kannst du einfach den CSS Code in den Head Bereich deiner HTML Datei einfügen. So sieht das in dem folgenden Beispiel aus.
<!DOCTYPE html>
<html>
<head>
<style>
p {color:blue; font-size:14px;}
</style>
</head>
<p>Beispieltext mit CSS</p>
<body>Ergebnis
Beispieltext mit CSS
Externe CSS Datei in HTML einfügen
Einfach ist es eine neue Datei mit dem Namen style.css zu erstellen. Hier kommen dann alle deine CSS Codes hinein. Diese brauchst du dann nur noch in den Header Bereich deiner Webseite einbinden. Das sieht dann so aus.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
Fazit
Es gibt zwei Möglichkeiten, CSS-Code in HTML einzubinden: Inline und extern.
Inline-Stile werden mit dem style-Attribut direkt zu den HTML-Elementen selbst hinzugefügt. Externe Stile werden in separaten CSS-Dateien gespeichert und dann mit dem HTML-Code verlinkt.
Beide Methoden haben ihre eigenen Vor- und Nachteile. Im Allgemeinen eignen sich Inline-Stile am besten für kleine Änderungen, während externe Stile besser für größere Projekte geeignet sind. Egal für welche Methode du dich entscheidest, achte auf die richtige Syntax und Einrückung, damit dein Code leicht zu lesen und zu verstehen ist.
Mit ein bisschen Übung wirst du CSS im Handumdrehen wie ein Profi einbetten können!
