CSS: Lernen, Verstehen, Anwenden

Ich ging bisher natürlich immer vom Selbstverständnis aus, dass CSS jedem, der meine Blogs liest, ein Begriff ist. Letztens tauchten einige Fragen auf und die Bitte eines Lesers, ich möge doch CSS etwas verständlicher und auch für Anfänger zu erklären.

Zuerst muss man aber ungefähr wissen, wie ein HTML Dokument aufgebaut ist. Nach HTML5 Standard sieht ein einfaches Dokument so aus:

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
</head>
<body>
<h1>Ich bin eine Überschrift</h1>
<h2>Ich bin eine Unter-Überschrift</h2>
<p>Ich bin ein Absatz</p>
<a href="zielseite.html">und ich bin ein Link</a>
</body>
</html>

Ganz wichtig ist hierbei die Zeile <meta name="viewport"...>. Mit dieser Zeile sorgt man für eine korrekte Skalierung der Website auf einem mobilen Endgerät.

Die spitzen Klammern beschreiben ein sogenanntes HTML Tag, auch HTML Markup genannt. Damit wird die Webseite strukturiert und mit Elementen wie Bildern, Text, Videos usw. angereichert. Über CSS kann man die Webseite dann optisch aufpolieren, und auch für mobile Endgeräte entprechend darstellen – das geht mit media queries.

Ein HTML Tag stylen

Um jetzt ein HTML Tag optisch zu verändern, muss man dieses im HTML Code kennzeichnen

<p style="color: #f80;">Ich bin ein oranger Absatz</p>

Baut man dieses Tag in sein HTML Dokument, wird die Schriftfarbe, also color, orange dargestellt. Die Zahlen hinter dem # Symbol beschreiben den RGB Farbwert (hier ff8800, Kurzschreibweise f80).



CSS Klassen

Jetzt könnten wir jedem Tag auf der Seite das Attribut style mitgeben. Das wäre aber nicht praktikabel, da man erstens verschiedene styles immer wieder braucht (wie z.B. bei Überschriften oder links) und zweitens dann die Formatierung nur an einer Stelle ändern muss.

Erstellen wir uns also eine CSS Klasse. Wenn wir innerhalb unseres HTML Dokuments eine Klasse definieren wollen, setzen wir das in <style> Tags.

<style>
  .orange {
    color: #f80;
  }
</style>

Wir haben die CSS Klasse orange erstellt. Unserem HTML Tag <p> geben wir die Klasse mit dem Attribut class mit. Das sieht dann so aus:

<p class="orange">Ich bin ein oranger Absatz</p>

Das hat jetzt den gleichen Effekt wie das style Attribut, nur dass sich der Browser die styling Informationen aus der Klasse zieht. Natürlich kann man der Klasse orange auch noch mehr Informationen mitgeben. Verändern wir die Textgröße und das Gewicht der Schrift (fett):

<style>
  .orange {
    color: #f80;
    font-size: 20px;
    font-weight: 600;
  }
</style>

CSS Eigenschaft

Als CSS Eigenschaft bezeichnet man die Angaben, mit die Tags formatiert werden, also zum Beispiel color, text-align oder margin.

CSS Selektor

Ein CSS Selektor greift auf den Zustand eines Tags zu, zum Beispiel :hover. Hover behandelt das Verhalten beim Überfahren mit der Maus.

Hier habe ich ein kleines Beispiel auf Codepen.io erstellt:

See the Pen ZLPyxb by Alexander Jungwirth (@DaFunkyAlex) on CodePen.dark

Ein Liste der CSS Selektoren und Eigenschaften findet ihr hier: https://css-tricks.com/almanac/

Außerdem verwende ich beim <a> Tag die CSS Eigenschaft transition. Das ist eine nette Spielerei, mit der man das Ändern einer Eigentschaft verlangsamen und verzögern kann. Das gibt dann der Seite eine geschmeidigere und professionellere Wirkung.

Bitte bewerten Sie meinen Beitrag

Alexander Jungwirth ist Webentwickler bei einem Ingolstädter Verlagshaus und ist Inhaber der Firma Webdesign Manching. Seine Leidenschaft ist HTML, seine Passion PHP, seine Hingabe CSS und seine Inbrunst jQuery. Alexander lebt in Manching mit seiner liebevollen Frau und seinen wunderbaren Kindern.

Ein Gedanke zu „CSS: Lernen, Verstehen, Anwenden

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.