Deutsch

CSS-Tutorial

CSS3 Tutorial

CSS Fortgeschritten

CSS Referenzen

CSS Responsive

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

Was ist CSS?

Hallo da draußen, angehende Webdesigner! Lassen Sie uns eine aufregende Reise in die Welt der Kaskadierenden Style Sheets, kurz CSS, antreten. Stellen Sie sich vor, Sie bauen ein Haus. HTML wäre der Aufbau - die Wände, das Dach und das Fundament. CSS? Na ja, das ist all die Farbe, Tapete und Dekoration, die Ihr Haus schön und einzigartig aussehen lassen!

CSS - Home

CSS ist eine Styling-Sprache, die Webbrowser anweist, wie sie HTML-Elemente präsentieren sollen. Es ist wie ein magischer Pinsel, der langweilige, fade Webseiten in lebendige, augenfangende Designs verwandelt. Mit CSS können Sie Farben, Schriftarten, Layouts und sogar coole Animationen auf Ihren Webseiten steuern.

Wer sollte CSS lernen?

Wenn Sie dies lesen, ist CSS wahrscheinlich genau das Richtige für Sie! Aber lassen Sie uns es genauer betrachten:

  1. Webdesigner und Entwickler (das ist ja klar!)
  2. Blogger, die ihre Seiten anpassen möchten
  3. Marketingfachleute, die Landeseiten erstellen
  4. Jeder, der darauf aus ist, Dinge im Internet hübsch aussehen zu lassen!

Vertrauen Sie mir, ich habe gesehen, wie Schüler aus allen Bereichen des Lebens aufleuchten, wenn sie die Macht von CSS erkennen. Es ist wie ein Kind, das entdeckt, dass es außerhalb der Linien färben kann - pure Freude!

Arten von CSS

Es gibt drei Hauptarten, CSS zu Ihrem HTML hinzuzufügen. Lassen Sie uns uns jede anschauen:

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

Hier ist eine praktische Tabelle zur Vergleich:

Art Wie es hinzugefügt wird Bester Einsatz
Inline Direkt in HTML-Tags Schnelle, spezifische Änderungen
Intern Im <head> von HTML Styling einer einzigen Seite
Extern Separates .css-File Styling ganzer Websites

CSS Code-Beispiel

Lassen Sie uns ein einfaches Beispiel betrachten, um CSS in Aktion zu sehen:

<!DOCTYPE html>
<html>
<head>
<style>
/* Dies ist internes CSS */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
</style>
</head>
<body>
<h1>Willkommen bei CSS!</h1>
<p style="color: blue;">Dies ist ein Absatz mit Inline-CSS.</p>
</body>
</html>

In diesem Beispiel verwenden wir sowohl internes als auch inline CSS. Das interne CSS im <style>-Tag setzt die Hintergrundfarbe und Schriftart für die gesamte Seite und stylt das <h1>-Element. Das inline CSS auf dem <p>-Tag macht diesen spezifischen Absatz blau.

Gründe, CSS zu verwenden

Warum sich die Mühe machen? Oh, lassen Sie mich die Gründe aufzählen:

  1. Trennung der Verantwortlichkeiten: Halten Sie Ihre Inhalte (HTML) und Präsentation (CSS) getrennt.
  2. Konsistenz: Wenden Sie das gleiche Styling auf mehrere Seiten leicht an.
  3. Flexibilität: Ändern Sie das Aussehen einer gesamten Website, indem Sie eine Datei ändern.
  4. Effizienz: Reduzieren Sie Code-Wiederholungen und Dateigröße.
  5. Responsivität: Erstellen Sie Layouts, die sich an verschiedene Bildschirmgrößen anpassen.

Voraussetzungen zum Lernen von CSS

Bevor Sie sich in CSS vertiefen, ist es hilfreich, folgendes zu haben:

  1. Grundlegendes Verständnis von HTML
  2. Ein Texteditor (ich empfehle Visual Studio Code)
  3. Ein moderner Webbrowser (Chrome, Firefox oder Edge)
  4. Neugier und Bereitschaft zum Experimentieren!

Machen Sie sich keine Sorgen, wenn Sie noch kein HTML-Experte sind. Wir werden die Grundlagen unterwegs behandeln.

Einstieg in das CSS-Tutorial

Bereit zu beginnen? Grossartig! Lassen Sie uns Ihr Arbeitsumfeld einrichten:

  1. Erstellen Sie einen neuen Ordner für Ihr Projekt.
  2. Innerhalb dieses Ordners erstellen Sie eine HTML-Datei (z.B. index.html) und eine CSS-Datei (z.B. styles.css).
  3. Öffnen Sie Ihre HTML-Datei und fügen Sie diese grundlegende Struktur hinzu:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein CSS-Abenteuer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Willkommen bei meinem CSS-Abenteuer!</h1>
</body>
</html>

Beachten Sie das <link>-Tag im <head>? Das ist, wie wir unsere HTML-Datei mit unserer externen CSS-Datei verknüpfen.

CSS-Basics

Nun, lassen Sie uns stylen! Öffnen Sie Ihre styles.css-Datei und schreiben wir unsere erste CSS-Regel:

body {
background-color: #e6f3ff;
font-family: Arial, sans-serif;
}

h1 {
color: #333333;
text-align: center;
text-shadow: 2px 2px 4px #cccccc;
}

Hier ist, was passiert:

  • Wir stylen das <body>-Element mit einem hellblauen Hintergrund und einer Schriftart.
  • Das <h1> ist zentriert, dunkelgrau und hat einen subtilen Schatteneffekt.

Speichern Sie beide Dateien und öffnen Sie Ihre HTML-Datei in einem Browser. Voilà! Sie haben gerade Ihre erste Webseite gestylt!

CSS-Eigenschaften

CSS verfügt über eine Vielzahl von Eigenschaften zum Spielen. Hier sind einige häufige:

Eigenschaft Was es macht Beispiel
color Setzt die Textfarbe color: #ff0000;
font-size Ändert die Textgröße font-size: 16px;
margin Setzt den Raum außerhalb der Elemente margin: 10px;
padding Setzt den Raum innen in den Elementen padding: 5px 10px;
border Fügt eine Umrandung hinzu border: 1px solid black;

Fügen wir einen Absatz hinzu und stylen wir ihn:

<p class="intro">CSS ist fantastisch! Es lässt uns unsere Webseiten auf unzählige Weisen stylen.</p>

In Ihrer CSS-Datei:

.intro {
font-size: 18px;
color: #4a4a4a;
line-height: 1.6;
margin: 20px;
padding: 15px;
border: 2px dashed #7caed6;
border-radius: 10px;
}

Das erstellt einen gestylten Absatz mit einer gestrichelten Umrandung und abgerundeten Ecken. Cool, oder?

CSS erweitert

Wenn Sie fortschreiten, werden Sie fortgeschrittene CSS-Konzepte entdecken wie:

  1. Flexbox und Grid: Für die Erstellung komplexer Layouts
  2. Medienabfragen: Um Ihre Seite responsiv zu machen
  3. Übergänge und Animationen: Zum Hinzufügen von Bewegung und Interaktivität
  4. Pseudo-Klassen: Zum Styling spezifischer Zustände (wie Hover-Effekte)

Hier ist ein Geschmack eines Hover-Effekts:

.intro:hover {
background-color: #f0f8ff;
transform: scale(1.05);
transition: all 0.3s ease;
}

Dies vergrößert unseren Absatz leicht und ändert die Hintergrundfarbe, wenn Sie darüber hinwegfahren. Toll!

Erinnern Sie sich daran, CSS ist alles về Experimentieren. Haben Sie keine Angst, neue Dinge auszuprobieren, Dinge kaputt zu machen und aus Ihren Fehlern zu lernen. Das ist, wie alle großartigen Webdesigner angefangen haben!

In meinen Jahren des Unterrichtens habe ich unzählige Schüler von CSS-Anfängern zu Design-Zauberern werden sehen. Mit Übung und Geduld werden Sie es auch schaffen. Also los, fangen Sie an zu stylen, und sehen Sie zu, wie Ihre Webseiten zum Leben erwachen!

Credits: Image by storyset

 
Nächstes Tutorial:
CSS - Einführung