Aufgabe Nr. 13: Stylesheet-Angaben auslagern

Update 2017-02-12: URL der Google CSS Style Rules aktualisiert.

Bevor ich weitere kleine Anpassungen am Aussehen des Blogs vornehme, möchte die vorhandenen Angaben in eine separate Datei auslagern. Ich schneide daher aus der Datei /index.php alle Zeilen von <style type="text/css"> bis </style> aus und speichere sie in die Datei /style.css.

Bei dieser Gelegenheit lasse ich der neuen Datei auch die meisten von Googles CSS Style Rules angedeihen und komme zu folgendem Ergebnis:

*,
html {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ddd;
  color: #333;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', verdana, sans-serif;
  font-size: .9em;
  margin: 0 auto;
  padding: 0;
}

a {
  color: #069;
}

h2 {
  color: #666;
  font-size: 1.4em;
  font-weight: normal;
}

p {
  line-height: 1.6em;
  margin-bottom: 10px;
}

div.wrapper {
  margin: 50px auto 10px;
  padding: 5px;
  width: 80%;
}

div.post {
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 7px;
}

span.date {
  color: #666;
  font-size: .7em;
  text-transform: uppercase;
}

div.navigation p a {
  font-size: 1.2em;
}

div.navigation p.previous-link {
  float: left;
  text-align: left;
  width: 48%;
}

div.navigation p.next-link {
  float: right;
  text-align: right;
  width: 48%;
}

div.post-content {
  padding-top: 4px;
}

div.post-content ol,
div.post-content ul {
  line-height: 1.6em;
  margin: 1em 0 .6em;
  padding: 0 0 0 2em;
}

div.post-content li {
  margin-bottom: .4em;
}

div.post-content pre {
  margin: 1em 0;
  overflow: auto;
}

div.clear { 
  clear: both;
}

div.footer p {
  color: #999;
  font-size: .9em;
  padding-top: 10px;
  text-align: center;
}

div.footer p a {
  color: #999;
}

Zum Schluss füge ich der Datei /index.php eine Zeile <link rel="stylesheet" type="text/css" href="style.css" /> direkt über </head> hinzu, um die Stylesheet-Angaben dem Browser bekannt zu machen.