Logo

Willkommen zu HelpHTML

Was ist CSS?

CSS ist eine Programmiersprache, welche für das Designen entwickelt wurde. Beim Bau einer Webseite wird CSS für das Gestalten der Webseite verwendet. CSS ist besser in der Handhabung, weshalb es der Standart beim Anpassen von Webseiten ist. Es ist zwar auch möglich einige Funktionen, die CSS bietet, mit HTML eigenen Designtags zu machen, aber CSS macht alles ein wenig einfacher.

Wie benutzt man CSS?

Um CSS einzubinden gibt diese 3 Möglichkeiten

  • Möglichkeit 1: Inline-CSS

    • Wird in den html-Tag eingebunden.
    • Wird verwendet um z.B. eine CSS Eigenschaft nur wenigen Elementen hinzuzufügen

  • Möglichkeit 2: Internes-CSS

    • Wird in den Head Bereich des HTML Quellcodes mit dem <style>-Tag eingefügt.
    • Wird verwendet, um z.B. CSS Eigenschaften mehreren Elementen der Webseite zuzuweisen Diese Betreffen nur die eine Websitedatei, aber nicht die anderen Websitedateien (falls Vorhanden).

  • Möglichkeit 3: Externes-CSS

    • Der CSS-Code wird in eine style.css Datei geschrieben. Diese wird dann im Head als link eingebunden.
    • Wird verwendet, um z.B. ein Style in Form eines Website Layouts für mehrere Websitedateien bereitzustellen.

Um HTML Elemente mit CSS ansprechen zu können, gibt es Selectoren, die angesprochen werden können. 2 Möglichkeiten, die meistens Vorkommen sind diese:

  • Möglichkeit 1: HTML Tags als Selector für CSS

  • Möglichkeit 2: HTML-Tag eine Klasse zuweisen und diese mit CSS ansprechen.

Farben, Styles und Größen von Elementen und Schrift bearbeiten

<style>
.font-beispiel {
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
</style>
<p class="font-beispiel">Das ist ein fettgedruckter und unterstrichener Text in Arial.</p>

  • Farben bearbeiten

    • Mit der CSS-Eigenschaft "color" lassen sich Texte farbig gestalten. Mit "background-color" lassen sich Hintergründe von DIV-Containern oder der gesamten Webseite ändern.

  • Styles von Texten bearbeiten

    • Mit der Eigenschaft "font-style" lassen sich verschiedene Schriftarten, wie z.B. Arial, einstellen.
    • Die Eigenschaft "font-weight" steuert die Dicke der Schrift (z.B. fett oder normal).
    • Mit "text-decoration" lassen sich Unterstreichungen oder Durchstreichungen hinzufügen.
    • text-align: Bestimmt die horizontale Ausrichtung von Text innerhalb eines Elements (z. B. "left", "center", "right").

  • Größen von Elementen bearbeiten

    • Mit den Eigenschaften "height" und "width" lassen sich die Höhe und Breite von Elementen festlegen.
    • "max-width" und "min-width" legen minimale und maximale Breiten für Elemente fest.
    • Die "padding"-Eigenschaft bestimmt den Innenabstand zwischen Inhalt und Rand eines Elements.
    • Margin: Bestimmt den äußeren Abstand eines Elements zu anderen Elementen.

Ränder mit CSS erstellen

<style>
.rand-beispiel {
border: 5px;
border-style: dotted;
border-color: red;
padding: 10px;
width: 250px;
}
</style>
<div class="rand-beispiel">Dicker, gepunkteter, roter Rand mit Innenabstand</div>

Mit der CSS-Eigenschaft "border" können Elemente mit Rändern versehen werden:

  • "border-width" legt die Randdicke fest.
  • "border-style" bestimmt den Randstil (z.B. durchgezogen, gepunktet, gestrichelt).
  • "border-color" ändert die Farbe des Randes.

Div-Container positionieren

<style>
.position-beispiel {
position: relative;
left: 50px;
background-color: yellow;
padding: 10px;
width: 200px;
}
</style>
<div class="position-beispiel">Dieses Element ist um 50px nach rechts verschoben.</div>

Mit der "position"-Eigenschaft kann bestimmt werden, wo sich ein Element auf der Seite befindet:

  • "static" (Standard, fließt normal im Dokumentfluss mit).
  • "relative" (Position relativ zur normalen Position).
  • "absolute" (Bezugspunkt ist das nächste positionierte Elternelement).
  • "fixed" (Fix an einer bestimmten Position, bleibt beim Scrollen sichtbar).
  • "sticky" (Bleibt an einem Punkt, bis der Container aus dem Viewport verschwindet).
  • display: Definiert das Anzeigeverhalten eines Elements (z. B. "block", "inline", "flex").
  • justify-content: Bestimmt die horizontale Ausrichtung von Elementen in einem Flexbox-Container.
  • align-items: Bestimmt die vertikale Ausrichtung von Elementen in einem Flexbox-Container.