Was ist CSS und wie funktioniert es?

CSS wurde 1996 vom W3C (World Wide Web Consortium) aus einem recht einfachen Grund entwickelt. HTML wurde nicht dafür konzipiert, Tags zu haben, die bei der Formatierung der Seite helfen würden. Sie sollten lediglich das Markup für die Website schreiben.

Tags wie <font> wurden in der HTML-Version 3.2 eingeführt und haben Webentwicklern ziemlich viel Ärger bereitet. Dadurch dass Websites unterschiedliche Schriftarten, farbige Hintergründe und mehrere Stile haben, war es ein langer, schwieriger und teurer Prozess, den Code neu zu schreiben. Daher wurde CSS vom W3C erstellt, um dieses Problem zu lösen.

CSS ist technisch gesehen keine Notwendigkeit, aber Sie würden wahrscheinlich keine Webseite ansehen wollen, die nur HTML-Elemente enthält, da sie völlig kahl aussehen würde.

Vorteile von CSS auf Websites

Der Unterschied zwischen einer Website, die CSS implementiert, und einer, die dies nicht tut, ist enorm und sicherlich bemerkbar.

Es könnte sein, dass Sie eine Website gesehen haben, die nicht vollständig lädt und eine weiße Hintergrundfarbe hat, wobei der Großteil des Textes blau und schwarz ist. Das bedeutet, dass der CSS-Teil der Webseite nicht korrekt geladen wurde oder überhaupt nicht existiert.

So sehen Webseiten aus, die nur HTML verwenden, und Sie würden sicherlich zustimmen, dass das nicht sehr ansprechend ist.
Bevor CSS verwendet wurde, musste die gesamte Stilisierung in das HTML-Markup einbezogen werden. Das bedeutet, dass Webentwickler die Hintergrundfarbe, Schriftgröße, Ausrichtungen usw. separat beschreiben mussten.

CSS ermöglicht es Ihnen, alles in einer anderen Datei zu stilisieren, das Design dort zu erstellen und später die CSS-Dateien über das HTML-Markup zu integrieren. Dies macht das tatsächliche HTML-Markup viel sauberer und einfacher zu warten.

Kurz gesagt, mit CSS-Funktionen müssen Sie nicht immer wieder beschreiben, wie einzelne Elemente aussehen. Dies spart Zeit, verkürzt den Code und macht ihn weniger anfällig für Fehler.

CSS ermöglicht es Ihnen, mehrere Stile auf einer HTML-Seite zu haben, wodurch die Anpassungsmöglichkeiten nahezu endlos sind. Heutzutage ist dies mehr eine Pflicht als ein Extra.

Wie funktioniert CSS?

CSS verwendet eine einfache, auf Englisch basierende Syntax mit einem Satz von Regeln, die sie regieren. Wie bereits erwähnt, war HTML nie dafür vorgesehen, Stilelemente zu verwenden, sondern nur das Markup der Seite. Es wurde lediglich erstellt, um den Inhalt zu beschreiben. Zum Beispiel: <p>Das ist ein Absatz.</p>.

Aber wie gestalten Sie den Absatz? Die Syntaxstruktur von CSS ist ziemlich einfach. Es hat einen Selektor und einen Deklarationsblock. Sie wählen ein Element aus und erklären dann, was Sie damit machen möchten. Ziemlich einfach, oder?

Es gibt jedoch Regeln, die Sie sich merken müssen. Die Strukturregeln sind ziemlich einfach, also machen Sie sich keine Sorgen.

Der Selektor zeigt auf die HTML-Elemente, die Sie gestalten möchten. Der Deklarationsblock enthält eine oder mehrere Deklarationen, die durch Semikolons getrennt sind.

Jede Deklaration beinhaltet einen CSS-Eigenschaftsnamen und einen Wert, getrennt durch einen Doppelpunkt. Eine CSS-Deklaration endet immer mit einem Semikolon und Deklarationsblöcke sind von geschweiften Klammern umgeben.

Schauen wir uns ein Beispiel an:

<style>

p {

 color: blue;

 text-weight: bold;

}

<style>

Alle <p>-Elemente werden blau und fett gefärbt.

In einem weiteren Beispiel werden alle <p>-Elemente zentriert ausgerichtet, 16px breit und pink sein.

<style>

p {

   text-align: center;

   font-size: 16px;

   color: pink;

}

</style>

Sehen Sie sich unseren CSS-Spickzettel für weitere Beispiele an.

Sprechen wir nun über die verschiedenen Stile von CSS. Sie sind Inline, Extern und Intern.

Interne, Externe und Inline CSS-Stile

Lassen Sie uns jeden Stil kurz durchgehen, beginnend mit dem Internen Stil. CSS-Stile, die auf diese Weise erstellt werden, werden jedes Mal geladen, wenn eine gesamte Website aktualisiert wird, was die Ladezeit erhöhen kann. Darüber hinaus können Sie denselben CSS-Stil nicht auf mehreren Seiten verwenden, da er auf einer einzelnen Seite enthalten ist. Dies bringt jedoch auch Vorteile mit sich. Alles auf einer Seite zu haben, erleichtert das Teilen der Vorlage für eine Vorschau. 

Die Externe Methode könnte die bequemste sein. Alles wird extern in einer .css-Datei erledigt. Das bedeutet, dass Sie die gesamte Gestaltung in einer separaten Datei durchführen und das CSS auf jede Seite anwenden können, die Sie möchten. Der externe Stil könnte auch die Ladezeiten verbessern.

Zuletzt werden wir über den Inline-Stil von CSS sprechen. Inline arbeitet mit spezifischen Elementen, die den <style>-Tag haben. Jede Komponente muss stilisiert werden, daher ist es möglicherweise nicht die beste oder schnellste Methode, um CSS zu handhaben. Aber es kann nützlich sein, wenn Sie beispielsweise ein einzelnes Element ändern möchten, Änderungen schnell anzeigen möchten, oder vielleicht keinen Zugriff auf die CSS-Dateien haben.

Fazit

Fassen wir zusammen, was wir hier über CSS gelernt haben und wie es bei der Ästhetik von Webseiten hilft:

• CSS wurde erstellt, um in Verbindung mit anderen Auszeichnungssprachen wie HTML zu arbeiten. Es wird verwendet, um eine Seite zu stilisieren.
• Es gibt drei Arten der Implementierung von CSS, und Sie können den externen Stil verwenden, um mehrere Seiten gleichzeitig anzupassen.
• Sie werden heutzutage nicht weit kommen, ohne irgendeine Art von CSS-Implementierung zu sehen, da es genauso eine Voraussetzung ist wie die Auszeichnungssprache selbst.

Alles in allem hoffen wir, dass Sie diesen Artikel hilfreich fanden, und wenn Sie Fragen haben, hinterlassen Sie diese bitte im Kommentarbereich unten.

Was ist CSS FAQ