Möchtest Du mehr Einfluss auf das Design Deiner Website nehmen? Oder das Design durch ein Stylesheet zentral festlegen? CSS ermöglicht Dir genau das und kann zusätzlich noch die Ladezeit Deiner Website reduzieren, weil das Stylesheet nur einmal geladen werden muss.
Während HTML eine Markup-Sprache ist – das heißt, sie beschreibt die Struktur einer Website – ist CSS eine Stylesheet-Sprache; sie beschreibt den Stil, das Design der Website.
CSS (die Abkürzung steht für „Cascading Style Sheets“) erlaubt feinere Designanpassungen als pures HTML – wie etwa Zeilenabstände, Eckenrundungen oder Schlagschatten, die in HTML nicht möglich sind. Die Schriftgröße zum Beispiel ist in HTML auf 7 Stufen eingeschränkt, während Dir in CSS keine Grenzen gesetzt sind.
Layout in HTML festlegen
Du beginnst mit einer simplen Website:
<html>
<body>
<p>Hallo Welt!</p>
</body>
</html>
Speichere den Code als HTML-Datei ab und öffne die Datei im Browser.
Die Website enthält den Satz „Hallo Welt!“, schwarz auf weißem Grund in der Schriftart „Times“. Das sind die Grundeinstellungen des Browsers, die er verwendet, wenn er keine Designanweisungen von Dir erhält.
Design anpassen mit CSS
Jetzt fügst Du Dein erstes CSS in den p-Tag ein:
<html>
<body>
<p style=“font-family: Arial; font-size: 30px; color: blue;“>Hallo Welt!</p>
</body>
</html>
Speichere Deine Änderungen und aktualisiere die Website im Browser.
Die Schrift ist nun blau, 30 Pixel hoch und in der Schriftart „Arial“. Diese 3 Änderungen – Farbe, Größe, Schriftart – sind in CSS übersetzt color, font-size und font-family. Die Syntax für CSS sieht immer so aus:
Eigenschaft : Wert ;
Gängige CSS Eigenschaften
Mit font-family wählst Du die Schriftart aus, das ist die Eigenschaft. Bedenke dabei nur Schriften zu verwenden, die auf den meisten Computern dieser Welt installiert sind. Das sind zum Beispiel „Arial“, „Times“, oder „Courier“– aus Sicht von CSS ist das der Wert. Wenn Du die Website nur für Dich selbst baust, kannst Du natürlich jede Schrift wählen, die auf Deinem Computer installiert ist.
Der Befehl font-size stellt die Schriftgröße ein. In diesem Fall auf den Wert 30px. „px“ ist die Einheit für Pixel. Andere Einheiten sind zum Beispiel „cm“ für Zentimeter oder „pt“ für Points, was der Einheit aus Programmen wie Word entspricht.
Der dritte Befehl color färbt den Text ein. Die Farbnamen sind englisch und Dir bereits aus HTML bekannt. Alternativ kannst Du Farben auch über den Hex-Code (Blau = #0000FF) oder mit RGBA-Werten definieren: rgba(0, 0, 255, 0.5). RGBA sind die 3 Grundfarben Rot, Grün und Blau plus ein Wert für die Transparenz. Rot, Grün und Blau werden mit Zahlen zwischen 0 (= 0% von dieser Farbe) und 255 (= 100% von dieser Farbe) definiert. Die Transparenz wird über eine Kommazahl zwischen 0 und 1 ausgedrückt, wobei 0 komplett transparent bedeutet und 1 komplett undurchsichtig. Bitte beachte: Im Englischen wird der Punkt statt des Kommas verwendet. Du musst also 0.5 schreiben, nicht 0,5.
Wenn Du keine Transparenz benötigst, kannst Du diese Angabe auch weglassen und nur rgb(0, 0, 255) schreiben.
Nützliche Ressourcen im Web
In diesem Tutorial können wir unmöglich alle Eigenschaften behandeln. Deshalb empfehlen wir Dir diese 3 Hilfsmittel, wenn Du weitere Befehle kennenlernen möchtest:
1. Entwicklerkonsole
Jeder moderne Browser hat einen speziellen Modus für Entwickler. In Firefox öffnest Du diesen mit einem Rechtsklick auf irgendein Bild oder eine Textpassage in der Website und wählst im Kontextmenü den Punkt „Element untersuchen“ aus. Dort kannst Du Dir für jedes Element den zugehörigen Style ansehen und auch probeweise verändern. Der Browser kennt alle verfügbaren Eigenschaften für ein Element und hilft bei der Eingabe mit Textvervollständigung.
2. http://css3generator.com/
Der Generator erstellt bequem die gewünschten Styles. Du musst nur kopieren und einfügen.
3. https://wiki.selfhtml.org/wiki/CSS
Die Wikipedia für HTML, CSS und Javascript ist gerade für Anfänger unentbehrlich.
Gestalte Deine eigene Website
Hast Du Lust bekommen, eine eigene Website mit HTML und CSS zu gestalten? Oder möchtest Du CSS nutzen, um Deine Gestaltungsmöglichkeiten bei WordPress voll auszuschöpfen?
Finde hier das richtige Hosting-Paket
Sommer-Aktion bei STRATO
Unsere Sommer-Aktion bringt Dir alle zwei Wochen eine Welle mit einem neuen Angebot für das Paket Hosting-Basic. Aktuell bekommst Du das Paket vergünstigt mit einer zusätzlichen SSL Flat – bis zur nächsten Welle am 16.06.
Zur Sommer-Aktion