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.
Hole dir unser kostenloses E-Book zum Thema HTML & CSSCSS (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-PaketSommer-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-AktionMit einem Stylesheet trennst Du CSS und HTML, ohne die logische Verbindung zu verlieren. Die Vorteile: weniger Schreibaufwand, mehr Übersichtlichkeit und schnellere Ladezeiten.
Hinweis: Lege vorbereitend für alles, was jetzt kommt, eine neue leere Text-Datei an und speichere diese als „stylesheet.css“ im gleichen Verzeichnis ab, in dem Deine HTML-Datei liegt.
HTML und CSS verbinden
In Teil 1 dieser Beitragsserie hast Du CSS in das style-Attribut innerhalb eines HTML-Tags geschrieben. Dadurch war die Verbindung von CSS und HTML klar: „diese CSS-Anweisung gilt für diesen HTML-Tag“.
Das wird aber spätestens dann unbequem, wenn Du die gleiche Anweisung mehr als einmal benötigst. Betrachte dieses Beispiel:
<html>
<body>
<h1 style=“font-family: Arial; font-size: 30px; color: red;“>Überschrift</h1>
<p style=“font-family: Arial; font-size: 16px; color: black;“>Erster Absatz</p>
<h2 style=“font-family: Arial; font-size: 24px; color: orange;“>Zweite Überschrift</h2>
<p style=“font-family: Arial; font-size: 16px; color: black;“>Zweiter Absatz</p>
</body>
</html>
Wiederholungen vermeiden
Dieser Code enthält sehr viele überflüssige Wiederholungen; ausserdem ist er sehr unübersichtlich geworden. Der Code für die beiden Überschriften hat die gleiche „font-family“-Einstellung und der CSS-Code für beide <p>-Tags ist vollkommen identisch. Diese Erkenntnis lässt sich genauso in CSS formulieren mit sogenannten CSS-Regeln.
Eine CSS-Regel sieht immer so aus:
Selektor { Eigenschaft : Wert ; }
Ein Selektor wählt HTML-Elemente aus, für die die nachfolgenden Eigenschaften gelten sollen. Die einfachste Form von Selektoren ist der Name des HTML-Tags, in diesem Fall zum Beispiel „p“, „h1“ und „h2“.
Der Teil innerhalb der geschweiften Klammern ist exakt das, was Du bisher in das style-Attribut geschrieben hast. Du kannst einfach alles innerhalb der Anführungszeichen hinter style= kopieren und in die geschweiften Klammern einfügen.
Du kannst die CSS-Regel für die beiden <p>-Tags nun in die leere „stylesheet.css“-Datei einfügen:
p { font-family: Arial; font-size: 16px; color: black; }
Diese CSS-Regel sagt, dass für alle <p>-Tags die Eigenschaften in den Klammern gelten.
Du hast später Vorteile, wenn Du es etwas ordentlicher formatierst:
p {
font-family: Arial;
font-size: 16px;
color: black;
}
Dem Browser ist es recht egal, ob Du CSS für Menschen gut lesbar schreibst oder nicht. Für spätere Änderungen oder eine Fehlersuche ist es jedoch besser, ein wenig auf die Form zu achten.
HTML aufräumen
Jetzt brauchst Du das CSS in den style-Attributen für die <p>-Tags nicht mehr. Wenn Du die gleichen Schritte für die beiden Überschriften wiederholst, sieht der HTML-Code nun wieder ganz sauber aus:
<html>
<body>
<h1>Überschrift</h1>
<p>Erster Absatz</p>
<h2>Zweite Überschrift</h2>
<p>Zweiter Absatz</p>
</body>
</html>
Die „stylesheet.css“-Datei enthält diesen Code:
p {
font-family: Arial;
font-size: 16px;
color: black;
}
h1 {
font-family: Arial;
font-size: 30px;
color: red;
}
h2 {
font-family: Arial;
font-size: 24px;
color: orange;
}
Externes Stylesheet laden
Damit das überhaupt funktioniert und alles wieder so aussieht wie vorher, musst Du noch einen entscheidenden letzten Schritt durchführen: das Stylesheet muss geladen werden. Das passiert mit einem <link>-Tag (nicht zu verwechseln mit dem Anker <a>!).
<link> gehört in den Header des HTML-Dokuments, also zwischen <head> und </head>.
<html>
<head>
<link rel=„stylesheet„ href=„stylesheet.css„>
</head>
<body>
<h1>Überschrift</h1>
<p>Erster Absatz</p>
<h2>Zweite Überschrift</h2>
<p>Zweiter Absatz</p>
</body>
</html>
Neben der Ordnung gibt es einen weiteren großen Vorteil für diese Trennung von CSS und HTML: Du kannst weitere HTML-Seiten bauen und dort das gleiche Stylesheet laden. Da der Browser das erste Laden des Stylesheets bereits im Cache hat, sparst Du dabei sogar Ladezeit.
CSS-Selektoren sind der komplexeste Teil von CSS und gehen weit über das hinaus, was Du in diesem Tutorial gelesen hast. Wenn Du mehr wissen möchtest, empfehlen wir Dir den CSS-Bereich von SELFHTML: https://wiki.selfhtml.org/wiki/CSS
Möchtest Du CSS für Deine eigene Website nutzen?
Zu den STRATO Hosting-PaketenSommer-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
Oliver Meiners
Hallo, ich bin Oliver. Ich bin Mitarbeiter im Kundenservice und helfe Dir bei Fragen zu HiDrive, Servern und zum STRATO Webshop.
Fabian Brandt sagte am
Wie kann ich ein .css file auf dem webspace oder sftp server ablegen und dann in meinem html code auf dieses zugreifen? ich habe diverse varianten der relativen pfade und einige varianten der externen pfade ausprobiert und würde ungerne extern einen „.css“ server hosten.
Vladimir Simović sagte am
Hallo Fabian,
wenn du die CSS-Datei Hauptverzeichnis auf FTP ablegst, dann müsstest du mit der folgenden Adresse
/style.cssdie CSS-Datei von jeder Stelle der Website erreichen können. Wenn du die Datei im Unterordner ablegst, dann müsste es so aussehen:/name-ordner/style.css.Viele Grüße
Vladimir
C. Schneider sagte am
Gibt es einen speziellen Grund dafür, warum sich die Webshop Themes nur via CSS anpassen lassen? Ich versuche nach wie vor herauszufinden in welchem Format das CSS im Backend übermittelt werden muss, nachdem ich den entsprechenden Wert via Konsole ausfindig gemacht habe. In meinem Falle geht es lediglich um die Hintergrundfarbe des Headers Desktop view in der elegant.css
Wenn ich die komplette Informaton des Styles kopiere, sehe ich zwar die geänderte Farbe, aber es lässt sich nicht speichern, weil der Text zu lang ist.
Tobias Mayer sagte am
Hallo,
die Farben lassen sich auch ohne CSS anpassen. Wenn Du im Shop den Menüpunkt „Editor” wählst und dann auf den Pinsel unten klickst, kannst Du unter anderem den Header-Hintergrund auswählen.
Beste Grüße
Tobias
elli sagte am
Dieser Artikel hat mir gerade sehr beim lernen geholfen. Danke sehr!
Sebastian Thurow sagte am
Hallo Elli,
vielen Dank für Dein Feedback, das freut uns!
Viel Erfolg weiterhin beim Lernen und liebe Grüße
Sebastian
Anonymous sagte am
Ich muss ehrlich sein…
Ich verstehe in diesem Artiket, trotz vorkenntnisse, exakt NICHTS.
Tobias Mayer sagte am
Hallo,
dieser Artikel ist der zweite Teil einer Reihe und baut inhaltlich auf den ersten Beitrag auf. Hoffentlich sind die beiden Texte in Kombination besser verständlich.
Beste Grüße
Tobias
Aren sagte am
Vielen Dank für diesen schönen Artikel !
Oliver Meiners sagte am
Sehr gerne. 🙂