CSS-Befehle: Häufig verwendete Anweisungen
Für das Erstellen von Websites sind die verschiedensten CSS-Befehle notwendig. Wir bieten einen Überblick über wichtige und häufig verwendete CSS-Befehle, ergänzt mit einigen kurzen, anpassbaren Beispielen für die Webdesign-Praxis.
CSS-Befehle: Große Vielfalt mit CSS 3
Ging es anfänglich darum, mit CSS-Befehlen Schriftarten und -farben festzulegen, Tabellen schöner zu machen oder Elemente von einem Text umfließen zu lassen, haben sich die Möglichkeiten stark erweitert. Heute lassen sich Farbverläufe erzeugen, Bilder freistellen, Schatten und Rundungen erzeugen, Animationen einsetzen – alles mit CSS-Befehlen.
Ohne Cascading Style Sheets (CSS) geht beim Aufbau von Webseiten heutzutage nichts mehr. Was CSS ist und wie Sie CSS in HTML einbinden, wird ausführlich in den verlinkten Guides dargestellt. Einsteigern sei der Ratgeber CSS lernen leicht gemacht empfohlen. Schauen Sie auch in unsere CSS-Tricks mit weiteren Snippets für spezielle CSS-Lösungen.
Ein CSS-Befehl, auch CSS-Regel genannt, ist wie folgt aufgebaut:
| Selektor | öffnende Klammer | Eigenschaft | Eigenschafts-Wert | schließende Klammer |
|---|---|---|---|---|
| p | { | color: | navy; | } |
Eigenschaft und Eigenschafts-Wert bilden gemeinsam die sogenannte Deklaration.
Wer CSS schreibt, sollte stets im Hinterkopf behalten, dass trotz vieler Verbesserungen und Angleichungen nicht alle Browser alles „verstehen“. Dafür gibt es im CSS die sogenannten Browser-Präfixe, mit denen die Befehle die Browser-Engines dezidiert ansprechen. Diese Präfixe lauten:
- -moz-: für Firefox
- -ms-: für den Internet Explorer
- -khtml-: für Konqueror
- -o-: für alte Opera-Versionen
- -webkit-: für Safari, Chrome, neue Opera-Versionen
Ein einfaches Beispiel:
.box {
-moz-border-radius: 10px; /* Anweisung für Firefox */
border-radius: 10px;
}Auf der Webseite CANIUSE lässt sich die Verträglichkeit von CSS-Befehlen mit allen gängigen Browsern kostenlos prüfen.
Alle Angaben im CSS zwischen /* … */ werden vom Browser nicht ausgeführt. Damit können sowohl Kommentare platziert als auch CSS-Befehle für Testzwecke einfach „ausgeblendet“ werden, ohne löschen und neu schreiben zu müssen.
Für die responsive Gestaltung von Websites sind u. a. die CSS Flexbox, das CSS Grid und die Media-Queries hinzugekommen, die mit neuen CSS-Befehlen helfen, das Prinzip „Mobile First“ umzusetzen.
Farben im CSS
Die Welt der Farben im Internet beruht auf dem RGB-Farbraum. Für die Festlegung der Farben gibt es CSS-Befehle für einzelne Bestandteile einer Website. Fast jedes Element lässt sich mit einer Farbe oder sogar einem Farbverlauf versehen.
Die Klassen- und ID-Namen in CSS-Befehlen sind „case sensitive“, reagieren also auf Groß- und Kleinschreibung. Es ist also ein Unterschied, ob die Anweisung für eine ID als „#GELB { … }“ oder „#gelb { … }“ geschrieben wird. Sie muss dann im HTML-Element genauso verwendet werden.
Möglichkeiten zur Angabe der Farbwerte
- Hexcode: #63f0ac
- Farbnamen: red, green, blue, coral, white, black …
- RGB: rgb(238,130,238) und RGB-Transparenz mit rgba(238,130,238, 0.7)
- HSL mit Transparenz: hsla(140,20%,50%,0.5)
- Hue (Farbton) von 0 bis 360 Grad auf dem Farbkreis
- Saturation (Sättigung): von 0 % farblos bis 100 % höchste Farbstärke
- Lightness (Helligkeit): von 0 % als Schwarz bis 100 % als Weiß
- numerischer Transparenz-Wert bis 1.0 = volle Farbdeckung
Beispiele für die Festlegung von Farben für HMTL-Elemente
Für die Schriftfarbe wird die Eigenschaft color verwendet:
p { color: red; } /* ein Absatz in Rot */
div { color: #ffc3dd; } /* DIV-Container mit Schrift in hellem Rosa */
h1 { color: rgba(220,0,218,0.85); } /* Überschrift im kräftigem Violett mit Transparenz 85 % */
Auch Farbverläufe sind möglich
Was früher mit Bilddateien erzeugt werden musste, geht heute ganz einfach per CSS-Befehl: Farbverläufe. Dazu dient die Anweisung background-image: gradient oder in Kurzform background: gradient. Der gradient repräsentiert einen Wert für ein Bild ohne Maße und erzeugt einen Farbverlauf, der an definierten Stellen verändert werden kann.
| CSS-Befehl | Beschreibung | mögliche Werte |
|---|---|---|
| linear-gradient | linearer Verlauf von einer Farbe zur anderen oder mit mehreren Farben | to-top, to-right, 45deg (beliebige Winkelangabe), Farben mit % als Stopp-/Übergangspunkte |
| radial-gradient | kreisförmiger Verlauf von einer Farbe zur anderen | circle, ellipse mit Pixelwerten und Farben |
| conic-gradient | konisch angeordneter Wechsel von einer Farbe zu anderen | Farben mit %-Werten und Startwinkel als Zahl |
Die Tabelle zeigt nur einen Teil der möglichen Attribute. Als Farbangaben können alle gängigen Werte verwendet werden, einschließlich der Farbwerte mit Transparenz.
Die Schreibweise als kompletter CSS-Befehl lautet beispielsweise:
.box { background-image: linear-gradient(to top, white 0%, black 50%); }CSS-Befehle für Schriften
Mit dem CSS-Befehl font lassen sich die sechs Eigenschaften einer verwendeten Schrift auf einen Schlag verändern.
p { font: italic small-caps 700 1.2em/1.5em Arial, Helvetica, sans-serif; }Diese zusammengefasste CSS-Anweisung lässt sich einzeln auflösen, und zwar in der Reihenfolge der Angaben:
| CSS-Befehl | Beschreibung | Mögliche Werte |
|---|---|---|
| font-style | Schriftlage | normal, italic, oblique |
| font-variant | Schriftvariante | normal, small-caps |
| font-weight | Dicke der Buchstaben | normal (= 400), bold, bolder, lighter, 100 bis 900 (in 100-er Schritten) |
| font-size / line-height | Schriftgröße | Angaben in px, %, em, rem, vw, vh |
| font-family | Schriftart | Schriftarten je nach Betriebssystem, Browser oder zusätzlich installierten Erweiterungen |
Die Festlegung der font-family für den Body der Website wird auf alle darunter liegenden Anweisungen vererbt. Die Schriftfarbe wird nicht mit einer font-Anweisung, sondern mit color:Farbangabe; festgelegt.
Bezeichnungen von Schriftarten mit Leerzeichen sollten im CSS-Befehl mit einfachen oder doppelten Hochkommas umschlossen werden, z. B. font-familiy: "Lobster Two".
Weitergehende Informationen über die zu verwendenden Maßeinheiten für font-size entnehmen Sie dem Ratgeber Typografie im Responsive Webdesign.
CSS-Befehle für die Textgestaltung
Neben der Schriftart, ihrer Farbe und Größe sind weitere typografische Feinheiten für die Lesbarkeit einer Website wichtig. Dazu zählen:
| CSS-Befehl | Beschreibung | Mögliche Werte |
|---|---|---|
| text-align | Textausrichtung | left, right, center, justify (Blocksatz) |
| text-decoration | Textgestaltung | underline, overline, line-through |
| word-spacing | Wortabstand | numerischer Wert in pt (Punkt) mm, cm, px, em, rem |
| letter-spacing | Zeichenabstand | numerischer Wert in pt (Punkt) mm, cm, px, em, rem |
| text-indent | Einrückung 1. Zeile | numerischer Wert in pt (Punkt) mm, cm, px, em, rem |
| text-transform | Textart | capitalize, uppercase, lowercase, none |
CSS-Befehle für Linien und Rahmen
Um Rahmen zu gestalten, wird das CSS-Element border eingesetzt, in dem – ähnlich wie bei font – mehrere Eigenschaften zusammengefasst sind.
Beispiel: Ein Bild – mit dem HTML-Tag img – wird mit einer 5 Pixel starken Linie in Navy-Blau umgeben. Die Kurzschreibweise lautet:
img { border: 5px solid #000080; }Auch dieser CSS-Befehl lässt sich wie folgt auflösen:
| CSS-Befehl | Beschreibung | Mögliche Werte |
|---|---|---|
| border-width | Liniendicke | px, mm, in, em, rem |
| border-style | Linienart | none, hidden, dotted, dashed, double, groove, ridge, inset, outset |
| border-color | Linienfarbe | siehe Abschnitt zu Farben |
Linien entlang der einzelnen Kanten eines Bildes oder Rechtecks werden mit border-top, border-right, border-bottom und border-left einzeln mit den gleichen Attributen wie in der Kurzschreibweise bei border platziert.
CSS-Befehle, um Abstände zu definieren
Es gibt zwei Arten von Abständen:
- padding als der innere Abstand des Inhalts zum umgebenden Element
- margin als der äußere Abstand eines Elements zum nächsten
Der Innenabstand
Mit padding (dt.: „Polsterung“) wird der Abstand von einem Textblock oder Bild zum umgebenden Rahmen festgelegt. Es gibt die Kurzform und definierte Angaben für alle Seiten eines Content-Blocks.
| CSS-Befehl | Beschreibung | Mögliche Werte |
|---|---|---|
| padding: 1px | allgemeiner Innenabstand | px, em, mm, in, pt, pc, % |
| padding: 1em 2.5em; | Innenabstand oben & unten (1. Wert), links & rechts (2. Wert) | px, em, mm, in, pt, pc, % |
| padding: 5px 2px 4px; | Innenabstand oben (1. Wert), links & rechts (2. Wert), unten (3. Wert) | px, em, mm, in, pt, pc, % |
| padding-top: 1mm; | Innenabstand nach oben | px, em, mm, in, pt, pc, % |
| padding-right: 1pc; | Innenabstand nach rechts | px, em, mm, in, pt, pc, % |
| padding-bottom: 3pt; | Innenabstand nach unten | px, em, mm, in, pt, pc, % |
| padding-left: 2in; | Innenabstand nach links | px, em, mm, in, pt, pc, % |
Wenn in der Kurzform padding alle vier Positionen mit Werten besetzt sind, wird von oben beginnend im Uhrzeigersinn vorgegangen, also in der Schreibweise:
p { padding: 5px 0 5px 0; } /* oben und unten 5 Pixel, rechts und links kein Innenabstand */Der Außenabstand
Der CSS-Befehl margin (dt.: „Spanne“) legt fest, wie weit ein Layout-Element vom nächsten entfernt ist. Die Schreibweise und Aufzählung einzelner Werte ist identisch mit padding.
| CSS-Befehl | Beschreibung | Mögliche Werte |
|---|---|---|
| margin: 5px; | allgemeiner Außenabstand | px, em, mm, in, pt, pc, % |
| margin: 2em 1.5em; | Außenabstand oben & unten (1. Wert), links & rechts (2. Wert) | px, em, mm, in, pt, pc, % |
| margin: 2px 10px 15px; | Außenabstand oben (1. Wert), links & rechts (2. Wert), unten (3. Wert) | px, em, mm, in, pt, pc, % |
| margin-top: 2pc; | Außenabstand nach oben | px, em, mm, in, pt, pc, % |
| margin-right: 5mm; | Außenabstand nach rechts | px, em, mm, in, pt, pc, % |
| margin-bottom: 7pt; | Außenabstand nach unten | px, em, mm, in, pt, pc, % |
| margin-left: 1in; | Außenabstand nach links | px, em, mm, in, pt, pc, % |
Bei der Berechnung der Elemente eines Layouts müssen alle Bestandteile einbezogen werden – das heißt: die Breite des Textes bzw. Bildes (width) plus Innenabstand padding plus Liniendicke border-width plus Außenabstand margin.
CSS-Befehle für Links
Wenn Sie die Gestaltung von Links im CSS festlegen, können Sie jeden Status eines Links gesondert designen. Neben dem normalen Aussehen legen Sie auch fest, wie ein Link beim Drüberfahren mit der Maus, während des Klicks und beim Auswählen – etwa mit der Tab-Taste – dargestellt wird.
a:link { background-color: black; color: white;}In der Regel nimmt man Änderungen an diesen sogenannten Pseudoklassen vor, um die Farbe von Verweisen zu ändern. Prinzipiell lassen sich aber alle möglichen CSS-Befehle in diese Klassen einbinden.
| CSS-Befehl | Beschreibung | Mögliche Werte |
|---|---|---|
| a:link | Link im Ausgangszustand | lässt sich mit CSS-Befehlen kombinieren |
| a:hover | Link, wenn man mit dem Mauszeiger darüberfährt | lässt sich mit CSS-Befehlen kombinieren |
| a:active | Link, während man darauf klickt | lässt sich mit CSS-Befehlen kombinieren |
| a:focus | Ausgewählter Link – z. B. mit der Tab-Taste | lässt sich mit CSS-Befehlen kombinieren |
| a:visited | Link, nachdem dieser aufgerufen wurde | lässt sich mit CSS-Befehlen kombinieren |
CSS-Befehle für Hintergründe
Per CSS lässt sich auch der Website-Hintergrund verändern. Das geht, indem man die Farbe festlegt oder etwa ein Bild einbaut. Wählt man ein Bild, kann man zudem weitere Merkmale definieren.
| CSS-Befehl | Beschreibung | Mögliche Werte |
|---|---|---|
| background-color | Hintergrundfarbe | siehe Abschnitt zu Farben |
| background-image | Hintergrundbild | URL |
| background-attachment | Bewegt sich der Hintergrund beim Scrollen mit oder bleibt er fixiert? | scroll, fixed |
| background-clip | Legt fest, für welchen Bereich die Hintergrundeigenschaften gelten | padding-box, corner-box, content-box |
| background-position | Ausrichtung des Hintergrundbildes | top, center, bottom / left, center, right |
| background-repeat | Wenn das Bild kleiner als der Hintergrund ist, kann man es wiederholen lassen. | repeat, repeat-x (horizontal), repeat-y (vertikal), space (Wiederholung ohne Beschneidung), round (Wiederholung mit Skalierung) |
Hierbei handelt es sich um Detailbefehle. Diese lassen sich auch unter dem Oberbefehl background verschachteln:
background: white url("http://example.org/image.png")
repeat-xHier sind die Befehle background-color, background-image und background-repeat integriert.
In unserem Ratgeber erfahren Sie, wie Sie unter Windows 11 diese Internetseite an die Taskleiste anheften. So haben Sie jederzeit schnellen Zugriff auf den Überblick aller CSS-Befehle.
Ähnliche Artikel
Docker-Befehle
Die Docker-Befehlen dienen zum Steuern der Docker-Engine auf dem lokalen Host. Auf der Kommandozeile eingegeben, werden Sie in API-Calls an den Docker-Daemon übersetzt. Mit Docker-Befehlen lassen sich Images, Container und Volumen verwalten. Arbeitet man viel mit der Software ist es hilfreich, sich gut mit den Docker-Befehlen auszukennen.
jivacoreShutterstock Die wichtigsten Linux-Befehle im Überblick
Unter Linux lassen sich nahezu alle Aktionen durch Programmaufrufe im Terminal abwickeln. Vorausgesetzt, Sie kennen den passenden Befehl und die korrekte Syntax dazu. Wir möchten Ihnen den Einstig in die Arbeit mit dem Terminal erleichtern. In diesem Artikel bekommen Sie eine Übersicht über die grundlegenden Linux-Befehle mit detaillierter Beschreibung und praxisnahen Beispielen.
HTML-Tags: Ein Überblick über die wichtigsten Befehle
Ohne HTML-Tags kann Ihre Website nicht ordnungsgemäß von den unterschiedlichen Browsern angezeigt werden. Sie strukturieren Ihr Dokument, geben wichtige Informationen weiter und sind so besonders wichtig für Ihre Homepage. Wir zeigen die wichtigsten HTML-Befehle in Tabellenform und erklären, wozu und wie die unterschiedlichen HTML-Tags verwendet werden.
HTML-Attribute: Ein Überblick über die wichtigsten Attribute
HTML-Attribute sind ein wichtiges Werkzeug, um eine Website zu optimieren und das Nutzungserlebnis zu verbessern. Sie hinterlegen Informationen für Elemente oder definieren Gestaltungsmerkmale für diese. Hier erfahren Sie, was HTML-Attribute genau sind und wie sie eingesetzt werden, und erhalten einen Überblick über die gängigsten Attribute.
CSS: Padding vs. Margin – Bestandteile des Box-Modells im Überblick
Die Vielzahl von Befehlen, die eine Programmiersprache wie CSS beinhaltet, kann herausfordernd sein. Kein Grund zur Sorge: In unserem Übersichtsartikel CSS Padding vs. Margin lernen Sie die wichtigsten Unterschiede dieser beiden Formatierungsbefehle kennen. Außerdem stellen wir Ihnen das einprägsame Boxmodell vor, damit Sie die beiden CSS-Befehle problemlos auseinanderhalten können.
