Was ist CSS?

Read in English (Auf Englisch lesen).

Die Erstellung von Webseiten ist ein vielschichtiger Prozess, der eine Reihe von Fähigkeiten und Technologien erfordert. Vor allem HTML und CSS sind die grundlegenden Technologien, auf denen Websites basieren. Durch die geschickte Kombination von HTML und CSS können Entwickler optisch ansprechende und gut strukturierte Websites gestalten, die die Benutzerfreundlichkeit verbessern.

In diesem Artikel befassen wir uns mit den Grundlagen von CSS, seiner Syntax, seinen Funktionen, seinen Vorteilen und vielem mehr. 

Wofür steht CSS?

CSS ist ein Akronym für Cascading Style Sheets. Ein Stylesheet ist im Bereich der Webentwicklung ein Dokument, das Richtlinien und Anweisungen für die Darstellung von Elementen auf einer Webseite enthält. 

Interessant ist, dass jeder Webbrowser mit einem Standard-Stylesheet ausgestattet ist. Die meisten Webseiten enthalten jedoch benutzerdefinierte CSS-Stile, die von Webdesignern konfiguriert werden und die Standard-CSS-Einstellungen außer Kraft setzen. Die kaskadierende Natur von CSS sorgt dafür, dass die zuletzt definierte Stilvorlage Vorrang hat. 

Der Ursprung von CSS

Die Idee zur Gestaltung von Websites entstand bereits 1994, doch CSS wurde nicht von einer einzelnen Person erfunden. Der norwegische Webpionier und Informatiker Håkon Wium Lie brachte den ursprünglichen Vorschlag für CSS ein.

Kurz darauf schloss sich Bert Bos, ein bekannter niederländischer Informatiker und Entwickler des Argo-Browsers, mit Lie zusammen, um die CSS-Spezifikation weiterzuentwickeln. Gemeinsam verfassten Lie und Bos die erste offizielle CSS-Spezifikation, die 1996 vom World Wide Web Consortium (W3C) veröffentlicht wurde.

Wie funktioniert CSS? 

Betrachten Sie die Hypertext Markup Language (HTML) als das Skelett eines Buches, das die Kapitel, Abschnitte und Inhalte umreißt. Im Gegensatz dazu dient CSS als Umschlagdesign und Typografie des Buches, die den Leser dazu verleiten, das Buch in die Hand zu nehmen und zu erkunden.

Technisch gesehen stellen HTML-Elemente verschiedene Komponenten auf einer Webseite dar, z. B. einen Absatz oder eine Überschrift. Ein Beispiel: Dies ist ein HTML-Tag:

<p>Dies ist ein Absatz</p> 

Denken Sie daran, dass der Absatz für sich genommen kein Styling hat. Mit dem folgenden CSS-Code kann dieser Absatz jedoch gestaltet werden: 

p { color: purple; font-weight: bold; }

Im gezeigten CSS-Code dient „p“ als Selektor, der festlegt, dass die Formatierung für sämtliche HTML-Absätze angewendet wird. Der Code innerhalb der geschweiften Klammern stellt die Deklaration dar und umfasst die Eigenschaften (wie Farbe und Schriftart) sowie die zugehörigen Werte (wie lila und fett), die auf den Selektor angewendet werden.

Ähnlich können unterschiedliche Stile erzielt werden, indem die Werte angepasst werden. Beispielsweise könnten Eigenschaften wie „background-color“, „background-position“ und „text-align“ die Werte „red“, „top“ und „center“ erhalten.

Arten von CSS

Ein Webdesigner kann einen von drei CSS-Typen zur Gestaltung und Anpassung einer Website verwenden: Inline, eingebettet (intern) oder extern. Im Folgenden wird jeder dieser Typen im Detail erläutert.

Inline-CSS

Inline-CSS wendet Stile auf ein einzelnes HTML-Element an und definiert sie im style-Attribut des Elements. Dieser Ansatz ist nützlich, um schnell eine Vorschau anzuzeigen, zu testen oder Probleme mit Webseiten zu beheben. Die übermäßige Verwendung von Inline-CSS kann jedoch dazu führen, dass die HTML-Struktur unordentlich wird.

Eingebettetes CSS 

Bei eingebettetem oder internem CSS wird der CSS-Code direkt in der HTML-Datei platziert. Diese Methode ist praktisch, wenn ein spezifischer Stil auf eine bestimmte HTML-Seite angewendet werden soll. Allerdings kann es umständlich sein, eingebettetes CSS für mehrere Seiten zu nutzen, da der CSS-Code auf jeder einzelnen Seite separat eingefügt werden muss. 

Externes CSS

Externes CSS ist besonders nützlich für die Gestaltung großer Websites. Um externes CSS anzuwenden, müssen Webseiten eine Verbindung zu einer externen.css-Datei herstellen. Auf diese Weise können Webdesigner oder Entwickler einen einheitlichen Stil für alle Seiten beibehalten. Andererseits ist zu beachten, dass die Verwendung mehrerer CSS-Dateien die Ladezeit der Website beeinträchtigen kann. 

Zusammenfassend kann gesagt werden, dass die Verwendung von Inline-CSS für einzelne Elemente gilt, während eingebettetes CSS sich auf bestimmte Seiten bezieht und externes CSS zur Gestaltung einer gesamten Website dient. Die Wahl des richtigen CSS-Typs hängt von den individuellen Anforderungen und dem Umfang des Projekts ab, wobei die Vor- und Nachteile jedes Ansatzes für die Gestaltung einer Website zu berücksichtigen sind.

Vor- und Nachteile der Verwendung von CSS

Jede Programmiersprache hat ihre Stärken und Schwächen. Hier sind einige bemerkenswerte Vor- und Nachteile der Verwendung von CSS in der Webentwicklung:

Vorteile

• Unterstützung für die gleichzeitige Anwendung von Stilen auf mehreren Webseiten

• Der minimale Code von CSS verbessert die Ladegeschwindigkeit von Websites und verbessert die Platzierung in Suchmaschinen

• Rationalisierung der Website-Pflege, da CSS Änderungen an Website-Design-Elementen ermöglicht, ohne den zugrunde liegenden HTML-Code zu verändern

Nachteile

• Die Wahl des richtigen CSS-Typs kann verwirrend sein

• Die Fragmentierung des CSS-Codes in verschiedenen Webbrowsern kann zu Kompatibilitätsproblemen führen.

• Da es kein eingebautes Sicherheitssystem gibt, kann jeder, der Zugriff auf Dateien hat, CSS ändern.

Warum CSS lernen?

Ob Sie Anfänger oder Profi sind, das Erlernen von CSS bringt viele Vorteile mit sich, von denen einige im Folgenden aufgeführt sind:

Das Erlernen von CSS ermöglicht es Ihnen, die wesentlichen Bausteine des Webs zu verstehen. Dieses Wissen kommt verschiedenen Berufen zugute, darunter Marketing, Design und mehr.

Sie können Ihre eigene Website mit CSS erstellen und so Startkosten sparen, während Sie gleichzeitig die Markenidentität und das Kundenerlebnis verbessern.

CSS-Kenntnisse erleichtern das Erlernen und Beherrschen weiterer Programmiersprachen wie HTML und JavaScript, was Ihre Fähigkeiten und Berufsaussichten erweitern kann.

Wenn Sie Ihre Fähigkeiten in der Webentwicklung als Freiberufler einsetzen, können Sie neben Ihrem regulären Job oder Ihrem Studium ein zusätzliches Einkommen erzielen. 

Die ersten Schritte

Der Erwerb von CSS-Kenntnissen verläuft nicht immer geradlinig. Studenten können sich beispielsweise an einer Universität einschreiben, die Studiengänge in Informatik, Grafikdesign oder Computertechnik anbietet. IT-Profis, die ihre Qualifikationen erweitern möchten, sollten sich für eine anerkannte Zertifizierung wie den CIW Web Development Professional entscheiden.

Sie können aber auch ohne einen Hochschulabschluss eine Karriere in der Webentwicklung beginnen. Online-Coding- und Webentwicklungs-Bootcamps bieten einen Weg, um die erforderlichen Fähigkeiten für Einstiegsjobs im Webdesign zu erwerben.

Berufsfelder

Im Folgenden finden Sie die Berufe, in denen Sie Ihre CSS-Kenntnisse einsetzen können, sowie deren durchschnittliche Jahresgehälter:

Web-Designer

Durchschnittliches jährliches US-Grundgehalt (Glassdoor): 30.000 € - 50.000 € [2]

Als Webdesigner sind Sie darauf spezialisiert, das Layout und die Funktionen einer Website zu gestalten, die auf die Zielgruppe Ihres Kunden zugeschnitten sind. Außerdem helfen Sie bei der Festlegung der technischen Anforderungen der Website und nehmen bei Bedarf Aktualisierungen vor.

Front-End-Entwickler 

Durchschnittliches jährliches US-Grundgehalt (Glassdoor): 50.000 € - 65.000 € [3]

In Ihrer Rolle als Front-End-Entwickler entwerfen und erstellen Sie Benutzeroberflächen (UI) für Websites und Anwendungen. Als Schnittstelle zwischen Endnutzern und Backend-Entwicklern stellen Sie sicher, dass Websites und Anwendungen in unterschiedlichen Browsern zugänglich und kompatibel sind. 

Web-Entwickler

Durchschnittliches jährliches US-Grundgehalt (Glassdoor): 42.000 € - 60.000 € [4]

Als Web-Entwickler sind Sie sowohl für die visuellen als auch für die technischen Aspekte der Website zuständig. Von der Gestaltung des Layouts bis zur Implementierung wichtiger Funktionen sind Sie an allen Aspekten des Erstellungsprozesses einer Website beteiligt.

Nächste Schritte 

Verbessern Sie Ihre CSS-Kenntnisse mit dem Kurs Einführung in CSS3, der von der University of Michigan auf Coursera angeboten wird. Dieser Kurs, der etwa 10 Stunden dauert, ist anfängerfreundlich und konzentriert sich auf CSS-Regeln, Code-Tests und mehr.