Klassen
Mit CSS-Klassen können CSS-Regeln auf HTML-Elemente angewendet werden, ohne dass diese Elemente einen bestimmten Tag-Namen haben müssen. Klassen werden mit einem Punkt (.) gefolgt vom Klassennamen definiert. Jedes Element, welches diese Klasse besitzt, wird von den entsprechenden CSS-Regeln beeinflusst.
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
.badge {
border: 2px solid darkblue;
background-color: darkblue;
border-radius: 5px;
color: white;
&.red {
background-color: darkred;
border-color: darkred;
}
}
</style>
</head>
<body>
<h1 class="highlight">HTML</h1>
<div>
Ein <code class="badge">div</code>-Tag steht
für <span class="badge red">Division</span>,
also für einen Bereich mit
<span class="highlight">beliebigem Inhalt</span>.
<p>
Ein <code class="badge">span</code>-Tag steht
für einen <span class="badge red">Bereich</span>
innerhalb einer <span class="badge red">Zeile</span> mit
<span class="highlight">beliebigem Inhalt</span>.
</p>
</div>
</body>
</html>
- Klassen können auf beliebige HTML-Elemente angewendet werden, unabhängig vom Tag-Namen
- Ein Element kann mehrere Klassen besitzen, indem die Klassennamen durch Leerzeichen getrennt werden.
- Im CSS werden Klassen mit einem Punkt (
.) gefolgt vom Klassennamen definiert, z.B..highlight.
Aufgabe 1
<html>
<head>
<style>
.badge {
color: white;
border-radius: 4px;
padding: 2px 4px;
background-color: black;
line-height: 1.5;
&.grey {
background-color: grey;
}
&.blue {
background-color: blue;
}
&.red {
background-color: red;
}
&.green {
background-color: green;
}
&.yellow {
color: black;
background-color: yellow;
}
}
</style>
</head>
<body>
<h1>CSS Klassen</h1>
<ul>
<li>Ein schwarzer Badge</li>
<li>Ein grauer Badge</li>
<li>Ein blauer Badge</li>
<li>Ein grüner Badge</li>
<li>Ein roter Badge</li>
<li>Ein gelber Badge</li>
</ul>
</body>
</html>
Tailwind CSS Beispiel
👉 Tailwind CSS ist ein CSS-Framework, das auf Utility-Klassen basiert. Anstatt eigene CSS-Klassen zu definieren, verwendet man vordefinierte Klassen, um das Styling direkt im HTML zu gestalten. Tailwind ist aktuell eines der 👉 beliebtesten CSS-Frameworks, weshalb hier ein kleiner Einblick gezeigt wird.
Damit dies funktioniert, muss im <head>-Bereich der HTML-Datei das Tailwind CSS-Skript eingebunden werden:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
...
</body>
</html>
Anschliessend können die vordefinierten Tailwind-Klassen verwendet werden, um das Layout und Design der HTML-Elemente zu gestalten.
Reine HTML-Struktur
<html>
<head>
</head>
<body>
<div>
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Maria Grünfelder">
<div>
<h1>Maria Grünfelder</h1>
<address>
<div>maria.gruenfelder@email.com</div>
<div>Biel, Schweiz</div>
<div>+41 32 123 4567</div>
</address>
</div>
</div>
</body>
</html>
Mit Tailwind CSS
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="flex items-center gap-x-6 m-5 p-6 bg-linear-to-r from-red-100 to-fuchsia-200 rounded-xl shadow-xl/30">
<img class="size-30 rounded-full hover:scale-125 duration-300 ease-in border-6 border-solid border-red-300" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Maria Grünfelder">
<div class="">
<h1 class="text-xl font-medium">Maria Grünfelder</h1>
<address class="text-gray-500 not-italic text-sm">
<div>maria.gruenfelder@email.com</div>
<div>Biel, Schweiz</div>
<div>+41 32 123 4567</div>
</address>
</div>
</div>
</body>
</html>
Probieren Sie Tailwind CSS aus. Da Tailwind eine sehr grosse Anzahl an unterschiedlichen Utility-Klassen bietet, können Sie sich auf der 👉 offiziellen Webseite über die verschiedenen Klassen informieren.
Alternativ kann hier auch generativer AI-Support eingesetzt werden, allerdings sollte dabei wie folgt vorgegangen werden:
-
Als erste Nachricht folgenden Kontext eingeben.
KI-Kontext für Tailwind CSSIch besitze Grundwissen über HTML und kenne die Basics von CSS. Ich möchte Tailwind CSS lernen und habe bereits das Tailwind CSS über ein CDN in meine HTML-Datei eingebunden.
Du bist mein Lernbegleiter und Coach zum erlernen von Tailwind CSS. Gib mir nicht einfach nur die Code-Snippets, sondern hilf mir Schritt für Schritt, welche Tailwind-Klassen ich wo einsetzen muss, um die gewünschten Effekte zu erzielen. Erkläre mir jeweils auch Abkürzungen und übersetze Fachbegriffe auf Deutsch. z.B. `m-5` bedeutet `margin: 1.25rem;` (also Aussenabstand von 20 Pixeln rundum). Beschränke dich auf die simpelste Lösung - Optimierungen für Fortgeschrittene oder mobile Ansichten können wir später angehen.
Bevor du mir die Grundlagen erklärst, warte bis ich dir meine erste Frage stelle. -
Präzise Fragen formulieren - Sie wollen lernen und verstehen, welcher Effekt mit was erreicht wird - reines Copy-Paste bringt Sie im Verständnis nicht weiter! z.B.
Ich möchte mein Anzeigebild rund machen und etwa 50 pixel hoch und breit.
Wie kann ich das Bild und die Adresse nebeneinander anzeigen lassen?
-
Versuchen Sie, die Antworten zu verstehen und umzusetzen. Falls etwas unklar ist, fragen Sie gezielt nach.
HTML-TagsAllenfalls ist die HTML-Grundstruktur der generativen AI nicht dieselbe wie bei Ihnen. Verstehen Sie dennoch, welche Tailwind-Klassen wo eingesetzt werden müssen, um den gewünschten Effekt zu erzielen?
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<header>
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Maria Grünfelder" />
<div>
<h1>Maria Grünfelder</h1>
<address>
<div>maria.gruenfelder@email.com</div>
<div>Biel, Schweiz</div>
<div>+41 32 123 4567</div>
</address>
</div>
</header>
<main>
<div>
<h2>About Me</h2>
<p>
Innovative software developer with 8+ years of experience in full stack development,
passionate about building impactful products, and strong advocate for diversity in tech.
</p>
</div>
<div>
<h2>Experience</h2>
<ol>
<li>
<strong>Senior Software Engineer</strong> ExampleCorp (2021–Present)
<ul>
<li>Lead a team of 6 in developing scalable web applications.</li>
<li>Mentored junior developers and organized regular code review sessions.</li>
</ul>
</li>
<li>
<strong>Software Developer</strong> WebSoft AG (2016–2021)
<ul>
<li>Developed and maintained client-facing platforms using React and Node.js.</li>
<li>Implemented CI/CD pipelines and improved deployment workflows.</li>
</ul>
</li>
</ol>
</div>
<div>
<h2>Education</h2>
<ol>
<li><strong>M.Sc. Computer Science</strong> Technische Universität Berlin (2014–2016)</li>
<li><strong>B.Sc. Computer Science</strong> Technische Universität Berlin (2010–2014)</li>
</ol>
</div>
<div>
<h2>Skills</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript (ES6+)</li>
<li>React, Vue.js</li>
<li>Node.js</li>
<li>SQL, MongoDB</li>
<li>CI/CD, Git</li>
<li>Unit & Integration Testing</li>
</ul>
</div>
<div>
<h2>Certifications</h2>
<ul>
<li>AWS Certified Solutions Architect – Associate</li>
<li>Scrum Master (PSM I)</li>
</ul>
</div>
<div>
<h2>Languages</h2>
<ul>
<li>German (native)</li>
<li>English (fluent)</li>
<li>French (intermediate)</li>
</ul>
</div>
<div>
<h2>Hobbies</h2>
<ul>
<li>Rock Climbing</li>
<li>Photography</li>
<li>Travel</li>
<li>Volunteering at coding workshops</li>
</ul>
</div>
<div>
<h2>Fun Facts</h2>
<ul>
<li>Completed the Berlin Marathon twice</li>
<li>Proud owner of a rescue dog named Pixel</li>
<li>Sings in a jazz band</li>
</ul>
</div>
<div>
<h2>References</h2>
<p>Available upon request</p>
</div>
</main>
</body>
</html>