CSS schreiben: Einstieg

  • Um CSS in HTML nutzen zu können muss es richtig eingebunden werden.

  • Selektor { Eigenschaft: Wert; }

    Der Aufbau erfolgt über einen Selektor. Als Selektor können generelle HTML Funktionen wie #a, #img, #h1 oder #p benutzt werden und darüber hinaus können diese noch mittels #class oder #id beliebig benannt werden. Nach dem Selektor kommt eine öffnende geschweifte Klammer, dann eine oder mehrere konkrete CSS Eigenschaft(en) und ein Wert mit Semikolon sowie am Ende eine abschließende geschweifte Klammer.

    h1	{
  color: #ff0000;}

.border	{
  border: 1px solid #000;}

  • Selektoren kombinieren

    Gemeinsame Werte können zusammengefasst definiert werden.

    h1, h2, h3, h4 {
  font-family: Verdana;
  font-weight: bold; 
  color: #555}

  • Eltern-Kind Prinzip

    Besondere Kombinationen von Selektoren können auch definiert sein. Z.B. die Farbe von #h2 ist nur dann Schwarz, insofern das Tag #h2 sich in dem Element mit der #ID navi befindet.

    #navi h2 { 
  color: #000;}

  • Stufenweise vererben

    Das Eltern-Kind Prinzip sorgt dafür, dass alle definierten Eigenschaften vererbt werden. Im folgenden Beispiel werden die Schriftart Arial und die Schriftgröße 15px vererbt. Sobald die Maus über den Link fährt (Hover) ändert sich die Farbe in Rot und der Text wird unterstrichen. Die Vererbung sorgt dafür, dass die Schrift immer noch Arial und die Schriftgröße auch weiterhin 15px ist.

    a {
  font-family: Arial; 
  color: #fff; 
  font-size: 15px; 
  text-decoration: none;}

a:hover {
  color: #f00;
  text-decoration: underline;}
 
 Arnold-Bode-Schule
 Berufliche Schule der Stadt Kassel
 Kontakt | Impressum | Datenschutz