Stylen von HTML-Elementen mit CSS
CSS steht für Cascading Style Sheets. CSS beschreibt wie HTML-Elemente angezeigt werden auf dem Bildschirm oder auf anderen Medien. CSS spart eine Menge an Arbeit. Über CSS können ganze Layouts von HTML-Seiten gestylt werden. CSS kann HTML-Elementen auf 3 unterschiedliche Weisen hinzugefügt werden:
| Inline | -mit dem Style-Attribut in HTML-Elementen. |
| Intern | -mit einem <style> Element im <head> Bereich. |
| Extern | -mit einer externen CSS-Datei. |
Inline-CSS
Inline-CSS wird ein einzelnes HTML Element gestylt. Mit Inline-CSS wird das Style Attribut in einem HTML-Element verwendet.Intern-CSS
Intern-CSS wird verwendet zur Definition eines Style einer einzelnen HTML-Seite. Ein intern-CSS befindet sich im <head> Bereich einer Webseite, innerhalb des <style> Element.Extern-CSS
Ein Extern Style Sheet wird verwendet zum stylen von mehreren HTML-Seiten. Es können auch mehrere externe Stylesheets verwendet werden. Betreffen mehrere Styles (Style-Kaskade) ein und dasselbe HTML-Element, wird die letzte verwendet. Mit einem Extern Style Sheet kannst du das Design einer ganzen Webseite ändern in einer einzigen Datei! Beim verwenden eines externen Style Sheet füge einen Link im <head> Bereich des HTML-Dokumentes hinzu.Beispiel:
<link rel="stylesheet" href="Deine CSS-Datei.css">
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Page</title> |
| <style> |
| h3 {color: red;} |
| p {color: red;} |
| </style> |
| </head> |
| <body> |
| <h3 style="color:blue;">Das ist eine blaue Überschrift</h3> |
| <h3>Das ist eine Überschrift</h3> |
| <p>Das ist ein Absatz</p> |
| <p style="color:blue;">Das ist eine Überschrift</p> |
| </body> |
| </html> |
Das ist eine blaue Überschrift
Das ist eine Überschrift
Das ist ein Absatz
Das ist eine Überschrift
