Einführung in CSS
Gestaltung und Layout von Webseiten
CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und Layout von Webseiten zu gestalten. Mit CSS können Sie die Darstellung von HTML-Elementen anpassen und Ihre Webseite ansprechender und benutzerfreundlicher gestalten.
Grundlagen von CSS
CSS-Syntax: Eine CSS-Regel besteht aus einem Selektor und einer Deklaration. Der Selektor bestimmt, welches HTML-Element formatiert wird, und die Deklaration enthält die Stilregeln.
selektor {
eigenschaft: wert;
}
Beispiel:
p {
color: blue;
font-size: 16px;
}
Einbindung von CSS Es gibt drei Möglichkeiten, CSS in eine HTML-Datei einzubinden: Inline, Intern und Extern.
Inline-CSS: CSS-Regeln werden direkt im HTML-Element definiert.
<p style="color: blue; font-size: 16px;">Dieser Text ist blau und 16px groß.</p>
Internes CSS: CSS-Regeln werden im <style>-Tag innerhalb des <head>-Bereichs der HTML-Datei definiert.
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
Externes CSS: CSS-Regeln werden in einer separaten CSS-Datei gespeichert und mit dem <link>-Tag eingebunden.
<head>
<link rel="stylesheet" href="styles.css">
</head>
In der Datei styles.css:
css
p {
color: blue;
font-size: 16px;
}
Selektoren: CSS bietet verschiedene Selektoren, um HTML-Elemente zu formatieren.
Elementselektor: Formatiert alle Instanzen eines bestimmten HTML-Elements.
p {
color: blue;
}
Klassenselektor: Formatiert alle Elemente mit einer bestimmten Klasse. Klassen werden mit einem Punkt (.) vor dem Klassennamen definiert.
.wichtig {
color: red;
}
<p class="wichtig">Dieser Text ist wichtig und rot.</p>
ID-Selektor: Formatiert ein einzelnes Element mit einer bestimmten ID. IDs werden mit einem Rautezeichen (#) vor dem ID-Namen definiert.
#einzigartig {
color: green;
}
<p id="einzigartig">Dieser Text ist einzigartig und grün.</p>
CSS ist ein mächtiges Werkzeug, um das Aussehen und Layout von Webseiten zu gestalten. Durch das Verständnis der grundlegenden CSS-Syntax, der verschiedenen Möglichkeiten zur Einbindung von CSS und der Verwendung von Selektoren können Sie ansprechende und benutzerfreundliche Webseiten erstellen.
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.
