CSS im Allgemeinen
CSS steht für Cascading Style Sheets und ist eine Sprache, die verwendet wird, um das Aussehen und Layout von HTML-Elementen zu gestalten. Mit CSS kann man zum Beispiel die Farbe, Schriftart, Größe, Position und Animation von Elementen ändern. CSS verwendet Regeln, die aus einem Selektor und einer Deklaration bestehen. Der Selektor gibt an, welche Elemente gestaltet werden sollen, und die Deklaration enthält die Eigenschaften und Werte, die angewendet werden sollen. Eine wichtige Funktion von CSS ist die Möglichkeit, ID und Klassen zu verwenden, um Elemente zu identifizieren oder zu gruppieren. Eine ID ist ein eindeutiger Bezeichner, der nur einem Element zugewiesen werden kann. Eine Klasse ist ein allgemeiner Bezeichner, der mehreren Elementen zugewiesen werden kann. Um eine ID oder eine Klasse zu definieren, verwendet man das Zeichen # für ID und das Zeichen . für Klassen. Zum Beispiel:
<div>
<div id="header">
<h2>Dies ist eine H2-Überschrift im Div-Container mit der ID #header<h2>
</div>
<p class="intro">Dies ist ein Absatz mit der Klasse .intro</p>
<p>Dies ist ein normaler Absatz ohne spezielle Eigenschaften außer der von p</p>
</div>Um eine ID oder eine Klasse in CSS anzusprechen, verwendet man die gleiche Selektor-Bezeichnung wie in HTML. HTML-Tags (hier div, h2 & p) können direkt angesprochen werden. Zum Beispiel:
div {
background-color: lightgray;
}
#header {
background-color: lightblue;
}
h2 {
font-size: 24px;
}
p {
font-family: serif;
margin-bottom: 10px; /* Außenabstand nach unten */
}
.intro {
font-family: sans-serif;
font-weight: bold;
}Ergebnis:
Dies ist eine H2-Überschrift im Div-Container mit der ID #header
Dies ist ein Absatz mit der Klasse .intro
Dies ist ein normaler Absatz ohne spezielle Eigenschaften außer der von p
Ein wenig erweitertes Beispiel
... aus dem Post "HTML im Allgemeinen" ...<div id="html">
<h1>Hallo Welt!</h1>
<h2>H2 Unterüberschrift</h2>
<p>Dies ist ein normaler Text-Absatz.</p>
<img src="https://bricks.seitwerk.net/app/uploads/Seitwerk-Logo.webp" width="360"><br>
<a href="https://bricks.seitwerk.net/">Link zur Startseite</a>
<div>
Text in einem hier nicht sichtbaren "Container" mit Zeilenumbruch:<br>
<strong>Dieser Text ist fett geschrieben</strong>
<em>und dieser kursiv</em>
</div>
</div>Hallo Welt!
H2 Unterüberschrift
Dies ist ein normaler Text-Absatz.
Link zur Startseite
Dieser Text ist fett geschrieben und dieser kursiv
Das CSS kann hier direkt angepasst werden – das #html ist vorangestellt, damit nur der obere Ausschnitt beeinflusst wird und nicht die komplette Seite: