CSS Einsteiger Tutorial – lerne die wichtigsten CSS Grundlagen

Immer wieder sehen wir im Forum die Frage für kleinere CSS Anpassungen, daher wird es Zeit für ein kleines Einsteiger Tutorial um euch ein Grundverständnis für CSS näher zu bringen, sodass man bei der Anpassung seiner Seite noch etwas flexibler ist.

Im „zweiten Teil“ dieses Artikels (folgt!) haben wir zudem die häufigsten CSS-Fragen aus dem Forum zusammengesucht und für euch entsprechend aufbereitet.

Wir starten nun endlich mit unserer CSS Basics Artikelserie in der wir in mehreren „Lektionen“ auf die unterschiedlichsten Fragen des Forums eingehen und dir CSS anhand von realen Beispielen erklären.

Was ist eigentlich CSS?

Damit wir die nachfolgenden Inhalte verstehen können müssen wir uns erst einmal anschauen, was CSS eigentlich ist, was es bewirkt und wie es funktioniert.

Wikipedia sagt dazu folgendes:

Cascading Style Sheets […], kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide Webs. […] Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit den Auszeichnungssprachen HTML und XML […] eingesetzt werden.

Auf gut Deutsch heißt es so viel wie, dass CSS eine Webseite hübsch macht. Also die Darstellung einzelner Elemente wird durch CSS mit Hilfe eines sogenannten Selektors ausgewählt und erhalten daraufhin bestimmte Eigenschaften. Zum Beispiel wird per CSS definiert, ob ein Button rot oder grün ist, welche Schriftart die h1-Überschriften haben oder auch, ob man am Handy bestimmte Sachen (nicht) sieht, die es am Desktop (nicht) gibt und natürlich vieles mehr.

Aufbau einer typischen CSS-Anweisung

Selektoren

Der Aufbau sieht wie folgt aus: Es gibt einen Selektor, durch diesen wir ein bestimmtes Element (oder ein Elementtyp) ansprechen. Nachfolgende, zwischen 2 geschweiften Klammern, wird dann die Eigenschaft (z.B. color für die Textfarbe) und ein Wert (z.B. red) hinterlegt.

selektor {
	eigenschaft: wert;
}

Es können für einen Selektor auch mehrere Eigenschaften definiert werden, diese werden mit Hilfe eines ; getrennt:

selektor {
	eigenschaft: wert;
	eigenschaft2: wert2;
	eigenschaft3: wert3;
}

Auch können mehrere Selektoren die gleiche Eigenschaft bekommen:

selektor, selektor2, selektor3 {
	eigenschaft: wert;
}

Ein Selektor kann ein normales HTML-Tag sein, wie etwa body, h1 oder a, aber auch ein HTML-Tag mi einer bestimmten Klasse oder ID.

Eine Klasse wird über das HTML-Attribut class="" definiert und erhält anschließend einen Namen, wie z.B. btn. Dieser Selektor kann anschließend wie folgt angesprochen werden (Klassen haben einen . vor dem Namen)

.btn {
	eigenschaft: wert;
}

Das Gleiche gilt für IDs, wobei eine ID als Selektor mit einer # statt einem . angesprochen wird. Zudem können IDs nur einen Wert (id="selektor") enthalten, während Klassen aus mehreren Werten (class="selektor selektor-test selektor-2 lorem-ipsum") bestehen können. Außerdem sollten IDs auf einer Unterseite immer eindeutig sein und nicht bei mehreren Elementen vorkommen.

#btn {
	eigenschaft: wert;
}

Das sind nun wirklich nur die Grundlagen, was Selektoren betrifft, denn diese können deutlich komplexer werden, wie man z.B. auf Wikipedia (https://de.wikipedia.org/wiki/Cascading_Style_Sheets#Selektoren) sehen kann. Wer also Interesse hat, kann sich dort einfach mal die Liste anschauen. 🙂

Eigenschaften

Eigenschaften für CSS Befehle gibt es wie Sand am Meer. Eine (vermutlich) komplette Auflistung findest du z. B. auf http://www.css4you.de/css-a-z.html oder http://www.w3schools.com/css/. Ansonsten lernst du aber auch in unseren Anleitungen immer mal wieder einzelne Eigenschaften kennen und wir versuchen diese auch immer möglichst genau zu beschrieben. 🙂

Sonstiges

Browserkompatibilität

Speziell neuere CSS(3)-Eigenschaften können nicht unbedingt von allen (alten) Browsern interpretiert werden. Auf der Webseite http://caniuse.com/ kannst du nach verschiedenen Eigenschaften suchen und schauen, ob sie der Browserkompatibilität deiner Zielgruppe bzw. deiner Besuchern entsprechen.

Media Queries

Ein weiterer wichtiger Punkt sind die sogenannten Media Queries. Dabei handelt es sich um eine Funktionalität von CSS, die es erlaubt entsprechende Codezeilen nur für ein bestimmtes Ausgabemedium zu berücksichtigen. Sehr gut wird dieser Punkt auf https://wiki.selfhtml.org/wiki/CSS/Media_Queries erklärt, dazu auch ein kurzer Auszug:

Eine Stärke von CSS liegt darin, dass die Darstellung eines Dokuments für verschiedene Ausgabemedien festgelegt werden kann. Die Zuordnung eines Stylesheets zu einem Medium erfolgt mit Hilfe von Medienabfragen (Media Queries).

Als Medienabfrage wird eine Liste von Kriterien bezeichnet, die ein Ausgabemedium erfüllen muss, damit ein Stylesheet zur Verarbeitung eingebunden wird. Medienabfragen bestehen aus einem Medientyp (z.B. Bildschirm oder Drucker), einem Medienmerkmal (z.B. Farbfähigkeit) oder einer Kombination aus beidem. Mithilfe der Kombinationsmöglichkeit können Stylesheets auf eine Vielzahl von Ausgabemedien zugeschnitten werden.

Medienabfragen können an allen Stellen verwendet werden, wo Stylesheets eingebunden werden bzw. dort, wo eine Medienangabe abgefragt wird. Erfüllt das verwendete Ausgabemedium alle Kriterien einer Medienabfrage, so wird das damit verknüpfte Stylesheet eingebunden.

Breakpoints

Der für dich wichtigste „Unterpunkt“ der Media Queries sind die sogenannten Breakpoints. Durch die Breakpoints wird definiert ab, welcher Browsergröße sich das Design „umstellt“ und sich somit besser an das verwendete Endgerät anpasst.

@media (min-width: 1200px) {
	// Nachfolgender CSS Code greift bei der Browserauflösung von 1200px und höher (Desktop large)
}

@media (min-width: 992px) and (max-width: 1199px) {
	// Nachfolgender CSS Code greift bei der Browserauflösung zwischen 992px und 1199px (Desktop small)
}

@media (min-width: 768px) and (max-width: 991px) {
	// Nachfolgender CSS Code greift bei der Browserauflösung zwischen 768px und 991px (Tablet)
}

@media (max-width: 767px) {
	// Nachfolgender CSS Code greift bei der Browserauflösung von 767px und weniger (Smartphone)
}

Beispielsweise könnte man Buttons auf dem Handy grün und dem Desktop orange darstellen. Hierzu wäre folgende Syntax notwendig:

@media (max-width: 767px) {
	.btn {
		background: green;
	}
}
@media (min-width: 768px) {
	.btn {
		background: red;
	}
}

Diese Breakpoints lassen sich, wie im Beispiel oben gezeigt, natürlich auch mixen. Zudem kannst du komplett eigene Breakpoints definieren, um dein Design noch detaillierter anzupassen.

Die von uns verwendeten Breakpoints findest du auf getbootstrap.com/css/#responsive-utilities-classes

Browserinterne Developer Tools

Nun gab es jede Menge Theorie und vermutlich willst du endlich loslegen. Aber bevor wir mit dem neu erlernten loslegen können, müssen wir noch eine Frage klären: Woher wissen wir überhaupt, welche Selektoren ein Element hat, welches verändert werden soll?

Das kann man zum Glück superschnell herausfinden. Wenn du bei deinem Browser die F12 Taste drückst, öffnen sich die internen Developer Tools (diese hat mittlerweile jeder neuere Browser). In diesem Beispiel verwenden wir Chrome, aber auch in Firefox ist die Funktionalität nahezu identisch, zumindest für das Auslesen von HTML Elementen.

Der Aufbau

So in etwa sollte es dann vor euch aussehen, die 4 wichtigsten Bereiche haben ich kurz markiert:

1. Das Auswahlwerkzeug, mit dessen Hilfe ihr einzelne HTML Elemente markieren könnt.

2. Hier seht ihr, wie es aussieht, wenn man ein Element markiert. Man bekommt die Klasse und auch die Größe angezeigt.

3. In der Box unten Links wird der komplette HTML Code der Seite ausgegeben. Beim Markieren eines Elements springt der Editor auch immer direkt an die passende Stelle.

4. In dieser Box seht ihr alle CSS Eigenschaften (inkl. der Werte), die dieses Element hat, egal durch direkte Ansprache des Selektors oder durch das Vererben von Eigenschaften eines Elternelements.

In unserem Beispiel sehen wir nun, dass der rote, innere Slider-Balken die CSS Klasse slider-selection hat. Wenn wir im CSS Fenster nun etwas runter scrollen sehen wir, dass die rote Farbe durch folgenden Code erstellt wird:

.filterform .slider-selection {
	background: #c01313;
}

Und wer nun oben fleißig aufgepasst hat, kann nun auch sicher schon erahnen, wie wir diesen Balken z.B. grün einfärben. Dazu kopieren wir uns einfach diesen Selektor, ändern die Hex-Farbe #c01313 auf green und packen den Code in unser Custom CSS Feld unter Optionen » Allgemein » Anpassen » CSS

.filterform .slider-selection {
	background: green;
}

Wer den CSS-Code vorher erst ausprobieren will, wechselt in den Developer Tools auf den Tab Console, drückt dort STRG + O und öffnet die style.css. Anschließend scrollt ihr in dieser ganz nach unten und gebt dort euren CSS Code ein.

!important

Wer das obere Beispiel ausprobiert hat, wird gemerkt haben, dass sich die Balken nicht grün färben. Das liegt daran, dass dieser CSS Wert über die Customizer CSS geladen wird und somit in der Hierarchie nach der style.csskommt. D.h. der Wert wird im späteren Verlauf überschrieben. Um sowas zu umgehend gibt es aber eine kleine Lösung. Hängt einfach ein !important hinter den Wert und schon klappt es (es sei denn der Selektor, der später geladen wird hat ebenfalls ein !important).

.filterform .slider-selection {
	background: green !important;
}

… und wenn sie nicht gestorben sind, kaskadieren sie noch heute … oder so!

An dieser Stelle machen wir nun erst mal einen Cut. Auch wenn das nun nur ein ganz kleiner %-Teil von dem ist, was man über das Thema CSS lernen kann, so wurden denke ich die wichtigsten Grundlagen angesprochen. Auf dieser Basis und dem Wissen was ihr euch innerhalb des Artikels angeeignet habt, könnt ihr natürlich mit Hilfe von Google oder YouTube euch noch spezieller fortbilden. Denn für diesen Bereich gibt es wirklich unzählige Tutorials.

Wenn ihr noch Fragen haben solltet, hinterlasst uns gerne ein Kommentar oder postet eure Frage im Forum. Mit der Zeit wird der Artikel natürlich immer mal wieder erweitert und aktualisiert.

via mhoye (imgur.com)