Einstieg

Nun, da wir alle unsere Elemente definiert haben, sieht unsere Website noch nicht besonders gut aus. Das liegt daran, dass wir noch kein CSS hinzugefügt haben. CSS ist die Sprache, die wir benutzen, um unsere HTML-Elemente zu stylen.

Unter Styling versteht man das Anpassen des Aussehens von HTML-Elementen. Mit CSS können wir zum Beispiel die Farben, die Grösse, die Position und viele weitere Eigenschaften von HTML-Elementen anpassen.

CSS-Datei erstellen und einbinden

Als Erstes lass uns eine neue Datei namens style.css in einem Ordner namens styles erstellen.

.
└── spitzbubenRezept/
    ├── src/
    │   ├── img/
    │   │   ├── bg-paper.gif                  
    │   │   ├── tischdecke.png
    │   │   └── spitzbuben.jpg
    │   └── styles/
    │       └── style.css
    └── index.html

Um unsere CSS-Datei in unser HTML-Dokument zu laden, müssen wir einen Link im Head-Bereich unseres HTML-Dokuments hinzufügen.

Davor anzeigen

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Spitzbubenrezept</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="./src/styles/style.css" />
</head>

  <body>
  <div id="rezept">
   <div>
    <img src="./src/img/spitzbuben.jpg" alt="Spitzbuben" />
	<h1>Spitzbuben mit Johannisbeergelee</h1>
   </div>
   <div id="inhalt">
  <div id="zutaten">
	  <h2>Zutaten für 4 Personen</h2>
	  <ul>
		<li>125 g Butter, weich</li>
		<li>62.5 g Puderzucker oder Zucker</li>
		<li>1 TL Vanillezucker</li>
		<li>0.5 Prise Salz</li>
      <li>0.5 Eiweiss (frisch)</li>
		<li>175 g Mehl</li>
		<li>ca. 100 g Gelee (Johannisbeeren oder Quitten) oder Konfitüre
		(Aprikosen)</li>
		<li>etwas Puderzucker (zum Bestäuben)</li>
	  </ul>
	</div>
    <div id="zubereitung">
      <h2>Zubereitung</h2>
      <p>
      Butter in einer Schüssel verrühren. Puderzucker, Vanillezucker und
      Salz beigeben, rühren, bis die Masse heller ist.
      </p>
      <p>
      Eiweiss verklopfen, darunterrühren. Mehl beigeben, zu einem Teig
      zusammenfügen, etwas flach drücken, zugedeckt mind. 2 Std. kühl
      stellen.
      </p>
      <p>
      Ofen auf 200 Grad vorheizen. Teig portionenweise zwischen einem
      aufgeschnittenen Plastikbeutel 2 mm dick auswallen. Rondellen von
      ca. 4 cm Ø (Mini-Spitzbuben ca. 2 cm Ø) ausstechen. Bei der Hälfte
      der Guetzli mit einem kleinen Förmchen die Mitte ausstechen. Guetzli
      auf mit Backpapier belegte Bleche legen, ca. 15 Min. kühl stellen.
      </p>
      <p>
      Backen pro Blech: je ca. 6 Min. in der Mitte des Ofens. Herausnehmen,
      Guetzli auf einem Gitter auskühlen.
      </p>
      <p>
      Gelee in einer kleinen Pfanne warm werden lassen, glatt rühren, auf
      die flache Seite der Guetzlibödeli verteilen. Deckeli mit
      Puderzucker bestäuben, darauf setzen.
      </p>
    </div> 
   </div>
 </body>
</html>

Danach anzeigen

Nun können wir mit dem Styling unserer Elemente beginnen. Fangen wir damit an, den Hintergrund auf das Tischdecken-Bild zu setzen.

Grundlegendes Body-Styling

Hierfür wählen wir den Body aus und setzen dessen Hintergrund auf ein Bild. Das sieht dann etwa so aus:

body {
  background-image: url("./src/img/tischdecke.png");
}

Setzen wir nun noch eine Schriftart fest, die unsere Webseite verwenden soll. Hierfür benutzen wir das font-family-Attribut.

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

Gut, nun mit den grundlegenden CSS-Stylings definiert, lass uns das #rezept-Div stylen. Da wir im HTML unserem Rezept-Div eine ID gegeben haben, können wir dieses nun ganz einfach mit #rezept ansprechen. Definieren wir auch hier ein Hintergrundbild.

Rezept-Container stylen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
    background-image: url(../img/bg-paper.gif);	
  }
}

Definieren wir auch eine Breite. Hierfür setzen wir eine minimale Breite von zum Beispiel 1200px und eine Standardbreite von 100% - 10px.

Davor anzeigen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
	background-image: url(../img/bg-paper.gif);
	min-width: 1200px;
	width: calc(100% - 10px);
  }

Danach anzeigen

Nun, da unser Div eine passende Breite hat, lass uns einen Innenabstand von 20px mit padding hinzufügen und einen 5px breiten weissen Rand.

Davor anzeigen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
	background-image: url(../img/bg-paper.gif);
	min-width: 1200px;
	width: calc(100% - 10px);
	padding: 20px;
	border: 5px solid white;
  }

Danach anzeigen

Zum Schluss runden wir noch die Ecken etwas ab mit border-radius und fügen einen Schatten hinzu.

Davor anzeigen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
	background-image: url(../img/bg-paper.gif);
	min-width: 1200px;
	width: calc(100% - 10px);
	padding: 20px;
	border: 5px solid white;
	border-radius: 4px;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  }

Danach anzeigen

Bild-Styling

Nun, da wir das Rezept-Div gestylt haben, lass uns das Bild stylen. Für das Bild definieren wir eine Breite von 100% - 10px für einen Rand. Die Höhe setzen wir auf 400px.

Davor anzeigen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
	background-image: url(../img/bg-paper.gif);
	min-width: 1200px;
	width: calc(100% - 10px);
	padding: 20px;
	border: 5px solid white;
	border-radius: 4px;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  }

img {
  width: calc(100% - 10px);
  height: 400px;
}

Danach anzeigen

Nun ist unser Bild zwar in der richtigen Grösse, aber es wird verzerrt dargestellt. Um das zu verhindern, können wir das object-fit-Attribut verwenden. Lass uns auch gleich die Ecken etwas abrunden mit border-radius.

Davor anzeigen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
	background-image: url(../img/bg-paper.gif);
	min-width: 1200px;
	width: calc(100% - 10px);
	padding: 20px;
	border: 5px solid white;
	border-radius: 4px;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  }

img {
  width: calc(100% - 10px);
  height: 400px;
  object-fit: cover;
  border-radius: 4px;
}

Danach anzeigen

Überschriften stylen

Da wir mehrere Überschriften auf unserer Seite haben, lass uns diese einmal stylen. Hierfür können wir den h2-Selektor verwenden. Da der Titel etwas grösser sein sollte als normaler Text, lass uns eine Schriftgrösse von 20px definieren.

Davor anzeigen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
	background-image: url(../img/bg-paper.gif);
	min-width: 1200px;
	width: calc(100% - 10px);
	padding: 20px;
	border: 5px solid white;
	border-radius: 4px;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  }

  img {
	width: calc(100% - 10px);
	height: 400px;
	object-fit: cover;
	border-radius: 4px;
  }

h2 {
  font-size: 20px;
}

Danach anzeigen

Inhalt

Nun, da wir die Überschriften gestylt haben, lass uns den Inhalt des Rezepts stylen. Hierfür können wir ganz einfach die ID #inhalt verwenden. Momentan ist der Inhalt in dem Inhalts-Div noch untereinander, aber auf unserer Vorlage ist der Inhalt nebeneinander. Um das zu erreichen, können wir display: flex verwenden.

Davor anzeigen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
	background-image: url(../img/bg-paper.gif);
	min-width: 1200px;
	width: calc(100% - 10px);
	padding: 20px;
	border: 5px solid white;
	border-radius: 4px;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  }

  img {
	width: calc(100% - 10px);
	height: 400px;
	object-fit: cover;
	border-radius: 4px;
  }

  h2 {
    font-size: 20px;
  }

#inhalt {
  display: flex;
}

Danach anzeigen

Zutaten-Bereich

Wir haben auch für unsere Zutaten eine ID definiert, was es uns ermöglicht, diese zu stylen. Lass uns eine minimale Breite von 300px für die Liste der Zutaten definieren und die Standardbreite auf 33% setzen. Ausserdem kommen gewisse HTML-Elemente mit einem Standard-Padding (Abstand) daher. Um diesen zu korrigieren, setzen wir das Padding rechts auf 20px.

Davor anzeigen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
	background-image: url(../img/bg-paper.gif);
	min-width: 1200px;
	width: calc(100% - 10px);
	padding: 20px;
	border: 5px solid white;
	border-radius: 4px;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  }

  img {
	width: calc(100% - 10px);
	height: 400px;
	object-fit: cover;
	border-radius: 4px;
  }

  h2 {
    font-size: 20px;
  }

#inhalt {
  display: flex;

    #zutaten {
	  width: 33%;
	  min-width: 300px;
	  padding-right: 20px;
    }

Danach anzeigen

Das sieht schon einmal gut aus, aber die Liste hat noch Punkte und einen Abstand zum Rand, den wir nicht wollen, und die Listenelemente sind etwas zu nah beieinander. Lass uns das korrigieren, indem wir list-style-type auf none setzen, um die Punkte zu entfernen. Ausserdem setzen wir das Padding (Innenabstand) auf 0 und geben dem li unten einen Abstand von 10px.

Listen-Styling verfeinern

Davor anzeigen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
	background-image: url(../img/bg-paper.gif);
	min-width: 1200px;
	width: calc(100% - 10px);
	padding: 20px;
	border: 5px solid white;
	border-radius: 4px;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  }

  img {
	width: calc(100% - 10px);
	height: 400px;
	object-fit: cover;
	border-radius: 4px;
  }

  h2 {
    font-size: 20px;
  }

#inhalt {
  display: flex;
    #zutaten {
      width: 33%;
      min-width: 300px;
      padding-right: 20px;      

      ul {
      	list-style: none;
      	padding: 0;      

        li {
          margin-bottom: 10px;
        }
      }
    }

Danach anzeigen

So, jetzt sind wir fast fertig. Nur ein Problem haben wir noch: Wenn wir die Grösse des Browserfensters kleiner machen, wird unsere komplette Webseite zusammengeschoben. Um dieses Problem zu lösen, können wir eine Media Query verwenden. Mit deren Hilfe können wir CSS-Regeln definieren, die nur bei bestimmten Bildschirmgrössen angewendet werden.

Also, wenn der Bildschirm kleiner als 1200px ist, sollten die Inhalte untereinander rutschen.

Responsive Design mit Media Queries

Davor anzeigen

body {
  background-image: url("./src/img/tischdecke.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  #rezept {
	background-image: url(../img/bg-paper.gif);
	min-width: 1200px;
	width: calc(100% - 10px);
	padding: 20px;
	border: 5px solid white;
	border-radius: 4px;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  }

  img {
	width: calc(100% - 10px);
	height: 400px;
	object-fit: cover;
	border-radius: 4px;
  }

  h2 {
    font-size: 20px;
  }

  #inhalt {
  display: flex;
    #zutaten {
      width: 33%;
      min-width: 300px;
      padding-right: 20px;      

      ul {
      	list-style: none;
      	padding: 0;      

        li {
          margin-bottom: 10px;
        }
      }
    }

@media (max-width: 1200px) {
  #inhalt {
    flex-direction: column;

	#zutaten {
      width: 100%;
      min-width: none;
      margin-bottom: 20px;

    }
  }
}

Danach anzeigen

So, nun sind wir schon fertig mit dem Styling unserer Webseite. Sieht doch schon mal gut aus! Aber was ist, wenn ich für 3 Personen backen möchte, anstatt für 4? Lass uns noch Funktionalität zu unserem Rezept hinzufügen – mit der Hilfe von JavaScript.

CSS-Datei erstellen und einbinden​

Grundlegendes Body-Styling​

Rezept-Container stylen​

Bild-Styling​

Überschriften stylen​

Inhalt​

Zutaten-Bereich​

Listen-Styling verfeinern​

Responsive Design mit Media Queries​