Beim Vergleich unseres aktuellen Stands mit der Vorlage fällt dem geschulten Auge auf, dass in der Vorlage eine andere Schriftart verwendet wird. Tatsächlich kommt dort eine Webfont aus dem unter Webentwicklern sehr bekannten Verzeichnis von kostenfrei verwendbaren Schriften "Google Fonts" zum Einsatz. Webfonts werden im Gegensatz zu den auf einem PC installierten Schriften zur Laufzeit in den Browser geladen und sind somit auch verfügbar, wenn ein Nutzer eine bestimmte Schriftart nicht installiert hat. Google Fonts können innerhalb einer WebApp komfortabel gesichtet und getestet werden. Fällt die Wahl dann auf eine bestimmte Font, so kann man sich das entsprechende CSS-Schnipsel für die Einbindung der Schrift und die Deklaration für eigene CSS-Regeln von Google generieren lassen. In unserem Beispiel kommt die Schriftart "Lato" zum Einsatz, diese können wir mit dem Stylesheet-Link direkt von den Google-Servern laden. Dazu müssen wir im <head> der Site nur den von Google generierten Link auf das Stylesheet einfügen:
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
Bis auf den Namen der Font (nach "?family=") und die zu ladenden Schriftschnitte ("Dicke" der Schrift), die nach dem Schriftnamen mit Doppelpunkt stehen (hier: "300,400"), ist dieser Link bei Google Fonts immer gleich.
Zugreifen können wir auf diese Webfont nun in unserem Stylesheet so:
font-family: 'Lato', sans-serif;
font-weight: 300;
(oder font-weight: 400;)
Wir fügen das externe Stylesheet von Google nun in unserem <head> ein, außerdem definieren wir die Schriftart "Lato" für den <body>, um diese Schrift-Deklaration auf alle innerhalb des Body liegenden Elemente zu vererben:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<!-- Das Style Sheet, inline integriert -->
<style>
/* Unsere ersten CSS-Regeln */
body {
font-family: 'Lato', sans-serif;
background-image: url('https://webdev.raphael-rossmann.de/wp-content/uploads/texture-20-res.jpg');
background-size: cover;
margin:0;
}
/* Ausgelassene CSS-Regeln */
</style>
</head>
Der Check im Browser zeigt die nun geänderte Schrift, zusätzlich können Sie die Schriftart auch in den Entwicklertools kontrollieren. Ganz am Schluss müssen wir noch zwei kleine Details anpassen: Dir Farbe des Links im Text ("Browser") sollte noch auf die gleiche Farbe wie der Hintergrund des <footer> eingestellt werden. Wir fügen also eine entsprechende Regel für den Tag <a> hinzu. Außerdem sind die Aufzählungszeichen in der Liste in der Vorlage nicht rund sondern eckig. Daher fügen wir eine Regel für die ungeordnete Liste <ul> hinzu mit der Deklaration:
list-style-type: square;
Unser finaler Markup sieht so aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<!-- Das Style Sheet, inline integriert -->
<style>
/* Unsere ersten CSS-Regeln */
body {
font-family: 'Lato', sans-serif;
background-image: url('https://webdev.raphael-rossmann.de/wp-content/uploads/texture-20-res.jpg');
background-size: cover;
margin:0;
}
header {
background-color: #404040;
color: #ffffff;
padding: 10px 0;
text-align: center;
}
article {
width: 580px;
margin: 0 auto;
background-color: #ffffff;
padding-bottom: 20px;
}
h1 {
color: #404040;
/* gleich wie: color: rgb(64,64,64); */
font-weight: normal;
font-style: italic;
font-size: 35px;
text-transform: uppercase;
margin:30px 20px;
}
h2 {
background-color: #04407a;
color: #ffffff;
padding: 20px 0;
text-align: center;
}
h2.direkt {
margin-top: 0px;
}
p {
margin:16px 20px;
}
img {
width: 580px;
display: block;
}
a {
color: #a30064;
}
ul {
list-style-type: square;
}
footer {
background-color: #a30064;
color: #ffffff;
padding: 10px 0;
text-align: center;
}
</style>
</head>
<body>
<article>
<header>HTML rocks!</header>
<h1>Willkommen im Web!</h1>
<p>HTML hilft uns dabei, unsere Ideen <strong>weltweit</strong> zu verbreiten.<br>
Mit einer handvoll Tags lässt sich Text <em>klar strukturieren</em> und
<em>übersichtlich präsentieren</em>.</p>
<h2>Der Schlüssel</h2>
<p>Der <a href="http://de.wikipedia.org/wiki/Webbrowser" target="_blank"
title="Definition in Wikipedia aufrufen">Browser</a> ist das Fenster
in die Welt des WWW. Er ist heute in fast jeder Tasche und jederzeit
mit dem Internet verbunden.</p>
<p>Sogar am See kann man damit Surfen:</p>
<img src="https://webdev.raphael-rossmann.de/wp-content/uploads/see.jpg"
alt="Ein schöner See mit W" title="Ein schöner See mit W" width="600">
<h2 class="direkt">Alles in Ordnung?</h2>
<p>HTML hilft uns dabei, Texte zu ordnen:</p>
<ul>
<li>Durch Überschriften</li>
<li>Durch Absätze</li>
<li>Durch Listen</li>
<li>Durch optische Betonungen</li>
</ul>
</article>
<footer>HTML5 rocks even more!</footer>
</body>
</html>
Aus diesem Markup ergibt sich folgende Ausgabe im Browser. Damit kennen Sie nun die grundlegenden Möglichkeiten, um HTML per CSS zu stylen. Natürlich gibt es noch einige weitere CSS-Techniken, die man zum stylen einer komplexeren Site benötigt, aber im Rahmen dieses Skripts ging es ja zunächst eher um erste Gehversuche und kleine Erfolgserlebnisse. Einen tieferen Einstieg in das Thema CSS bietet z.B. die schon öfter verlinkte w3schools.com.
Einen Spickzettel der zentralen CSS-Eigenschaften, alphabetisch geordnet, erhalten Sie im CSS-CheatSheet.
Nun haben wir gesehen, wie man HTML-Seiten aufbaut und mit einem Look und Layout versieht. Wir haben aber noch nicht viele interaktive Möglichkeiten kennen gelernt, die ja moderne Webapplikationen mindestens genauso prägen, wie der Look. Hierbei spielt JavaScript eine wichtige Rolle. Einen Crashkurs zu dieser dritten Säule des Web erhalten Sie im nächsten Abschnitt.