Das Zusammenspiel von HTML und CSS

: Kategorie: Ratgeber; 19. Juli 2018; 2.7
ca. 2 Minuten

Um mit CSS Elemente zu formatieren, ist eine klassische HTML-Struktur erforderlich. Wie CSS auf spezielle Bereiche angewandt wird und welche Verbindung zwischen den beiden Systemen besteht, soll in diesem Beitrag erklärt werden.

CSS funktioniert im Web nicht ohne HTML

Da der Artikel im Speziellen auf CSS eingeht, wird der erforderliche Grundaufbau einer HTML-Seite nicht weiter thematisiert, sondern eine HTML-Struktur in einem Beispiel dargestellt und beschrieben, wie man sinnvoll die einzelnen Selektoren von CSS verwendet, um bestimmte Änderungen zu erzeugen.

Ein klassisches Beispiel ist ein Joomla-Artikel und die einzelnen Elemente, die dazu gehören. Gehen wir einmal von folgender Struktur aus:

der Hauptcontainer für den Inhalt des gesamten Artikels (im Beispiel ".item-page")
das Beitragsbild
die Überschrift
der Fließtext

Eine vereinfachte HTML-Struktur eines Joomla-Beitrags sieht dann wie folgt aus:

HTML

<div class="item-page">
<h1>Überschrift</h1>
<div class="pull-right item-image"><img src="/pfad/zum/bild.jpg"></div>
<p>Hier steht der Fließtext</p>
</div>

Das Ziel im diesem Beispiel ist es nun, mit CSS eine ähnliche Formatierung wie auf unserer Seite zu erzeugen. Deshalb gehen wir nach und nach die Elemente durch und zeigen auf, was genau passiert.

Klassen in HTML mit CSS selektieren

Eine Klasse in HTML kann auf jedes Element angewandt werden. Dies kann man im Element einfach mit class="beispiel" einbauen. Um die entsprechende Klasse in CSS zu selektieren, wird ein Punkt verwendet (vgl. Klasse item-page im nächsten Beispiel). Um eine ID zu selektieren, benutzt man eine Raute ("#").

Der item-page div Container

Der Div-Container mit der Klasse "item-page", der alle weiteren Elemente umschließt, ist die Hintergrundfläche. In unserer Seite ist dies der weiße Bereich (background-color). Der Container hat einen Abstand nach außen (padding), damit die Schrift nicht am Rand "klebt". Folgende CSS-Regeln werden angewandt:

.item-page{
background-color: #fff;
padding: 24px;
}

Das Beitragsbild

Das Beitragsbild liegt in einem Div-Container mit den Klassen "pull-right item-image". Das Bild soll auf die rechte Seite geschoben werden und gleichzeitig maximal 25% der Gesamtbreite einnehmen.

.pull-right.item-image{
float: right;
max-width: 25%;
}

Die Überschrift

Die Überschrift hat keine besondere Klasse und kann somit direkt mit dem Element selektiert werden ("h1"). Folgende Formatierungen werden angewandt:

die Schriftgröße soll 32px sein (font-size)
der Abstand nach unten soll 24px betragen (margin-bottom)
die Schrift soll nur in Großbuchstaben sein (text-transform)
die Schriftdicke soll dünn sein (font-weight)

h1{
font-size: 32px;
margin-bottom: 24px;
text-transform: uppercase;
font-weight: lighter;
}

Der Fließtext

Der Fließtext wird in Absätzen geschrieben und mit einem "p" versehen. Auch dieses Element wird direkt in CSS angepasst. Folgende Formatierungen werden angewandt:

die Schriftgröße wird auf 16px gesetzt (font-size)
der Abstand nach unten soll 24px betragen (margin-bottom)
die Zeilenhöhe soll 24px betragen (line-height)
die Schriftfarbe soll schwarz sein (color)
die Schriftart soll "Open Sans" sein (font-family)

p{
font-size: 16px;
margin-bottom: 24px;
line-height: 24px;
color: #333;
font-family: "Open Sans", sans-serif
}

Mit diesen wenigen Angaben hat man bereits ein Grundlayout für den Aufbau einer Standardseite. Natürlich werden noch einige Regeln "vererbt" bzw. auf mehrere Elemente gleichzeitig angewandt. Dieses und weitere Themen werden im nächsten Beitrag genauer erläutert.

Hier steht PHP