Cascading Style Sheets

Die HTML-Elemente können mittels sogenannter Stylesheets gestaltet werden. Dabei lassen sich Farben, Schriftarten, aber auch Rahmen und Positionen der Elemente anpassen.

Syntax

Mit CSS schreibt man Regeln. Diese bestehen aus 3 Komponenten:

Selektor {
    Eigenschaft: Wert;
    Eigenschaft: Wert;
    ...
    Eigenschaft: Wert;
}

Selektor

sagt für welche Elemente der Seite diese Regel gelten soll

Eigenschaften

legt fest welche Eigenschaften der gewählten Elemente angepasst werden soll

Werte

für jede Eigenschaft wird ein Wert festgelegt (z.B. Farbe, Länge, fester Wert, ..)

Selektoren

<div id="hauptnavigation" class="entwurf"></div>
<p>asdf</p>
<p class="entwurf">asdf</p>
<p class="definitiv">asdf</p>
<div>adsf</div>

Mehrere Selektoren (S1, S2, ...) können kombiniert werden.

Es existieren mehrere weitere Möglichkeiten, die Selektion einzuschränken. Man kann diese spielerisch im Online-Game CSS-Diner austesten.

Eigenschaften und Werte

Nachdem wir nun Elemente gewählt haben, können wir diese anpassen. Dazu legen wir für gewisse Eigenschaften Werte fest.

Farben

Werte für Farben können wie folgt angegeben werden:

article {
   color: blue;
   border: 4px solid #f0c142;
   background-color: rgb(255,180,120);
   background-color: rgba(255,120,0,0.3);
}

blue

«Textfarbe» – Mögliche Werte: https://www.w3schools.com/colors/colors_names.asp

#f0c142

«Hexfarbe» – 3 Kanäle, RGB, Aufteilung in je zweistellige Hexadezimale Zahl (Rotwert: f0, Grünwert: c1, Blauwert: 42)

rgb(255,120,60)

«Dezimalfarbe» – 3 Kanäle, RGB, Aufteilung in Wert zwischen 0 und 255 pro Kanal.

rgba(120,60,0,0.3)

«Dezimalfarbe mit Transparenz» – 4 Kanäle, RGB + alpha, Aufteilung in 3 Farbwerte zwischen 0 und 255 und einem «Deckungswert» für den Alpha-Kanal zwischen 0 und 1 (0 heisst ganz durchsichtig, 1 heisst nicht durchsichtig).

Distanzen (Breite, Länge, Höhe, Abstände, ...)

Diverse Längeneinheiten können verwendet werden um Abstände anzugeben. Dabei schreibt man die Einheit direkt (ohne Leerzeichen) hinter die Zahl. Man unterscheidet zwischen relativen und absoluten Einheiten.

nav {
    position: absolute;
    bottom: 12px;
    font-size: 1.4rem;
    width: 50%;
    border: 1px solid black;    
}

Position

nav {
    float: right;
}
nav li {
    display: inline;
}   
footer {
    position:absolute;
    bottom:0px;
    right:10px;
}
nav, footer {
    background-color: yellow;
}

Schrift und Text

Neben Schriftfarbe, kann natürlich auch die Grösse, die verwendete Schriftart und weiteres gesetzt werden:

body {
   color: #542437;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-style: italic;
   font-size: 1.2rem;
   font-weight: bold;
   text-align: center;
   text-decoration: underline;
   line-height: 1.5;
}

font-family

Liste von Schriften, die erste Verfügbar wird gewählt

font-style

italic (kursiv) oder normal

font-weight

bold (fett) oder normal

text-align

Ausrichtung: center, left, right oder justify

text-decoration

Dekoration: none, overline, line-through oder underline

line-height

Zeilenabstand: ein Vielfaches der Schriftgrösse

Rahmen

Möchte man ein Element mit einem Rahmen versehen, kann man das mit der border-Eigenschaft erledigen. Diese fasst die drei Werte für border-width, border-style und border-color zusammen. Diese Werte können auch einzeln gesetzt werden. Zudem gibt es für jede Rahmen-Eigenschaft x vier Varianten (border-top-x, border-right-x, border-bottom-x und border-left-x) um die vier Rahmen-Stücke (oben, rechts, unten und links) separat zu gestalten.

article {
   border: 4px solid #f0c142;   
}
nav {
   border-style: dotted;
   border-color: red;
   border-top-color: blue;
   border-width: 5px;
   border-bottom-style: dashed;
}

border-style

Art des Rahmens: solid, dashed, dotted, ...

Box-Model