Kemmerzell.org


CSS: Die Grundlagen

Von Maximilian · 13.05.2013 · Kategorie: CSS

Nachdem es in letzer Zeit bei uns hauptsächlich um HTML und PHP ging, möchte ich nun auch eine CSS-Reihe starten und dabei die Programmiersprache erklären. CSS zu lernen ist dabei auch gar nicht so schwer und kann schnell gelernt werden. Anfangen möchte ich diese Reihe nun mit den Grundlagen. Dabei soll es um den grundsätzlichen Syntax, die Einbindung in eine HTML-Datei und einige grundsätzliche Befehle gehen.

Der grundsätzliche Syntax

Eine CSS-Regel besteht grundsätzlich aus zwei verschiedenen Teilen: Dem Selektor und der Deklaration. Die Deklaration ist dabei immer von geschwungenen Klammern umfasst. Ein Selektor kann jedes HTML-Element (z.B. h1, a oder auch div) sein oder auch einfach die ID oder Klasse eines Containers. Der Selektor ist dabei die Verbindung zwischen dem Style Sheet und der eigentlichen HTML-Datei. Die Deklaration selbst besteht wiederum aus zwei verschiedenen Teilen: Einer Eigenschaft und einem Wert. Diese beiden Teile werden durch einen Doppelpunkt getrennt. Am Ende einer Deklaration steht zudem immer ein Semikolon. Vom Aufbau her sieht das Ganze also folgendermaßen aus:

Als Eigenschaft und Wert kann man dann in der CSS-Datei die verschiedensten Dinge einsetzen, um das Aussehen der HTML-Datei zu beeinflussen. Will man beispielsweise die Schriftfarbe der Links ändern, sieht das ganze so aus:

Einem Selektor kann man dabei aber nicht nur eine Eigenschaft mit einem Wert zuweisen, sondern auch mehrere. Man könnte in unserem Beispiel also nicht nur die Schriftfarbe der Links ändern, sondern gleichzeitig auch die Schriftgröße dieser Links. Das könnte dann folgendermaßen aussehen:

Bis jetzt wissen wir also schon, wie der grundsätzliche Aufbau einer CSS-Regel aussieht. Dafür haben wie aber bisher nur HTML-Elemente genutzt. Man kann mit CSS aber auch eigene Klassen erzeugen und in der HTML-Datei dann beispielsweise einem div-Container diese Klasse zuweisen. Eine neue Klasse erzeugt man in CSS dabei durch einen Punkt und einen darauf folgenden Namen für diese Klasse. Will man also eine Klasse namens Beispiel erzeugen, deren Text eine Schriftgröße von 20px hat, sähe dies so aus:

Nun hat man eine solche Klasse in CSS erstellt. Will man diese nun in der HTML-Datei für einen div-Container nutzen, muss dies folgendermaßen geschehen:

Man kann aber in CSS nicht nur einer Klasse bestimmte Werte und Eigenschaften zuweisen, sondern auch nur bestimmten Elementen in dieser Klasse.
Ein Beispiel: Wir haben unsere Klasse namens Beispiel. Diese nutzen wir in der HTML-Datei für einen div-Container. In dem div-Container befindet sich aber nicht mehr nur eine Zeile mit Text, sondern eine Menge Text. Darunter befindet sich aber nicht nur normaler Text, sondern auch Links, Überschriften und Co. Nun wollen wir also, dass der normale Text in diesem div-Container die Schriftgröße 20px hat und die Links die Schriftgröße 25px. Dazu kann man in CSS auch bestimmten Elementen in einer Klasse Eigenschaften und Werte zuweisen. Das sieht dann in unserem Beispiel folgendermaßen aus:

Der grundsätzliche Syntax in CSS sollte damit nun klar sein. Doch bisher haben wir zwar bestimmten HTML-Elementen Eigenschaften gegeben. Nutzen kann man diese aber in der HTML-Datei noch nicht. Dazu muss die CSS-Datei nämlich erst noch mit der HTML-Datei verbunden werden.

Eine CSS-Datei in eine HTML-Datei einbinden

Dieses Einbinden der CSS-Datei in die HTML-Datei ist schnell getan. Benötigt werden dafür nur wenige Zeilen Code, die man in den Header der HTML-Datei einbinden muss. Grundsätzlich gibt es dafür jedoch mehrere Methoden. So kann man ein link-Element, ein Style-Element oder eine @import Notation im Header verwenden oder die CSS-Anweisungen erst im Body durch ein Style-Element nutzen. Der wohl einfachste Weg davon ist jedoch ein link-Element im Header der HTML-Datei einzufügen. Dies würde dann beispielsweise so aussehen:

Natürlich muss der entsprechende Link zu der CSS-Datei dann durch einen eigenen Link ausgetauscht werden, damit das Ganze richtig funktioniert. Vielmehr muss man zum Einbinden einer CSS-Datei aber gar nicht machen.

Für den Anfang soll es diese kurze Einführung aber auch erstmal gewesen sein. In den kommenden Tagen und Wochen werden dann weitere Teile der CSS-Reihe folgen. Dort bauen wir dann auf diese Grundlagen auf und nehmen etwas anspruchsvollere Themen in Angriff. Es ist jedoch für das Programmieren mit CSS wichtig, dass man diese Grundlagen erstmal verstanden hat.

Kommentieren Teilen +1 Twittern
Dieser Artikel wurde von +Maximilian verfasst.
Kommentare
Am 16. Mai 2013 um 19:05 Uhr
Thomas

Vielen Dank für diese Anleitung! Genau nach sowas habe ich gesucht.

Am 26. Mai 2013 um 13:39 Uhr

[…] man bereits die Grundlagen von CSS beherrscht, kann man nun weiter auf diese Grundlagen aufbauen, um sein Wissen noch weiter zu […]

Einen eigenen Kommentar hinterlassen




Newsletter

Um unseren Newsletter zu abonnieren, tragen Sie bitte einfach Ihre Email-Adresse unten ein. Sie werden daraufhin eine Bestätigungsmail erhalten!

Jetzt den RSS-Feed abonnieren!

Klicke hier und abonniere den RSS-Feed, um immer auf dem neusten Stand zu bleiben.

Tipp senden

Du hast etwas entdeckt, über das wir noch nicht berichtet haben? Dann schicke uns doch einen Hinweis zu!

Klicke einfach auf den unteren Button, fülle das Formular aus und wenn das Thema passt, erscheint bei uns schon bald ein Artikel zu deiner Entdeckung.

Jetzt Tipp senden!