CSS: Die Grundlagen für Einsteiger:innen

Erstellst du eine Website, kommst du nicht darum herum, dich früher oder später mit CSS zu beschäftigen. Auch wenn du ein vorgefertigtes Theme verwendest, solltest du zumindest Ahnung von CSS-Grundlagen haben, um Einstellungen und deren Auswirkungen besser zu verstehen.

Doch was genau ist CSS und was kann es? Auf diese Frage geben wir dir in diesem Beitrag über die CSS-Grundlagen die Antworten.

Was ist CSS?

Cascading Style Sheets (CSS) ist die Sprache, die du beim Gestalten einer Website verwendest. Es handelt sich hier, wie auch bei HTML, nicht wirklich um eine Programmiersprache, aber auch keine Markup-Sprache. CSS ist eine sogenannte Stylesheet-Sprache, die es ermöglicht, HTML-Elemente zu gestalten und zu formatieren. Anhand einfacher Befehlen lassen sich so Layout, Farbe und Typografie nach Belieben anpassen. Die in den 1990ern entstandene Stylesheet-Sprache gilt als lebendiger Standard und wird kontinuierlich vom World Wide Web Consortium weiterentwickelt.

Dir fehlt noch Wissen in HTML? Wir haben für dich auch HTML-Grundlagen gesammelt:
HTML: Die Grundlagen für Einsteiger:innen >

Die Möglichkeiten scheinen grenzenlos, dadurch kann es auch sehr schnell überfordernd sein für Anfänger:innen. Beim Erlernen dieser Sprache solltest du dir Zeit nehmen und dich nach und nach weiterentwickeln. Es ist ein typischer “Es ist noch kein:e Meister:in vom Himmel gefallen”-Fall – aber für den Anfang haben wir ein paar CSS-Grundlagen und Tipps für dich gesammelt.

Syntax

Die CSS-Syntax, oder CSS-Regel, besteht immer aus einem Selektor und einem Deklarationsblock.

Der Selektor zeigt auf das HTML-Element, das du mit dem Deklarationsblock formatierst. Der Deklarationsblock besteht aus einem CSS-Eigenschaftsnamen und einem dazugehörigen Wert. Wenn du mehrere CSS-Eigenschaften anpassen willst, werden die einzelnen Deklarationen mit einem Semikolon getrennt und von geschweiften Klammern umgeben. Soll es nur eine Deklaration geben, ist es für die Übersicht trotzdem empfohlen, geschweifte Klammern zu verwenden.

Um noch mehr Struktur in deinen Code zu bringen, kannst du Kommentare verwenden. Du kannst zum Beispiel einzelne Abschnitte mit Kommentaren markieren oder einfach Codestücke und Deklarationsblöcke näher erklären. Kommentare bildest du wie folgt:

/* Dies ist ein Kommentar */

p {
	color: blue;
}

/*------------------------*/

Selektoren

Wie erwähnt, zeigt der Selektor auf das HTML-Element, das formatiert werden soll. Wir unterscheiden zwischen fünf verschiedenen Selektorarten.

1. Einfache Selektoren – selektiert Elemente nach Name, ID, Klasse, o. Ä.
2. Kombination-Selektoren – selektiert Elemente basierend auf einer bestimmten Beziehung zwischen ihnen
3. Pseudo-Klassen-Selektoren – selektiert Elemente basierend auf einem bestimmten Zustand
4. Pseudo-Element-Selektoren – selektiert und formatiert nur einen Teil eines Elements
5. Attributsselektoren– selektiert Elemente basierend auf einem Attribut oder Attributwert

Anfangs ist es wichtig, dass du die einfachen CSS-Selektoren kennst. Diese sind:

Selektor	Beispiel	Erklärung anhand des Beispielselektors
(tag-)element	p	selektiert alle <p>-Elemente
#id	#intro	selektiert alle Elemente mit der id=“intro“
.class	.container	selektiert alle Elemente mit der Klasse=“container“
element.class	p.container	selektiert nur <p>-Elemente mit der Klasse =“container“
Universalselektor	*	selektiert alle Elemente
element, element, …	div, p	selektiert alle <div>- und <p>-Elemente

Ist deine HTML-Datei schon recht verschachtelt und fortgeschritten, solltest du dir unbedingt auch die anderen vier Selektorarten ansehen.

Denke in Boxen: Abstände & Positionierung

Du wirst sehr schnell bemerken, dass deine CSS-Anpassungen einzelne Boxen betreffen – das wird auch CSS Box-Modell genannt. Elemente und Gruppierungen solltest du dir daher auch als Boxen oder Schachteln vorstellen. Das wird dir helfen beim Layout erstellen.

Jede dieser Boxen besitzt folgende drei Eigenschaften:

• Margin, der Außenabstand: Raum außerhalb des Rahmens
• Padding, der Innenabstand: Raum direkt um den Inhalt und innerhalb des Rahmens
• Border, der Rahmen rund um das Padding

Margin und Padding verwendet man für die Positionierung und für den Abstand der verschiedenen Boxen sowie Schachteln zueinander. Der Unterschied zwischen Padding und Margin kann anfangs etwas verwirrend sein. Um das zu vermeiden, präge dir für den Anfang am besten diese Grafik ein.

<p>Margin-Beispiel:</p>
<p class="paragraph1">Das ist ein Paragraph mit der Klasse "paragraph1"</p>
<p class="paragraph2">Das ist ein Paragraph mit der Klasse "paragraph2"</p>

<p>Padding-Beispiel:</p>
<p class="paragraph1">Das ist ein Paragraph mit der Klasse "paragraph1"</p>
<p class="paragraph2">Das ist ein Paragraph mit der Klasse "paragraph2"</p>

Um noch komplexere Layouts erstellen zu können, solltest du dich mit Flexbox oder Grid auseinandersetzen. Da dies hier ein CSS-Grundlagen-Beitrag ist, befassen wir uns nicht näher mit diesen Views, empfehlen aber, früher oder später sich damit auseinanderzusetzen. 

Die Qual der Wahl der Wert-Einheiten

Du hast vielleicht bereits gesehen, dass man bei CSS nicht nur Pixel als Einheit verwendet, allerdings sollte man das sogar eher vermeiden, da damit das Responsive Design und die Barrierefreiheit beeinträchtigt werden könnten.

Erfahre mehr über Responsive Webdesign und Barrierefreiheit in unseren Blogbeiträgen:
Responsive Webdesign: So funktioniert deine Website auf allen Endgeräten >
Barrierefreiheit im Web – Deine Website zugänglich für alle Nutzer:innen >

Die am häufigsten vorkommenden Einheiten sind px, em und %. Es gibt aber auch noch cm, ex und viele mehr. Welches Format du verwenden solltest, kommt ganz stark darauf an, was dein Endergebnis sein soll. Da man CSS auch für Druck verwenden kann, ist zu beachten, dass dafür cm, mm, etc. verwendet werden kann, jedoch keinesfalls bei Bildschirmausgaben. Wir konzentrieren uns hier auf die Bildschirmausgaben und drei der wichtigsten Einheiten.

Das Pixel (px)

Wie erwähnt, sollte man das Pixel nur in Maßen verwenden. Dies liegt daran, dass es eine absolute CSS-Einheit ist. Das heißt: Gibst du einer Schrift zum Beispiel 14 Pixel und es passt für deinen Bildschirm, kann die Überschrift entweder zu groß oder zu klein auf anderen Bildschirmen sein. Diese Angabe passt sich nicht mehr an das Format des Ausgabegeräts an und ist somit nicht responsive sowie nicht barrierefrei.

Prozent (%)

Das Prozent ist eine relative CSS-Einheit und passts sich daher an die Bildschirmgröße an. Die Prozentangabe ist beim Formatieren von Boxen recht praktisch. Für das Verständnis, hier gleich ein Beispiel:

Der gesamte Bildschirm ist 100 % breit. Du möchtest, dass ein Absatz die Hälfte des Bildschirms einnimmt. Das heißt, du musst der Breite des Absatzes 50 % geben. Durch die Prozentangabe gibt es keine Einbußen im Responsive Design und in der Barrierefreiheit.

em

Wenn du deiner Schrift eine relative Größe geben möchtest, empfiehlt es sich „em“ zu verwenden. Ein „em“ entspricht 100 % der Schriftgröße des Eltern-Elements. Gibt es kein übergeordnetes Element, liegt der Default bei 16 Pixel. Verwendest du also 2 „em“, so ist die Schrift 32 Pixel groß. Verwendest du allerdings nur 0,5 „em“, so ist die Schrift 8 Pixel groß. „em“-Werte kann man auch ohne Problem in Prozentwerte umrechnen, 2 „em“ sind hier 200 % und 0,5 „em“ entsprechen 50 %. Bei Breiten und Höhen von Boxen ist „em“ doch komplizierter als Prozent, aber nicht per se zu vermeiden.

Das Zusammenspiel von CSS & HTML

Jetzt, da du einen CSS-Code lesen kannst, solltest du auch noch wissen, wie das Zusammenspiel von CSS und HTML überhaupt funktioniert. Mit folgenden drei Methoden kannst du dein CSS in dein HTML einbinden.

Externe Stylesheets

Hier hast du eine „.css“-Datei mit all deinen Befehlen, die du mit einem „link“-Tag im „head“-Bereich in die HTML-Datei einbinden kannst. Dies ist die gebräuchlichste und empfohlene Methode, da hier Inhalt sowie Design sauber getrennt sind und beides später leichter anpassungsfähig ist. Außerdem kann die CSS-Datei hier auch für mehrere HTML-Dokumente verwendet werden.

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="stylesheet.css">
	</head>
	<body>
		...
	</body>
</html>

Interne Stylesheets

Hier werden die CSS-Befehle in der HTML-Datei untergebracht. Dafür gibst du ein „style“-Element in den „header“-Bereich, in welches du dann deine Befehle schreiben kannst. Diese Anweisungen gelten natürlich dann nur in dem jeweiligen HTML-Dokument.

<!DOCTYPE html>
<html>
	<head>
		<style>
			h1 {color:blue; font-size:12px;}
		</style>
	</head>
	<body>
		<h1>Dies ist eine Überschrift</h1>
		<p>Dies ist ein Absatz</p>
	</body>
</html>

Inline-Style

Auch hier befinden sich deine CSS-Befehle direkt in der HTML-Datei, aber die entsprechenden Eigenschaften befinden sich direkt im Start-Tag des HTML-Elements. Diese Methode ist nur dann sinnvoll, wenn es keine übergreifende Gestaltungsanweisungen geben soll. Die Eigenschaft betrifft nur dieses eine Element.

<!DOCTYPE html>
<html>
	<body>
		<h1 style="color:blue; font-size:12px;">Dies ist eine Überschrift</h1>
		<p>Dies ist ein Absatz</p>
	</body>
</html>

Zusammenfassung

CSS ist unumgänglich. Verwendest du für deine Website ein vorgefertigtes Theme, bedeutet dies nicht gleich, dass du nichts in der CSS-Datei bearbeiten musst oder wirst. Dafür ist es doch ziemlich vorteilhaft, wenn man zumindest Grundkenntnisse aufweist. Das Gute an CSS ist, dass wenn man die Grundlagen kennt, kann man schon viel damit anfangen.

Recherchieren, Lernen und Testen ist bei der Erstellung einer Website nicht vermeidbar und das macht auch Sinn. CSS hat so viele Facetten und es gibt so manche Frameworks und Views, die die Funktionen noch erweitern und die Handhabung für den ein oder anderen erleichtern. Die Möglichkeiten wachsen kontinuierlich, daher ist es wichtig, immer wieder die eigenen Kenntnisse weiterzuentwickeln.

Möchtest du deine Kenntnisse zu CSS noch mehr erweitern, solltest du das W3Schools CSS Tutorial definitiv besuchen. Hier kannst du alle Möglichkeiten von CSS nachlesen, sowie mehr über Flexbox- und die Grid-View erfahren. Eine aktuelle Übersicht aller CSS-Eigenschaften findest du hier.