Was ist Css?
CSS existiert seit 1997 und wird kontinuierlich weiterentwickelt. Heute zählt CSS ebenso wie HTML zu den grundlegenden Sprachen im Netz und gilt als aktueller Standard bei Webdesign und Layout. Von Anfang an gab es bei CSS das Ziel, Inhalt und Design zu trennen. Das vereinfacht sowohl den Programmcode einer Webseite wie auch die Arbeit für den Webdesigner.
Zudem erweitert CSS die Gestaltungsmöglichkeiten. Während sich mit HTML etwa nur einfache Texte und Inhalte darstellen lassen würden, können mit CSS auch interaktive Elemente aufgebaut werden – dazu zählen zum Beispiel Navigationen. Darüber hinaus unterstützt CSS die responsive Darstellung. Das heißt, per CSS können passende Darstellungsformen für unterschiedliche Devices – vom Monitor über den Drucker bis zum Smartphone – vorgegeben werden.
Vorteile von CSS
- Design lässt sich leichter auf andere Projekte übertragen.
- Das Coding wird übersichtlicher.
- Websites laden schneller und sind nicht mehr von Code überfrachtet
- Mehr Funktionalität als HTML (Animationen)
- Fehler sind leichter erkennbar.
CSS wird von allen gängigen Browsern unterstützt. Es kann allerdings Einschränkungen bei der Darstellung des Layouts geben. Es ist deshalb sinnvoll, mit CSS erstellte Webseiten immer auf möglichst allen gängigen Browsern zu testen.
Wie fangen wir an?Zuerst erstellen wir im Ordner Css eine Datei mit einem frei wählbaren Namen, z.B. (style.css).
Nun können wir die einzelnen Tags aufrufen und formatieren.
Die Syntax des Css haben Sie in den vorherigen Übungen kennen gelernt.
Nun gehen wir an die Überschriften:
Bei mehreren Tags sind diese durch (,) zu trennen.
Margin = Aussenabstand Definiert den Außenabstand zweier Elemente.
Um beispielsweise einen Abstand zwischen Text und Seitenrand zu gewinnen, kommt der Außenabstand (margin) zum Einsatz.
Alle Abstände können auch einzeln bestimmt werden.
| Eigenschaft | Bedeutung |
|---|---|
| margin-left | Legt den Außenabstand zur linken Kante fest |
| margin-right | Legt den Außenabstand zur rechten Kante fest |
| margin-top | Legt den Außenabstand zur oberen Kante fest |
| margin-bottom | Legt den Außenabstand zur unteren Kante fest |
Padding (Polster) = Innenabstand
Der Innenabstand in CSS-Sprache heißt padding. Aufgeteilt ist er in padding-left (für linken Abstand), padding-top (für oberen Abstand), padding-right (für rechten Abstand) und padding-bottom (für unteren Abstand). Man kann ihn, wie beim Außenabstand, für z. B. einem Paragraph oder für die ganze Seite benutzen.
| Eigenschaft | Bedeutung |
|---|---|
| padding-left | Legt den Innenabstand zur linken Element fest |
| padding-right | Legt den Innenabstand zur rechten Element fest |
| padding-top | Legt den Innenabstand zur oberen Element fest |
| padding-bottom | Legt den Innenabstand zur unteren Element fest |
Css ist so umfangreich, dass wir gerade mal die „wichtigsten“ Anweisungen und Grundlagen durchnehmen können. Die Website „css-wiki.com“ hat eine sehr gute Referenzliste erstellt. Die Website „caniuse.com“ zeigt welche Browser welche Anweisung unterstützt.