Lektion 5:

CSS Intro

Cascading Style Sheets

Ziele:

Einbinden von CSS-Styles

Einbindung von CSS in HTML-Dateien: 3 Varianten

Einbindung: 1️⃣ Inline-Styles

Beispiel:

<body> 
	<h1 style="color:red">Hello CSS</h1>
</body>

Beispiel: hellocss – Walliser Berge

➡ Vorlage | Resultat

Beispiel: hellocss – Walliser Berge – Lösung 

<body> 
	<h1 style="color:red">Hello CSS</h1>
	<h1 style="color:green">Walliser Berge</h1>
	<p style="color:gray">
		Die Walliser Alpen sind mit 41 Viertausender Rekordhalter.
	</p>
	<h2 style="color:blue">Dufourspitze</h2>
	<h2 style="color:blue">Matterhorn</h2>
	<h2 style="color:blue">Weisshorn</h2>
</body>

Einbindung: 2️⃣ Interne Styles

Beispiel:

<head> 
	<style>
    	h2 { color: blue; }
	</style>
</head>
<body>
	<h2>Dufourspitze</h2>
	<h2>Matterhorn</h2>
	<h2>Weisshorn</h2>
</body>

Einbindung: 3️⃣ Externe Styles

Im <head> wird ein Link zu einer separaten, externen css-Datei gesetzt:

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

Beispiel:

❗ Die css-Datei enthält die CSS-Regeln (ohne das Tag <style>)

Aufbau CSS

Das CSS-Dokument umfasst verschiedene CSS-Regeln

Beispiel:

h1 { color: red; }
p { color: green; font-family: Arial; }

hier im Beispiel:

CSS Text-Formatierungen

➡ CSS-Formatierungen.pdf

Farbnamen

➡ vergleiche zum Beispiel https://wiki.selfhtml.org/wiki/Farbe/Farbangaben#Farbnamen

Fazit

Literatur / Nachschlagewerke

Übung 5

➡ Übung 5

CSS-Grundstruktur (interne CSS-Styles)

<!DOCTYPE html>
<html>
	<head>
		<style>
			
		</style>
	</head>
	<body>
			
	</body>
</html>

CSS-Grundstruktur (externe CSS-Styles)

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
			
	</body>
</html>