x

CSS Grundkurs: Texte und Überschriften formatieren!

In diesem CSS Tutorial zeigen wir dir, wie du die Optik von Texten und Überschriften auf deiner Webseite verändern kannst.

Play Video

Index.html

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.1, user-scalable=yes"> <meta name="description" content="Das ist die index.html Datei aus dem SIFA Digital CSS Grundkurs."> <title>Index - CSS Grundkurs</title> <!-- CSS Bereich --> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>Überschrift</h1> <p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. </p> </body> </html>

style.css

h1 { font-family: Arial, sans-serif; font-size: 35px; font-weight: 600; text-decoration: underline; } p { font-family: monospace; font-size: 18px; color: #7c7c7c; text-transform: uppercase; line-height: 25px; }

CSS- und HTML-Dateien herunterladen:

Verpasse keine neuen Inhalte!

Um keine zukünftigen Inhalte zu verpassen, kannst du dich kostenlos in unseren E-Mail Newsletter eintragen. Als Mitglied des E-Mail Newsletter bekommst du exklusive Inhalte sowie eine Übersicht der neuen Tutorials von uns zugesendet.
Du kannst jederzeit deine E-Mail-Adresse aus dem Newsletter wieder austragen.

Für aktuelle Inhalte und Neuigkeiten findest du uns auch bei YouTube, Facebook und Instagram.

E-Mail Newsletter:

Aktuell ist unser Newsletter deaktiviert.

Social Media: