Zum Inhalt

HTML & CSS Dokumentation

Inhaltsverzeichnis

  1. HTML Grundlagen
  2. CSS Grundlagen
  3. CSS Fortgeschritten
  4. Zusammenfassung & Tipps

TEIL1 – HTML

1. HTML Basic

Was ist HTML?

  • Hypertext Markup Language – definiert Struktur und Inhalt von Webseiten.

Grundgerüst (Minimalbeispiel):

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel der Seite</title>
</head>
<body>
    <h1>Hallo Welt!</h1>
    <p>Mein erster Absatz.</p>
</body>
</html>

2. HTML Elements & Attributes

Elemente

  • Element = Tag + Inhalt + optional Attribut(e). 
    <p class="info">Dies ist ein Absatz.</p>

Attribute

  • Zusätzliche Informationen in Tags, z.B. class, id, src, href usw. 
    <img src="bild.jpg" alt="Beschreibung" width="300">

3. HTML Headings

  • Überschriften: <h1> (wichtigste) bis <h6> (unwichtigste).

html

Kopieren

<h1>Hauptüberschrift</h1> <h2>Unterüberschrift</h2>

4. HTML Paragraphs

  • Absätze: <p>

html

Kopieren

<p>Dies ist ein Absatz.</p>

5. HTML Styles (Inline)

  • Inline-CSS (nicht empfohlen, aber möglich):

html

Kopieren

<p style="color: red; font-size: 20px;">Roter Text</p>

6. HTML Formatting

  • fett: <b> oder <strong>
  • kursiv: <i> oder <em>
  • unterstrichen: <u> (selten genutzt)

Beispiel:

html

Kopieren

<p>Ich bin <strong>fett</strong> und <em>kursiv</em>.</p>

7. HTML Quotations

  • Blockquote: Zitat im Block:

html

Kopieren

<blockquote cite="https://example.com"> Dies ist ein längeres Zitat. </blockquote>

  • q: Kurzes Inline-Zitat:

html

Kopieren

<p>Er sagte: <q>Hallo!</q></p>

8. HTML Comments

  • Kommentar in HTML:

html

Kopieren

<!-- Das ist ein Kommentar und wird nicht angezeigt -->

9. HTML Colors

  • HTML unterstützt Farbnamen (red), Hex-Werte (#ff0000), RGB (rgb(255,0,0)) usw.

html

Kopieren

<p style="color: #ff0000;">Roter Text</p>

10. HTML & CSS (Trennung)

  • Normalerweise wird CSS in einer separaten Datei verlinkt:

html

Kopieren

<link rel="stylesheet" href="styles.css">

  • Externer Link:

html

Kopieren

<a href="https://example.com" target="_blank">Externer Link</a>

  • Interner Link (zu einer anderen Seite im Projekt):

html

Kopieren

<a href="about.html">Über mich</a>

12. HTML Images

  • Bilder mit src und alt:

html

Kopieren

<img src="bild.jpg" alt="Beschreibung" width="200">

13. HTML Favicon

  • Favicon im <head>:

html

Kopieren

<link rel="icon" href="images/favicon.ico" type="image/x-icon">

14. HTML Page Title

  • Titel im <head>:

html

Kopieren

<title>Meine Webseite</title>

15. HTML Tables

  • Tabellenaufbau:

html

Kopieren

<table> <thead> <tr> <th>Produkt</th> <th>Preis</th> </tr> </thead> <tbody> <tr> <td>Apfel</td> <td>€1</td> </tr> </tbody> </table>

16. HTML Lists

  • Ungeordnet: <ul>
  • Geordnet: <ol>
  • Listenpunkt: <li>

html

Kopieren

<ul> <li>Item 1</li> <li>Item 2</li> </ul>

17. HTML Block & Inline

  • Block-Elemente: Starten in neuer Zeile (z.B. <div>, <p>, <h1>, <ul>, <table>).
  • Inline-Elemente: Fließen im Text mit (z.B. <span>, <a>, <strong>, <img>).

18. HTML Div & Span

  • Div = Block-Level-Container:

html

Kopieren

<div class="container"> <p>Inhalt</p> </div>

  • Span = Inline-Container:

html

Kopieren

<span class="highlight">Text</span>

19. HTML Classes & Id

  • class = wiederverwendbar.
  • id = eindeutig pro Seite.

html

Kopieren

<div class="box"></div> <div id="unique-box"></div>

20. HTML Iframes

  • Externe Seite/Video einbetten:

html

Kopieren

<iframe src="https://example.com" width="600" height="400"></iframe>

21. HTML JavaScript

  • Inline (selten empfohlen):

html

Kopieren

<script>alert('Hallo');</script>

  • Externe Datei:

html

Kopieren

<script src="app.js"></script>

22. HTML File Paths

  • Relative Pfade: images/pic.jpg (im selben Ordner).
  • Absolute Pfade: http://example.com/pic.jpg.

23. HTML Head

  • Enthält <title>, <meta>, <link> (CSS, Favicon), <script> usw.

24. HTML Layout

  • Typische Struktur:

html

Kopieren

<header></header> <nav></nav> <main></main> <aside></aside> <footer></footer>

25. HTML Responsive

  • Viewport:

html

Kopieren

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • Nutze CSS Media Queries (siehe CSS-Teil).

26. HTML Computer Code

  • <code> für Code-Zeilen:

html

Kopieren

<code>console.log("Hello")</code>

  • <pre> für vorformatierte Texte.

27. HTML Semantics

  • Semantische Tags: <header>, <footer>, <article>, <section>, <aside>, <main> usw.

28. HTML Style Guide

  • Einheitliche Einrückung, sprechende Klassennamen, semantische Struktur etc.

29. HTML Entities, Symbols, Emojis

  • Entities: &nbsp; (Leerzeichen), &copy; (©), &euro; (€) usw.

  • Symbole: <p>&#169; 2025</p> oder <p>&copy; 2025</p>.

  • Emojis: &#128512; =

html

Kopieren

<p>Hallo &#128512;</p>

30. HTML Charsets

  • Meistens UTF-8:

html

Kopieren

<meta charset="UTF-8">

31. HTML URL Encode

  • Sonderzeichen in URLs maskieren, z.B. space -> %20.

TEIL2 – CSS

1. CSS Selectors

Grundlegende Selektoren

  • Element: p { }
  • Class: .info { }
  • ID: #main { }
  • Universal: * { }
  • Attribute: a[target="_blank"] { }

CSS Einbindungsmöglichkeiten

  1. Inline (style-Attribut) – nicht empfohlen
  2. Internal (im <head> mit <style>)
  3. External (getrennte .css-Datei) – Best Practice

2. CSS How To

  • Inline (style-Attribut) – nicht empfohlen.
  • Internal (im <head> mit <style>).
  • External (getrennte .css-Datei) – Best Practice.

3. CSS Comments

  • Kommentar in CSS:

css

Kopieren

/* Das ist ein Kommentar */

4. CSS Colors

  • Namen: red, blue, green
  • Hex: #ff0000
  • RGB: rgb(255, 0, 0)
  • HSL: hsl(0, 100%, 50%)

5. CSS Backgrounds

  • Hintergrundfarbe:

css

Kopieren

body { background-color: #f0f0f0; }

  • Hintergrundbild:

css

Kopieren

body { background: url("bg.jpg") no-repeat center center / cover; }

6. CSS Borders

css

Kopieren

.box { border: 2px solid #333; }

7. CSS Margins

css

Kopieren

.box { margin: 20px; /* alle Seiten */ /* margin: 10px 5px; (oben/unten, links/rechts) */ }

8. CSS Padding

css

Kopieren

.box { padding: 10px; }

9. CSS Height/Width

css

Kopieren

.box { width: 300px; height: 200px; }

10. CSS Box Model

  • Inhalt, padding, border, margin.
  • Wichtig: box-sizing: border-box; kann das Verhalten anpassen.

11. CSS Outline

  • Ähnlich wie border, aber außerhalb des Elements:

css

Kopieren

.box { outline: 2px solid red; }

12. CSS Text

  • Farbe: color: #333;
  • Ausrichtung: text-align: center;
  • Dekoration: text-decoration: underline;
  • Schatten: text-shadow: 2px 2px 4px #aaa;

13. CSS Fonts

  • Familie: font-family: Arial, sans-serif;
  • Größe: font-size: 16px;
  • Gewicht: font-weight: bold;

14. CSS Icons

  • Entweder Icon-Fonts (z.B. Font Awesome) oder SVG/PNG.

15. CSS Tables

  • Tabellen anpassen:

css

Kopieren

table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ccc; padding: 8px; }

16. CSS Display

  • display: block;
  • display: inline;
  • display: inline-block;
  • display: flex;
  • display: grid;
  • display: none;

17. CSS Max-width

  • Für responsive Bilder/Container:

css

Kopieren

img { max-width: 100%; height: auto; }

18. CSS Position

  • static (Standard)
  • relative
  • absolute
  • fixed
  • sticky

css

Kopieren

.fixed-header { position: fixed; top: 0; width: 100%; }

19. CSS Z-index

  • Stapel-Reihenfolge bei überlappenden Elementen (nur bei position ≠ static).

20. CSS Overflow

  • overflow: hidden;
  • overflow: scroll;
  • overflow: auto;

21. CSS Float

  • Element an linke/rechte Seite "fließen" lassen:

css

Kopieren

.float-left { float: left; }

22. CSS Inline-block

  • Kombination aus Inline- und Block-Eigenschaften.

23. CSS Align

  • In Flexbox: justify-content, align-items, align-self, etc.
  • In Grid: justify-items, align-items, etc.

24. CSS Combinators

  • Descendant: .container p { }
  • Child: .container > p { }
  • Adjacent sibling: h1 + p { }
  • General sibling: h1 ~ p { }

25. CSS Pseudo-classes

  • :hover, :active, :focus, :nth-child(n), :first-child, :last-child usw.

css

Kopieren

a:hover { color: red; }

26. CSS Pseudo-elements

  • ::before, ::after, ::first-line, ::first-letter usw.

css

Kopieren

p::first-letter { font-size: 2em; color: red; }

27. CSS Opacity

css

Kopieren

.box { opacity: 0.5; /* 50% durchsichtig */ }

28. CSS Navigation Bar

  • Häufig mit display: flex; oder float.

css

Kopieren

nav ul { list-style: none; display: flex; gap: 20px; }

29. CSS Dropdowns

  • Meist mit :hover und position: absolute.
    Beispiel (vereinfacht):

css

Kopieren

.dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background: #fff; } .dropdown:hover .dropdown-content { display: block; }

  • Mehrere Bilder nebeneinander, z.B. mit Flexbox oder Grid.

31. CSS Image Sprites

  • Ein großes Bild, aus dem Teilbereiche als Hintergrund für verschiedene Elemente genutzt werden.

css

Kopieren

.icon { background: url("sprite.png") no-repeat; width: 50px; height: 50px; } .icon-facebook { background-position: -50px 0; }

32. CSS Attr Selectors

  • Selektor basierend auf Attributwerten:

css

Kopieren

a[target="_blank"] { color: red; }

33. CSS Forms

  • Eingabefelder, Labels, Buttons stylen.

css

Kopieren

input, textarea { padding: 8px; border: 1px solid #ccc; }

34. CSS Website Layout

  • Kombi aus Header, Nav, Main, Aside, Footer mittels Flex oder Grid.

35. CSS Units

  • Absolute: px, in, cm
  • Relative: %, em, rem, vh, vw

36. CSS Specificity

  • Reihenfolge: Inline-Stile > IDs > Klassen > Elemente.
  • Spezifität bestimmt, welche Regel gewinnt.

37. CSS !important

  • Überschreibt alle anderen Regeln:

css

Kopieren

.box { color: red !important; }

  • Sollte sparsam eingesetzt werden.

38. CSS Math Functions

  • calc(), min(), max(), clamp() usw.

css

Kopieren

.box { width: calc(100% - 50px); }

TEIL3 – CSS Advanced

1. Rounded Corners

.box {
    border-radius: 10px;
}

2. Border Images

.box {
    border: 10px solid transparent;
    border-image: url(border.png) 30 round;
}

3. Gradients

  • Linear:

css

Kopieren

.gradient { background: linear-gradient(to right, red, blue); }

  • Radial:

css

Kopieren

.gradient { background: radial-gradient(circle, red, blue); }

4. CSS Colors & Color Keywords

  • aliceblue, antiquewhite, aquamarine, etc. (vordefinierte Farbnamen)

5. CSS Shadows

  • Box-Shadow:

css

Kopieren

.box { box-shadow: 0 2px 5px rgba(0,0,0,0.3); }

  • Text-Shadow:

css

Kopieren

.text { text-shadow: 1px 1px 2px #aaa; }

6. Text Effects

  • z.B. Text-Stroke (nur in WebKit):

css

Kopieren

.stroke { -webkit-text-stroke: 1px black; }

7. Web Fonts

  • Import mit @import oder <link>:

css

Kopieren

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); body { font-family: 'Roboto', sans-serif; }

8. 2D Transforms

  • Beispiel:

css

Kopieren

.box { transform: rotate(45deg) translateX(50px); }

9. 3D Transforms

  • Perspektive, rotateX, rotateY:

css

Kopieren

.box { transform: perspective(500px) rotateY(30deg); }

10. Animations

  • Keyframes:

css

Kopieren

@keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } .animate { animation: move 2s infinite alternate; }

11. Transitions

  • Weicher Übergang bei Hover o.Ä.:

css

Kopieren

.transition { transition: all 0.3s ease; } .transition:hover { transform: scale(1.1); }

12. Tooltips

  • Einfache Variante per title-Attribut oder per CSS :hover + ::after.

13. Image Styling

  • Runde Bilder:

css

Kopieren

.avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }

14. CSS Shapes

  • Polygonale Formen, z.B.:

css

Kopieren

.shape { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

15. Image Maps

  • HTML <map> + <area> (veraltet, aber manchmal noch relevant).

16. CSS object-fit

  • Für <img> oder <video> in CSS:

css

Kopieren

img { width: 300px; height: 200px; object-fit: cover; }

Zusammenfassung & Tipps

1. HTML Best Practices

  • Nutze semantische Elemente und valide Strukturen
  • Achte auf korrekte Pfade, alt-Attribute bei Bildern und sinnvolle Titel
  • Verwende <head> für Meta-Infos (Charset, Viewport, Favicon, CSS/JS-Link)

2. CSS Best Practices

  • Trenne Layout (CSS) und Struktur (HTML)
  • Box-Modell verstehen (Padding, Border, Margin)
  • Layout-Techniken: Flexbox, Grid, Float, Positionierung
  • Für Responsive Design: Media Queries, max-width, flexible Einheiten (%/em/rem/vw/vh)

3. Projektstruktur

projekt/
├─ index.html
├─ about.html
├─ ...
├─ css/
│   └─ styles.css
├─ images/
│   └─ ...
└─ js/
    └─ script.js

4. Nützliche Ressourcen

5. Validierung

Fertig! Dies ist ein umfangreicher Spickzettel, der (fast) alle relevanten Themen aus HTML & CSS abdeckt – von den Grundlagen bis hin zu fortgeschrittenen Layout- und Designelementen. Du kannst ihn als Nachschlagewerk für Prüfungen, Übungen oder Projekte verwenden. Viel Erfolg beim Coden!

Hier ein separates Beispiel, wie du verschachtelte Boxen (divs) erstellen kannst – etwa einen blauen Block, in dem ein roter Block mit Text enthalten ist:

HTML

html

Kopieren

<div class="outer-box"> <div class="inner-box"> <p>Das ist ein Beispieltext im inneren Block.</p> </div> </div>

CSS

css

Kopieren

/* Äußerer Block: Blauer Hintergrund */ .outer-box { background-color: #007BFF; /* Blau */ padding: 20px; /* Abstand zum inneren Block */ margin: 20px; } /* Innerer Block: Roter Hintergrund */ .inner-box { background-color: #FF4136; /* Rot */ padding: 15px; /* Abstand für den Text */ margin: 0 auto; /* Zentriert innerhalb des äußeren Blocks (falls eine Breite definiert ist) */ width: 80%; /* Beispiel: 80% der Breite des äußeren Blocks */ color: #fff; /* Weißer Text für besseren Kontrast */ text-align: center; }

Erklärung

  • Äußerer Block (.outer-box):
  • Mit blauem Hintergrund (background-color), etwas Innenabstand (padding) und Außenabstand (margin).
  • Innerer Block (.inner-box):
  • Mit rotem Hintergrund und eigenem Padding, damit der Text nicht direkt an den Rändern klebt.
  • Der Text wird zentriert und erhält eine weiße Farbe (color: #fff;) für guten Kontrast.
  • Mit width: 80%; ist der innere Block etwas schmaler als der äußere.

Dieses Beispiel zeigt, wie du mit verschachtelten <div>-Containern und CSS-Styles ansprechende, strukturierte Layout-Boxen erstellen kannst. Du kannst die Werte nach Bedarf anpassen.