CSS Basic

Folge den Anleitungen Schritt für Schritt - Führe die Aufgabe jewils im Editor aus - Schreibe die CSS-Eigenschaften und prüfe das Ergebnis mit der Live-HTML-Ausgabe unter dem Editor - Du kannst deine Arbeiten jeweils mit dem blauen Button über dem Editor kopieren - Diese Dateien kannst du jederzeit in deinem eigenen HTML-Editor und deinem Browser weiter bearbeiten. Eine hilfreiche Liste (zum ausdrucken): CSS Eigenschaften und Werte

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - CSS Basic</title>
	<style>
		body {
			background-color:white;
		}
		h1 {
			color:black;
		}
		h2 {
			color:black;
		}
		p {
			color:black;
		}
	</style>
</head>
<body>
	<h1>Haupttitel</h1>
	<h2>Untertitel</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa consequatur, iste alias quaerat eos nulla cupiditate provident dolorem repellendus ea, quo reprehenderit fugit hic suscipit assumenda. Deleniti adipisci tenetur culpa?</p>
</body>
</html>


 

            

Aufgabe 1 > weiter

Erkenne den Zusammenhang von HTML-Element und CSS-Regel. Jedes HTML-Element kann mit CSS-Regeln (Absatzformate) angesprochen und "gestylt" werden. (Du kannst den Bereich für Editor und Aufgabe höher einrichten. Benutze die Schaltfläche fenster )

Untersuche die HTML-Elemente im nebenstehenden Editor:
<body>, <h1>, <h2> und <p>
Untersuche die CSS-Regeln für diese Elemente:
body { }, h1 { }, h2 { }, p { }
Du siehst, es ist für jedes HTML-Element eine CSS-Regel vorbereitet. Die Syntax einer CSS Regel:
Verändere die Farbe der Texte, indem du den Wert (black/white) der jeweilgen Eigenschften (color/background-color) veränderst.
Verwende Farwerte wie: blue, green, purple, yellow, orange, silver, black, white (oder Hexadezimale Werte: #ff000 )
Überprüfe deine Anpassungen im Fensterberich unter dem Editor
Optional kannst du deine Aufgaben mit dem Button "kopieren" in deine Zwischenablage ablegen und in jeden Editor einfügen und die Datei auf deinem Gerät speichern.

DB-Table: cssbasic1