CSS-IDs und Klassen
Selektoren für präzises Styling
CSS (Cascading Style Sheets) bietet verschiedene Selektoren, um HTML-Elemente gezielt zu stylen. Zwei der wichtigsten Selektoren sind IDs und Klassen.
CSS IDs
Eine ID ist ein eindeutiger Bezeichner für ein einzelnes HTML-Element. IDs werden mit einem Rautezeichen (#) vor dem ID-Namen angegeben. Jede ID sollte nur einmal pro Seite verwendet werden.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>Meine Webseite</h1>
</div>
</body>
</html>
In diesem Beispiel wird das <div>-Element mit der ID header gestylt.
CSS Klassen
Eine Klasse kann mehreren HTML-Elementen zugewiesen werden. Klassen werden mit einem Punkt (.) vor dem Klassennamen angegeben. Sie sind nützlich, um mehrere Elemente mit denselben Stilen zu versehen.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">Dies ist ein hervorgehobener Text.</p>
<p class="highlight">Noch ein hervorgehobener Text.</p>
</body>
</html>
In diesem Beispiel werden beide <p>-Elemente mit der Klasse highlight gestylt.
Kombination von IDs und Klassen
Man kann IDs und Klassen kombinieren, um spezifischere Stile anzuwenden.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
#header .highlight { background-color: orange; font-size: 20px; } </style>
</head>
<body>
<div id="header">
<p class="highlight">Dies ist ein spezieller hervorgehobener Text im Header.</p>
</div>
</body>
</html>
In diesem Beispiel wird das <p>-Element mit der Klasse highlight innerhalb des Elements mit der ID header spezifisch gestylt.
Brauchen Sie Hilfe?
Wir helfen Ihnen gerne weiter. Zögern Sie nicht, uns zu kontaktieren!
Wir freuen uns darauf, Ihnen bei Ihren Anliegen zu helfen und Ihre Webprojekte zum Erfolg zu führen.
