Klasse Digital

Suche
Close this search box.

Einführung in CSS

Verfasst am: 17.04.2023

1. Der Unterschied von HTML und CSS

HTML ist wie das Skelett des Körpers. Es gibt ihm Struktur und hilft dabei, die verschiedenen Teile des Körpers zu organisieren, wie Arme, Beine und Organe. CSS ist wie die Kleidung und das Aussehen des Körpers. Es hilft dabei, den Körper hübsch und ansprechend aussehen zu lassen, indem es Kleidung, Frisuren und Accessoires hinzufügt.

Übertragen auf das Webdesign, definiert HTML  das Layout einer Seite, während CSS sich um Styling-Elemente kümmert. Während ich also mit HTML eine Tabelle erstellen kann, kann ich sie mit CSS einfärben, die Schriftart verändern und die Schriftgröße anpassen. Zudem kann ich die Tabellenrahmen anpassen.

2. Die Einbindung von CSS in HTML

Folgender Code bindet das Stylesheet „stylesheet.css“ in HTML ein. Die Einbindung muss im <head>-Tag erfolgen.

				
					<link rel="stylesheet" type="text/css" href="stylesheet.css">
				
			

Das Styling der HTML-Elemente erfolgt über die Tags. Im Beispiel erhält die Überschrift zweiter Ordnung (h2) die Schriftfarbe rot.

				
					h2 { color: red; }
				
			

Alternativ können mehrere Elemente über Klassen oder einzelne Elemente über IDs angesprochen werden. In HTML sieht die Zuweisung einer Klasse oder ID wie folgt aus:

				
					<p id="eindeutig">Text</p>
<p class="klasse">Text</p>
				
			

In CSS erfolgt das Styling der Elemente dann über einen Punkt für die Klasse oder ein # für die ID.

				
					#eindeutig { color: red; }
.klasse { color: red; }
				
			

3. Wichtige Formateigenschaften

CSS Format Beschreibung
background-color Hintergrundfarbe
Schrift
font-family Schriftfamilie, wie z.B. Arial
font-size Schriftgröße
font-weight Schriftdicke, wie z.B. fett (bold)
font-style Schriftstil, wie z.B. kursiv (itallic)
color Schriftfarbe
Textgestaltung
text-align Textausrichtung, wie z.B. zentriert (center)
text-decoration Textgestaltung, wie z.B. unterstrichen (underline)
text-transform Textart, wie z.B. Großbuchstaben (uppercase)
Abstände
padding Innenabstand bei Layouts, wie z.B. Tabellen
margin Außenabstand bei Layouts, wie z.B. Tabellen
Rahmen
border-style Rahmentyp, wie z.B. durchgezogen (solid) oder gepunktet (dotted)
border-color Rahmenfarbe, wie z.B. rot (red)
width Rahmenbreite
height Rahmenhöhe
Pseudoklassen
< HTML tag> : hover Style bei Mausberührung
< HTML tag> : active Style bei Mausklick

4. Wissen prüfen

Beantworte die folgenden Fragen.

5. Dokumente zum Download