Was ist CSS?
CSS heißt auf englisch Cascading Style Sheets, auf deutsch könnte es man mit “Mehrstufige Formatvorlagen” (selfhtml.org) übersetzen.
Mit CSS erhalten HTML und XML Dokumente ihre Formatierung. Durch CSS wird deren Aussehen bestimmt. Ähnlich wie mit einem Textverarbeitungsprogramm, in dem man Schriftart, -größe und -farbe festlegen kann ist das – und noch viel mehr – mit CSS möglich.
Das Projekt CSS Zen Garden demonstriert eindrucksvoll, wie nur mit CSS ein und dasselbe HTML Dokument komplett unterschiedlich gestaltet werden kann.
Die verschiedenen Designs:
Ein CSS Beispiel:
body { /* body ist das höchstgeordnete sichtbare HTML Element in jedem HTML Dokument, hier werden grundlegende Eigenschaften für alle Elemente festgelegt. */
font-size: 16px; /* Schriftgröße in Pixel */
font-family: Helvetica, Arial, sans-serif; /* Schriftart(en) */
font-weight: normal; /* Schriftschnitt normal */
line-height: 1.4em; /* Zeilenabstand */
background-color: #ffffff; /* Hintergrundarbe weiß */
color: #000000; /* Schriftfarbe schwarz */
}
.red-text { /* Selektoren mit einem Punkt an erster Stelle sind CSS Klassen */
color: #ff0000; /* Schriftfarbe rot */
}In CSS wird die Formatierung für die verschiedenen Elemente des HTML festgelegt. Selektoren sind beispielsweise HTML Elemente wie body, p (Absatz), div (Container Element).
Klassen sind Selektoren, die im HTML den verschiedenen Elementen zugeordnet werden können, vergleichbar mit Formatvorlagen z.B. in Microsoft Word.
In HTML notiert man das beispielsweise so:
<p class="red-text">Dieser Text ist rot.</p>Im Browser sieht das dann so aus:
Dieser Text ist rot.
Unter einer neuen Bezeichnung – CSS3 – kamen ab 2015 großartige neue Funktionen hinzu, unter anderem
- Farbverläufe
- Animationen
- Abgerundete Ecken, kreisrunde Elemente
- Schatten
- Transformationen
Bis dahin konnte man solche Effekte nur mithilfe von Bilddateien bzw. garnicht erzielen.
Hier ein Beispiel für eine CSS Animation:
Der CSS Code:
div {
width: 50px;
height: 50px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
@keyframes example {
0% {background-color:red; left:2%; top:2%;}
25% {background-color:yellow; left:80%; top:2%;}
50% {background-color:blue; left:80%; top:80%;}
75% {background-color:green; left:2%; top:80%;}
100% {background-color:red; left:2%; top:2%;}
}Nach einem Bespiel von w3schools.com
Es ist auch möglich, mit reinem CSS Muster zu gestalten:
Beispiel von CSS3 Patterns Gallery
Dann gibt es noch die tolle Funktion flexbox, die es ermöglicht schnell und unkompliziert komplexe Layouts zu bauen. Aber das läßt sich mit einfachen Beispielen schlecht darstellen, deshalb nur ein Link zu der fantastischen Webseite CSS-TRICKS (A Complete Guide to Flexbox).
Ich hoffe, ich konnte Ihnen eine Idee davon geben, was CSS ist. 🙂
