Impressum
< Videos Inhalt CSS 2 >

CSS

CSS steht für Cascading Style Sheets. In CSS wird das Aussehen von HTML festgelegt. Es gibt drei Möglichkeiten CSS-Information für HTML-Tags festzulegen:
  1. Direkt für ein TAG mit dem style-Attibute, welches jedes TAG hat
  2. Für alle TAGs mit gleichem Namen im head-Teil der HTML-Datei
  3. In einer eigenen CSS-Datei, welche man mit einem link-Tag im head referenziert
CSS-Informationen setzen sich immer aus Namen und Wert zusammen, zwischen Namen und Wert steht ein Doppelpunkt und enden mit einem Strichpunkt.

Beispiel:

<p style="color:red;font-weight:bold;">
Dieser fette Text hat Farbe.
</p>
<p style="color:grey;font-style:italic;">
Dieser kursive Text ist grau.
</p>

Dieser fette Text hat Farbe.

Dieser kursive Text ist grau.

CSS-Angaben von umgebenden HTML-Tags gelten auch für die inneren Tags. Die CSS-Angaben kaskadieren also an alles unter ihnen. Man sagt auch, dass die inneren Tags von den äußeren erben.

Beispiel:

<ol style="font-weight: bold;">
<li>fett</li>
<li style="font-style: italic;">Fett und schräg</li>
<li style="font-weight: normal;">normal</li>
<li>fett</li>
</ol>
  1. fett
  2. Fett und schräg
  3. normal
  4. fett

Ein paar CSS-Eigenschaften

CSS-Attribute Bedeutung
color Textfarbe, es können vordefinierte Namen verwendet werden (z.B. red, blue, ...) oder
rgb(0,255,128) - hier sind die Farbanteile für rot, grün und blau zwischen 0 und 255 anzugeben
#00FF80 - hier wird rot, grün und blau in hexadezimaler Notation angebegeben.
Hier findet man Hilfe bei der Codierung einer Farbe: W3C Farb-Wahl
background-color Hintergrundfarbe des Textes.
text-align Die Ausrichtung des Textes. Mögliche Werte:
  • left
  • right
  • center
  • justify (Blocksatz)
font-weight Werte: normal, bold, bolder, lighter
oder eine Wert zwischen 1 und 1000, wobei normal=400 und bold=700 ist
font-style Werte: normal, italic
text-decoration-line Werte: underline, overline, overline underline, line-through none
text-decoration-style Wenn die text-decoration-line nicht none ist, kann man den hiermit die Linienart festlegen
Werte:
mit underline: solid, wavy, dotted, dashed, double, solid

mit overline: wavy, dotted, dashed, double solid

mit overline und underline: wavy, dotted, dashed, double solid

mit line-through overline und underline: wavy, dotted, dashed, double solid