Was sind HTML und CSS?

Jede Webseite, die du besuchst — Google, YouTube, Instagram — besteht aus HTML und CSS:

- HTML (HyperText Markup Language) = die Struktur → Was steht auf der Seite?

- CSS (Cascading Style Sheets) = das Design → Wie sieht es aus?

💡 Stell dir vor: HTML ist das Skelett deiner Webseite, CSS ist die Kleidung.

HTML — Dein erstes Dokument

Jede HTML-Datei hat eine Grundstruktur:

```html

Hallo Welt! 👋

Das ist meine erste Webseite.

```

HTML-Tags — Die Bausteine

HTML besteht aus Tags — sie umschließen den Inhalt wie Klammern:

` bis `

`Überschriften (1 = größte)`

Titel

`Absatz (Paragraph)`

Text hier

` / `
`Liste (ungeordnet/geordnet)`
• Punkt
` `
`Container (Box)Zum Gruppieren von Elementen ``Inline-ContainerZum Stylen einzelner Wörter ``Knopf`Klick!` ``Eingabefeld``

📌 Die meisten Tags haben ein öffnendes `` und ein schließendes `` — vergiss das Schließen nie!

CSS — Farbe und Layout

CSS macht HTML schön. Du schreibst es in eine eigene Datei (`style.css`) oder direkt im HTML:

```css

/ CSS-Datei: style.css /

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

}

h1 {

color: #2196F3;

text-align: center;

font-size: 2.5em;

}

p {

color: #333;

line-height: 1.6;

max-width: 600px;

margin: 0 auto;

}

```

Die wichtigsten CSS-Eigenschaften

EigenschaftWas sie machtBeispiel `color`Textfarbe`color: red;` `background-color`Hintergrundfarbe`background-color: #fff;` `font-size`Schriftgröße`font-size: 16px;` `font-family`Schriftart`font-family: Arial;` `margin`Außenabstand`margin: 20px;` `padding`Innenabstand`padding: 10px;` `border`Rahmen`border: 1px solid black;` `border-radius`Abgerundete Ecken`border-radius: 8px;` `width` / `height`Breite / Höhe`width: 300px;` `display`Anzeige-Typ`display: flex;`

CSS-Selektoren — Welches Element stylen?

SelektorWas wird gestyltBeispiel `h1`Alle h1-Tags`h1 { color: blue; }` `.klasse`Elemente mit class="klasse"`.button { padding: 10px; }` `#id`Element mit id="id"`#header { background: blue; }`

Flexbox — Modernes Layout

Flexbox ist die einfachste Art, Elemente nebeneinander anzuordnen:

```css

.container {

display: flex;

justify-content: center; / horizontal zentrieren /

align-items: center; / vertikal zentrieren /

gap: 20px; / Abstand zwischen Elementen /

}

```

Responsive Design 📱

Damit deine Seite auf Handy und Desktop gut aussieht:

```css

/ Auf kleinen Bildschirmen (Handy) /

@media (max-width: 768px) {

.container {

flex-direction: column;

}

h1 {

font-size: 1.5em;

}

}

```

Loslegen!

1. Erstelle eine Datei `index.html` mit einem Texteditor

2. Schreibe die HTML-Grundstruktur

3. Öffne die Datei im Browser → fertig! 🎉

Kostenlose Tools:

- VS Code — bester Editor

- Chrome DevTools (F12) — Code live testen

- CodePen.io — direkt im Browser ausprobieren

Du hast gerade die Sprache gelernt, in der das gesamte Internet geschrieben ist. Nicht schlecht! 🚀

---

🤖 Was kommt nach HTML? Künstliche Intelligenz verändert die Webentwicklung grundlegend. Auf [BesserAI](https://besserai.de) erfährst du, wie KI-Tools wie ChatGPT und Claude das Programmieren revolutionieren.