Einstieg in CSS

Mit HTML alleine hat man kaum Einfluss darauf, wie eine Seite letzlich im Browser angezeigt wird. Man kann mit HTML lediglich die Struktur (Überschriften, Textblöcke, Zeilenumbrüche,...) beschreiben und natürlich den eigentlichen Text angeben. Das Design wird vollständig getrennt davon mithilfe einer CSS-Datei gestaltet. (CSS steht für Cascading Style Sheet.)

Ein erstes Zusammenspiel

Hier sehen wir eine typische CSS-Datei:

Man erkennt bereits, dass diese im Grunde recht simpel aufgebaut sind. Grundsätzlich muss man zunächst angeben, welchen Bereich man (oder besser: welches Tag) man genauer beschreiben möchte. In dieser Datei wird zuerst der gesamte Körper (body) beschrieben. Wie man vielleicht schon ahnt, wird mit background: darkred; angegeben, dass die Hintergrundfarbe Dunkelrot sein soll. Mit color: lightgray; wird die Textfarbe auf Hellgrau gesetzt.
Die weiteren Anweisungen sehen wir uns gleich an. Schauen wir erst einmal, wie diese CSS-Datei nun verwenden kann und wie das Ergebnis aussieht.

Möchten wir, dass eine HTML-Datei die in der CSS-Datei angegebenen Styles verwendet, so müssen diese verlinken. Das funktioniert mit einer Anweisung der Form <link rel="stylesheet" type="text/css" href="mein_style_01.css"> wobei man am Ende den Namen seiner CSS-Datei angeben muss. Wir gehen hier davon aus, dass sich diese Datei im selben Ordner wie die HTML-Datei befindet!
In dieser HTML-Datei wird sich auf die CSS-Datei mein_style_01.css bezogen:

Neben dem Körper und dessen Hintergrund- und Schriftfarbe wurden noch die folgenden Elemente in der CSS-Datei gestaltet:

• Überschrift vom Typ h1:
• Die Schriftfarbe wurde auf Hellbau gesetzt.
• Mit text-align: center; werden diese Überschriften zentriert.
• Durch letter-spacing: 4px; wird der Zeichenabstand auf 4 Pixel gesetzt.
• Überschrift vom Typ h2:
• Die Schriftfarbe wurde auf Blau gesetzt.
• Auch diese Überschriften werden zentriert.
• Durch font-style: italic; werden sie kursiv dargestellt.
• Mit <i> markierter Text:
• Die Schriftfarbe ist Gelb.
• Durch font-style: normal; wird er normal (also nicht kursiv!) dargestellt.
• Mit <b> markierter Text:
• Die Schriftfarbe ist orange.
• Mehr wurde nicht angegeben!
  Wird der Text im Browser fett dargestellt, liegt das daran, dass der Browser standardmäßig mit diesem Tag so umgeht.
• Mit <em> markierter Text:
• Mit font-family: monospace; wird angegeben, dass man eine sogenannte Festbreitenschrift verwenden will.
  Solche nutzt man gerne, um Programmcode darzustellen.
• Mit <strong> markierter Text:
• text-decoration: underline; sorgt für eine Unterstreichung.
• Mehr wurde auch hier nicht angegeben!
  Wird der Text im Browser fett dargestellt, liegt das daran, dass der Browser standardmäßig mit diesem Tag so umgeht.

Übungsaufgabe

Erstelle eine HTML- und eine CSS-Datei, die zusammen eine solche Darstellung liefern: