Deutsch

CSS-Tutorial

CSS3 Tutorial

CSS Fortgeschritten

CSS Referenzen

CSS Responsive

CSS3-Tutorial: Ein Anfängerleitfaden zum Styling des Webs

Was ist CSS?

CSS, was für Cascading Style Sheets steht, ist eine mächtige Styling-Sprache, die verwendet wird, um die Präsentation eines Dokuments, das in HTML oder XML geschrieben ist, zu beschreiben. Es ist wie der Modedesigner der Webwelt, der决定了元素在屏幕, Papier oder anderen Medien dargestellt werden sollen.

CSS3 - Tutorial

Stellen Sie sich vor, Sie bauen ein Haus. HTML wäre der Aufbau - die Wände, das Dach und das Fundament. CSS ist alles, was das Haus gut aussehen lässt - die Farbe, Tapeten, Vorhänge und Möbel. Es ist das, was eine nackte Webseite in ein visuell ansprechendes Meisterwerk verwandelt!

Wer sollte CSS lernen?

Jeder, der beautiful, responsive Websites erstellen möchte, sollte CSS lernen. Dies umfasst:

  1. Web-Entwickler
  2. Web-Designer
  3. UI/UX-Designer
  4. Digitale Marketer
  5. Blogger
  6. Jeder, der sich für Webtechnologien interessiert

Selbst wenn Sie ein kompletter Anfänger ohne Vorkenntnisse in der Programmierung sind, keine Sorge! CSS ist so konzipiert, dass es intuitiv und einfach zu erlernen ist. Mit ein bisschen Übung werden Sie Websites stylen wie ein Profi in kürzester Zeit.

Arten von CSS

Es gibt drei Hauptarten von CSS:

  1. Inline CSS
  2. Internes CSS
  3. Externes CSS

Lassen Sie uns diese mit einigen Beispielen erklären:

1. Inline CSS

Inline CSS wird direkt auf HTML-Elemente über das style-Attribut angewendet.

<p style="color: blue; font-size: 16px;">Dies ist ein blauer Absatz mit 16px Schriftgröße.</p>

Diese Methode ist schnell, aber nicht empfohlen für größere Projekte, da sie Inhalt und Präsentation vermengt.

2. Internes CSS

Internes CSS wird innerhalb des <style>-Tags im HTML- <head>-Bereich platziert.

<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>Dieser Absatz wird grün mit 18px Schriftgröße.</p>
</body>

Diese Methode ist nützlich für das Styling einzelner Seiten, aber ineffizient für mehrseitige Websites.

3. Externes CSS

Externes CSS wird in einer separaten .css-Datei gespeichert und mit dem HTML-Dokument verknüpft.

<!-- In Ihrer HTML-Datei -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* In Ihrer styles.css-Datei */
p {
color: red;
font-size: 20px;
}

Dies ist die effizienteste Methode für größere Projekte, da sie Inhalt und Präsentation trennt und eine einfache Wartung ermöglicht.

CSS Code-Beispiel

Lassen Sie uns ein umfassenderes Beispiel untersuchen, um CSS in Aktion zu sehen:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine großartige Website</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.highlight {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Willkommen auf meiner großartigen Website</h1>
<p>Dies ist ein Absatz mit etwas <span class="highlight">hervorgehobenem</span> Text.</p>
</div>
</body>
</html>

In diesem Beispiel verwenden wir internes CSS, um unsere Webseite zu stylen. Lassen Sie uns aufschlüsseln, was jeder Teil macht:

  • Wir setzen die body-Schrift auf Arial und geben ihm eine helle graue Hintergrundfarbe.
  • Die .container-Klasse erstellt eine zentrierte weiße Box mit etwas Abstand und einem subtilen Schatten.
  • Das h1 ist zentriert und hat eine dunkelgraue Farbe.
  • Die .highlight-Klasse erstellt gelb hervorgehobenen Text.

Gründe für die Verwendung von CSS

  1. Trennung von Inhalt und Präsentation
  2. Konsistenz über mehrere Seiten hinweg
  3. Schnellere Seitenladezeiten
  4. Einfache Wartung und Aktualisierungen
  5. Fähigkeit zu responsivem Design
  6. Verbesserte Benutzererfahrung

Voraussetzungen zum Lernen von CSS

Um mit CSS zu beginnen, benötigen Sie:

  1. Grundverständnis von HTML
  2. Ein Texteditor (wie Visual Studio Code, Sublime Text oder sogar Notepad)
  3. Ein Webbrowser (Chrome, Firefox oder Safari)
  4. Begeisterung und Bereitschaft zum Experimentieren!

Einstieg in den CSS-Tutorial

Nun, da wir die Grundlagen behandelt haben, lassen Sie uns stylen! Wir erstellen eine einfache Webseite und stylen sie schrittweise.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine erste gestylte Seite</title>
<style>
/* Wir fügen hier unser CSS hinzu */
</style>
</head>
<body>
<header>
<h1>Willkommen auf meiner Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Über mich</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<main>
<h2>Über mich</h2>
<p>Hallo da! Ich lerne CSS und es ist großartig!</p>
</main>
<footer>
<p>&copy; 2023 Meine Website</p>
</footer>
</body>
</html>

Nun fügen wir einige CSS hinzu, um es toll aussehen zu lassen!

body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

header {
background-color: #35424a;
color: white;
text-align: center;
padding: 1rem;
}

nav ul {
background-color: #2c3e50;
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline-block;
margin-right: 10px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 10px;
}

nav ul li a:hover {
background-color: #34495e;
}

main {
padding: 20px;
}

footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}

Dieses CSS macht folgendes:

  • Setzt eine konsistente Schrift und Zeilenhöhe für die gesamte Seite.
  • Erstellt eine dunkle Kopfzeile mit zentriertem weißem Text.
  • Stylt das Navigationsmenü mit einem dunklen Hintergrund und inline Listenpunkten.
  • Fügt einen Hover-Effekt für die Navigationslinks hinzu.
  • Fügt dem Hauptinhalt Abstand hinzu.
  • Erstellt eine feste Fußzeile am unteren Ende der Seite.

CSS-Eigenschaften

CSS verwendet eine breite Palette von Eigenschaften, um Elemente zu stylen. Hier ist eine Tabelle einiger häufiger Eigenschaften:

Eigenschaft Beschreibung Beispiel
color Setzt die Textfarbe color: blue;
background-color Setzt die Hintergrundfarbe background-color: #f0f0f0;
font-size Setzt die Schriftgröße font-size: 16px;
font-family Setzt die Schriftart font-family: Arial, sans-serif;
margin Setzt den äußeren Abstand margin: 10px;
padding Setzt den inneren Abstand padding: 5px;
border Setzt den Rahmenstil border: 1px solid black;
text-align Setzt die Textausrichtung text-align: center;
display Setzt den Anzeigetyp display: flex;

CSS Fortgeschrittene

Wenn Sie sich wohler mit CSS fühlen, können Sie fortgeschrittene Konzepte erkunden wie:

  1. Flexbox- und Grid-Layouts
  2. Responsives Design mit Media Queries
  3. CSS-Animationen und Übergänge
  4. CSS-Präprozessor wie Sass oder Less
  5. CSS-Frameworks wie Bootstrap oder Tailwind

Denken Sie daran, der Schlüssel zum Beherrschen von CSS ist die Übung. Haben Sie keine Angst vor Experimenten und Fehler zu machen - das ist, wie wir lernen! Viel Spaß beim Styling!

Credits: Image by storyset

Vorheriges Tutorial:
CSS - Datentypen
Nächstes Tutorial:
CSS - Abgerundete Ecke