Cascading Style Sheets, allgemein bekannt als CSS, bieten Webentwicklern die Möglichkeit, Webseiten nach ihren Wünschen zu gestalten. Einfache HTML-Seiten ohne ein in CSS definiertes Stilformat würden für den Endbenutzer sehr hässlich und langweilig erscheinen. Daher ist CSS eine entscheidende Komponente in modernen Websites, um ihnen ein schönes, attraktives und ansprechendes Aussehen zu verleihen. Traditionell war CSS nur für die Steuerung des Erscheinungsbilds der Website verantwortlich. Dennoch ermöglichen kontinuierliche Upgrades und neues CSS Webentwicklern und Designern, die Reaktionsfähigkeit der Website zu steuern, damit die Webseiten eine einzigartige Benutzeroberfläche für Laptop-, Tablet- und Mobilbildschirme haben.
Da CSS für jede Website notwendig ist, muss es flexibel und einfach gemäß den Anforderungen des Designers zu definieren sein. Da es außerdem sehr detailliert sein kann, müssen CSS-Definitionen wiederverwendbar sein, damit dieselben Stilformate auf mehrere Komponenten gleichzeitig angewendet werden können. Glücklicherweise erfüllen die CSS-Funktionen diese Anforderungen.
Sie können einer Webseite CSS hinzufügen, indem Sie eine oder alle der folgenden Optionen verwenden. Lassen Sie uns nun diese drei Methoden im Detail untersuchen.
Mit Inline-CSS können HTML-Designer mithilfe des „style“-Attributs Stilinformationen innerhalb des HTML-Element-Tags definieren. Es weist mehrere Vor- und Nachteile auf, die in Kürze anhand einiger Beispiele erörtert werden. Inline-CSS ist die einfachste Methode zum Anwenden von CSS. Mit dieser Methode können wir jeweils nur ein HTML-Element formatieren. Es bietet keine Wiederverwendbarkeit des Stylings. Die Stilinformationen werden im Eröffnungs-Tag des HTML-Elements definiert und als Wert an das „style“-Attribut übergeben.
Im folgenden Beispiel ändern wir die Schriftfarbe der Elemente h1, h6 und p mithilfe von Inline-CSS.
Code:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;">I am a Blue H1 heading</h1> <h1 style="color:blue;">I am a Blue H6 heading</h1> <p style="color:blue;">I am a Blue Paragraph</p> </body> </html>
Ausgabe:
Im obigen Beispiel wollten wir nur die Schriftfarbe der Tags H1, H6 und P in Blau ändern. Obwohl wir dieselben Stilinformationen anwenden wollten, konnten wir sie nicht wiederverwenden und mussten sie dreimal individuell für jedes Element definieren. Aufgrund der mangelnden Wiederverwendbarkeit und des erhöhten Zeitaufwands bevorzugen Webdesigner die Verwendung von Inline-CSS bei der Gestaltung einer Website mit mehreren Seiten nicht. Außerdem wäre es mit Inline-Styling-Definitionen fast unmöglich, eine auf Mobilgeräte reagierende Website zu erstellen.
In internem CSS können HTML-Designer Stilinformationen innerhalb des Tags im
Abschnitt der HTML-Seite mit Hilfe von Klassen- und ID-Referenzen. Im nächsten Abschnitt dieses Tutorials werden wir uns eingehend mit internem CSS befassen. Wie bereits erwähnt, wird internes CSS in derselben HTML-Datei definiert wie der HTML-Code, auf den es angewendet wird. Der HTML-Code befindet sich im Textkörper, während das CSS im
