CSS Übungsaufgaben Woche 2

Erklärung: Der Titelbereich ist oft der erste Bereich, den Besucher wahrnehmen. Deshalb sollte dein <h1> groß, klar und dominant wirken. Der Untertitel ergänzt den Haupttitel, soll ihn aber optisch nicht überholen.

<header>
  <h1 class="title">Mein Mini-Blog</h1>
  <p class="subtitle">Ein einfaches Design</p>
</header>

.title {
  font-size: 3rem;
  font-weight: 800;
  color: #1f2a44;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.1rem;
  color: #667085;
  margin-top: 0;
}

✅ Akzeptanz: Der Titel fällt sofort ins Auge. Der Untertitel unterstützt den Einstieg, bleibt aber bewusst untergeordnet.

Erklärung: Die Hero-Sektion ist dein Einführungsblock. Sie soll sich vom restlichen Fließtext abheben – durch Fläche, Abstände, sanfte Hintergrundfarbe und eine begrenzte Breite.

<section class="hero">
  <h2>Willkommen auf meinem Blog</h2>
  <p>Hier schreibe ich über Design, CSS und moderne Webgestaltung.</p>
</section>

.hero {
  background-color: #e7f0ff;
  padding: 3rem;
  max-width: 750px;
  margin: 0 auto;
  border-radius: 20px;
}

✅ Akzeptanz: Die Hero-Sektion wirkt wie ein eigenständiger Bereich, der den Einstieg in die Seite übernimmt und nicht mit dem restlichen Text verschwimmt.

Erklärung: Bevor du einzelne Spezialbereiche stylst, brauchst du gute Grundregeln für normalen Text. Das betrifft Schriftgröße, Zeilenhöhe, Textfarbe, Schriftfamilie und sinnvolle Absatzabstände.

body {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #4a4a4a;
  font-family: 'Inter', sans-serif;
}

p {
  max-width: 750px;
  margin-bottom: 1rem;
}

✅ Akzeptanz: Längere Texte lassen sich angenehm lesen. Zeilen sind nicht zu gedrängt und Absätze haben saubere Abstände.

Erklärung: Ein Zitat soll sich deutlich vom Standardtext abheben. Dafür nutzt du häufig hellen Hintergrund, einen farbigen Seitenrand und einen anderen Schriftstil.

<blockquote class="blockquote">
  „Design ist nicht nur, wie es aussieht. Design ist, wie es funktioniert.“
  <br>
  <cite>– Steve Jobs</cite>
</blockquote>

.blockquote {
  background-color: #f8f9fa;
  border-left: 4px solid #1a73e8;
  padding: 2rem 1.5rem;
  margin: 2rem auto;
  font-style: italic;
  border-radius: 16px;
}

cite {
  color: #6c757d;
  font-size: 0.9em;
}

✅ Akzeptanz: Das Zitat ist klar als besonderes Element erkennbar. Die Quelle ist sichtbar, aber dezent gestaltet.

Erklärung: Ein Button ist eines der wichtigsten UI-Elemente. Er braucht Kontrast, Polsterung, Radius, klare Zustände und ein Verhalten, das auf Hover und Fokus reagiert.

<button class="btn">Mehr erfahren</button>

.btn {
  padding: 12px 24px;
  border-radius: 10px;
  background-color: #1a73e8;
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(26, 115, 232, 0.3);
}

.btn:focus {
  outline: 3px solid rgba(26, 115, 232, 0.35);
  outline-offset: 2px;
}

✅ Akzeptanz: Der Button wirkt sofort klickbar, reagiert sichtbar auf Hover und hat einen klaren Fokuszustand für Tastatur-Navigation.

Erklärung: Besucher sollen schon beim Überfliegen erkennen, was Haupttitel, Abschnittsüberschrift und Zwischenüberschrift ist. Das erreichst du über Größe, Gewicht und Abstand.

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
}

h3,
h4 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
}

✅ Akzeptanz: Die Hierarchie ist auch ohne Farben gut erkennbar. H1 ist am stärksten, H4 am zurückhaltendsten.

Erklärung: Ein kleines Design-System beginnt mit wiederverwendbaren Farbwerten. Mit CSS-Variablen in :root definierst du deine wichtigsten Töne zentral.

:root {
  --primary: #1a73e8;
  --text-primary: #4a4a4a;
  --bg-soft: #f5f8ff;
}

.nav-link,
a.btn {
  color: var(--primary);
  text-decoration: none;
}

✅ Akzeptanz: Wichtige Links und interaktive Elemente folgen einer klaren Farblogik und sehen nicht zufällig unterschiedlich aus.

Erklärung: Nicht nur die Schriftgröße macht Text lesbar. Auch Breite, Zeilenhöhe, Abstände und Listeneinzüge tragen wesentlich dazu bei, dass Inhalte ruhig und professionell wirken.

body,
p {
  line-height: 1.6;
  max-width: 750px;
}

ul,
ol {
  padding-left: 1.5rem;
}

p + p {
  margin-top: 1rem;
}

✅ Akzeptanz: Fließtext bleibt angenehm lesbar, Listen wirken geordnet und längere Inhalte sind visuell nicht anstrengend.

Erklärung: Meta-Informationen wie Datum, Autor oder Kategorie sind hilfreich, sollen aber nicht mit den eigentlichen Inhalten konkurrieren. Zitate dürfen dagegen etwas stärker auffallen.

<article>
  <header>
    <p class="meta">Veröffentlicht am 10.04.2023</p>
  </header>

  <blockquote class="citation">
    „Ein inspirierendes Zitat.“
  </blockquote>
</article>

.meta {
  font-size: 0.95rem;
  color: #7a8599;
}

.citation {
  font-size: 1.1rem;
  color: #1f2a44;
}

✅ Akzeptanz: Meta-Texte sind klar als Zusatzinfo lesbar, während Zitate weiterhin einen hervorgehobenen Charakter behalten.

Erklärung: Mit einer Webfont wie Inter bekommst du sofort einen moderneren Eindruck. Die Einbindung erfolgt im <head> deiner HTML-Datei, die Nutzung danach über CSS.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

body {
  font-family: 'Inter', sans-serif;
}

✅ Akzeptanz: Die Seite verwendet durchgehend die gewünschte Schriftart und wirkt dadurch einheitlicher.

Erklärung: Hover-, Fokus-, Active- und Visited-Zustände helfen Nutzern zu verstehen, welche Elemente anklickbar sind und wie sie bereits benutzt wurden.

a:hover,
button:focus,
a.active {
  text-decoration: underline;
}

a:visited {
  color: #805b9e;
}

✅ Akzeptanz: Interaktive Zustände sind sichtbar, konsistent und verbessern die Nutzbarkeit der Seite.

Erklärung: Wenn du Header, Main, Sidebar und Footer sauber benennst, kannst du ihre Rolle im Layout leichter verstehen und gezielter gestalten.

<header class="header">...</header>
<main class="main">...</main>
<aside class="sidebar">...</aside>
<footer class="footer">...</footer>

✅ Akzeptanz: Schon im HTML ist klar erkennbar, welche Elemente zu welchem Bereich der Seite gehören.

Erklärung: Wenn mehrere Artikel gleich aussehen sollen, bekommen sie eine gemeinsame Klasse wie .card. So baust du ein wiederverwendbares Muster auf.

.card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  background: #fff;
}

✅ Akzeptanz: Mehrere Artikel wirken wie ein zusammengehöriges Kartensystem und nicht wie zufällige Einzelelemente.

Erklärung: Gruppenselektoren sparen Wiederholungen, indem du ähnliche Elemente in einer Regel zusammenfasst. Dadurch wird deine CSS-Datei kürzer und leichter wartbar.

.h1,
.h2 {
  font-weight: 600;
}

a.button,
a.nav-link {
  color: var(--primary);
}

✅ Akzeptanz: Dein CSS enthält weniger doppelte Regeln und wirkt aufgeräumter.

Erklärung: Mit Nachfahren-Selektoren kannst du Elemente im Kontext ansprechen, zum Beispiel nur Links in der Sidebar oder nur Bilder innerhalb eines Artikels.

aside ul li a {
  text-decoration: underline;
}

article header p {
  font-size: 0.9rem;
  color: #7f8c8d;
}

article img {
  width: 100%;
  display: block;
}

✅ Akzeptanz: Elemente werden nicht mehr global und unspezifisch gestylt, sondern gezielt an der richtigen Stelle.

Erklärung: Ein besonders wichtiger Artikel oder Beitrag darf zusätzlich zur normalen Card-Klasse noch eine Hervorhebung bekommen, zum Beispiel über Schatten oder einen Akzentrand.

.featured {
  box-shadow: 0 12px 36px rgba(26, 115, 232, 0.3);
  border-left: 4px solid #1a73e8;
}

✅ Akzeptanz: Die Featured-Karte fällt sichtbar mehr auf als die anderen Karten, bleibt aber gestalterisch im selben System.

Erklärung: Mit Padding, Margin, Radius und Schatten definierst du, wie viel Luft eine Karte nach innen und außen bekommt. Genau das entscheidet oft darüber, ob ein Design unruhig oder hochwertig wirkt.

.card {
  padding: 20px;
  margin: 20px 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

✅ Akzeptanz: Kein Inhalt klebt am Rand, Karten haben nachvollziehbare Innenabstände und ausreichend Abstand zueinander.

Erklärung: Nutze wiederkehrende Abstände zwischen Hero, Artikeln, Sidebar und Footer. Eine kleine Spacing-Skala schafft Ruhe und Wiedererkennung im Layout.

.hero {
  margin-bottom: 32px;
}

.sidebar {
  margin-top: 24px;
}

✅ Akzeptanz: Die Seite wirkt nicht zufällig zusammengesetzt, sondern wie ein bewusst geordnetes Gesamtsystem.

Erklärung: Bilder sollen nie aus ihrem Container herauslaufen. Gleichzeitig sollen sie mit Radius und Abstand optisch zu den Textbereichen passen.

article img {
  width: 100%;
  display: block;
  border-radius: 8px;
  margin-bottom: 1rem;
}

✅ Akzeptanz: Bilder passen sich sauber an ihre Breite an, fügen sich ins Layout ein und stören den Lesefluss nicht.

Erklärung: Manche Bereiche sollen sichtbar bleiben, weil sie Handlungsaufforderungen enthalten. Dafür kannst du sticky oder fixed einsetzen – je nachdem, ob der Bereich im Fluss bleibt oder fest am Viewport klebt.

.newsletter {
  position: sticky;
  top: 0;
  width: 100%;
  background: #ffffff;
  padding: 1rem;
}

✅ Akzeptanz: Der Newsletter-Block ist sichtbar, aber nimmt dem eigentlichen Inhalt nicht die Aufmerksamkeit.

Erklärung: Jetzt werden Radius-Werte, Schatten, Farben, Überschriftenabstände und Button-Stile vereinheitlicht. Genau hier entsteht der Eindruck von Konsistenz und Qualität.

.card,
.btn {
  border-radius: 12px;
}

.btn {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

✅ Akzeptanz: Alle Designelemente wirken wie Teil eines gemeinsamen Systems und nicht wie einzeln zusammengestellte Lösungen.