Tag Zwei

Was ist CSS?

CSS steht für Cascading Style Sheets und ist eine Styling-Sprache. CSS nutzen wir um HTML Elemente zu formatieren, mit Farben und Formen zu versehen und ganze Layouts zu erstellen.

CSS intern einbinden

Es gibt mehrere Arten, wie man CSS einbinden kann. Fürs erste lernen wir die «Internal Styles» Methode im Head Bereich der Website kennen.

CSS Syntax

CSS Selektoren

HTML Tags

Mit einem CSS Selektor können einzelne HTML Elemente angesteuert werden. Es gibt viele unterschiedliche Selektoren. Zum Beispiel kann ein HTML direkt mit seinem Tag Name angesteuert werden.

            h1 { color: blue; }

p { color: green; }
        

Klassen und IDs

HTML Elementen können jedoch auch Klassen und ID's vergeben werden, welche ebenfalls als Selektor verwendet werden können. Eine Klasse oder ID wird dafür als HTML Attribut dem Element übergeben und via CSS angesteuert.

            h1 { color: blue; }

p { color: green; }

.untertitel { color: red; }

#laufschrift { color: purple; }

        

Erste CSS Properties

            p {
  color: white;
  background-color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  width: 50%;
  border-width: 5px;
  border-color: red;
  border-style: solid;
}
        

Das DIV HTML Tag

Das DIV Tag definiert einen Bereich innerhalb eines HTML Dokumentes. Es dient als Container für andere HTML Elemente.

Block & Inline Elemente

Jedes HTML-Element hat ein Display Value (Standard-Anzeigewert), je nachdem, um welche Art von Element es sich handelt. Es gibt zwei Values: Block und Inline.

Block

• Ein Block-Level-Element beginnt immer in einer neuen Zeile.

• Ein Block-Level-Element nimmt immer die gesamte verfügbare Breite ein – es erstreckt sich nach links und rechts so weit wie möglich.

Inline

• Ein Inline-Element beginnt nicht in einer neuen Zeile.

• Ein Inline-Element nimmt nur so viel Breite wie nötig in Anspruch.

Seiteninspektor

Der Seiteninspektor ist ein handliches Werkzeug zur Untersuchung von Stuktur und Gestaltung einer Seite.

CSS Box Modell

In CSS wird der Begriff "Box-Modell" verwendet, wenn es um Design und Layout geht. Das CSS-Box-Modell beschreibt die Höhe und Breite eines HTML Elementes und definiert dessen Abstände. Es besteht aus:

• Margin = Aussenabstand

• Border = Rahmen

• Padding = Innenabstand

• Inhalt = Text oder weitere HTML Elemente.

Margin, Padding & Border

Jedes HTML Element kann mit Aussen- und Innenabständen und einem Rahmen versehen werden.

            div {
  /*  Margin | Aussenabstände  */
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  /*  Gleich wie: */
  margin: 10px 10px 10px 10px;
  /*  Gleich wie: */
  margin: 10px;

  /*  Padding | Innenabstände  */
  padding-top: 10px;
  padding-right: 200px;
  padding-bottom: 10px;
  padding-left: 200px;
  /*  Gleich wie: */
  padding: 10px 200px 10px 200px;
    /*  Gleich wie: */
  padding: 10px 200px;

  /*  Border | Rahmen  */
  border-width: 10px;
  border-style: solid;
  border-color: blue;
  /* gleich wie  */
  border: 10px solid blue;
}