• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Awantego

  • Unique Content
  • Blog
  • Kontakt
You are here: Home / Lexika / CSS – was bedeutet das?

23. September 2020 by Claudia Rothenhorst

CSS – was bedeutet das?

CSS ist die Abkürzung für „Cascading Style Sheet„ und bedeutet auf Deutsch in etwa „abgestufte Designvorlagen„. Dabei handelt es sich um eine einfache Stylesheet-Sprache, die es erlaubt, das Aussehen für bestimmte Elemente innerhalb elektronischer Dokumente wie beispielsweise einer Webseite festzulegen.

Inhalt

  • Die Geschichte von CSS kurz gefasst
  • Aufbau einer CSS-Regel
  • CSS Selektoren – Typen und Funktion
    • Einfache Selektoren
    • Pseudoklassen
    • Kombinatoren
    • Pseudoelemente
    • Wie werden die CSS Vorgaben an ein Dokument übergeben?
    • Internes CSS
    • Inline-CSS
  • Die Vorteile von CSS

Die Geschichte von CSS kurz gefasst

Die Anfänge der Stylesheet-Sprache reicht zurück bis etwa in das Jahr 1993. Mit der Einführung neuer Browser (z.B. Mosaik Browser) wurde deutlich, dass Webdesigner nur wenige Möglichkeiten hatten, das Design einer Website entsprechend ihren Vorstellungen zu gestalten. Im Oktober 1994 wurde eine als „Cascading HTML Style Sheets„ (CHSS) bezeichnete frühe CSS Version von Håkon Wium Lie, einem CERN-Mitarbeiter, vorgestellt. Zusammen mit Bert BOS, einem ebenfalls am CERN tätigen Computerwissenschaftler, entwickelte Håkon Wium Lie schließlich die erste Version. 1996 wurde CSS1 veröffentlicht und erstmals vom W3C, dem World Wide Web Consortium, empfohlen. 2 Jahre später, im Mai 1998, folgte CSS2. Mit der Einführung der zweiten Version wurden zahlreiche neue Elemente wie beispielsweise medienspezifische Stylesheets implementiert.

Auf Empfehlung des W3C wurde 2011 CSS2.1 veröffentlicht, dem 2016 eine überarbeitete Version mit der Bezeichnung CSS2.2 folgte. CSS3 ist die aktuelle Version. Die wohl wichtigste mit CSS3 eingeführte Neuerung sind die sogenannten media-queries, mit denen Webseiten für die Darstellung auf unterschiedlichen Endgeräten optimiert werden können. Eine Version 4 von CSSwird es laut W3C nicht geben. Vielmehr sollen die einzelnen Module von CSS3 unabhängig voneinander weiterentwickelt werden. Seit der ersten Version hat sich an der Syntax

CSS
Wie ist CSS aufgebaut?

der CSS Regeln nichts grundlegend geändert.

Aufbau einer CSS-Regel

Eine Cascading Style Sheet Regel hat den folgenden grundsätzlichen Aufbau

Selektor {
Eigenschaft: Eigenschaftswert;
}

Eigenschaft und Eigenschaftswert werden zusammengenommen als Deklaration bezeichnet.

Ein Beispiel:

h1 {
color: blue;
}

In diesem Beispiel ist h1 der Selektor, mit dem sich bestimmen lässt, dass die folgende Deklaration für h1 Überschriften gültig ist. Mithilfe der Deklaration wird festgelegt, dass die Eigenschaft Farbe (color) der h1 Überschriften im Dokument den Eigenschaftswert Blau (blue) erhalten soll. Eigenschaft und Eigenschaftswert müssen durch einen Doppelpunkt voneinander getrennt werden. Die Deklaration wird durch ein Semikolon (;) abgeschlossen und in geschweifte Klammern gesetzt. Sollen mehrere Eigenschaften eines Elements formatiert werden, werden die Dekorationen innerhalb eines Regelsatzes jeweils mit einem Semikolon voneinander getrennt. Zum Beispiel

h1 {
color: red;
font-size: 60px;
text–align: center;
}

In Cascading Style Sheets kommt den Selektoren eine besondere Bedeutung zu.

CSS Selektoren – Typen und Funktion

Damit in einem HTML Dokument bestimmte Eigenschaften auf ein Element einer Website angewendet werden können, muss zunächst definiert werden, welches Element angesprochen werden soll. Lesen Sie hier alles über HTML.

In CSS übernehmen Selektoren diese Funktion. Sie werden als ein Teil einer CSS Regel eingefügt. Cascading Style Sheet Selektoren sind

  • einfache Selektoren
  • Pseudoklassen
  • Kombinatoren
  • Pseudoelemente

Einfache Selektoren

Einfache Selektoren sind der Universalselektor * (Sternchen oder Asterisk) und der Typ-Selektor (elemet). Falls erforderlich, können einfache Selektoren durch einen ID-Selektor sowie beliebig vielen Pseudoklassen oder Attributselektoren in einer beliebigen Reihenfolge, aber ohne Trennung durch ein Leerzeichen, erweitert werden. Jede dieser Komponenten muss eine Übereinstimmung ergeben, damit mit einem einfachen Selektor ein Element angesprochen werden kann.

Pseudoklassen

Pseudoklassen sind Schlüsselbegriff, die hinter einen Selektor angegeben werden, um den Zustand eines Elements auf einer Webseite abzufragen. Zu den Pseudoklassen zählen strukturelle Pseudoklassen und dynamische Pseudoklassen. Mit strukturellen Pseudoklassen kann eine Webseite in Bezug die Struktur des Inhalts und anderer Faktoren wie eingegebene Formulardaten, die Position des Mauszeigers oder des Browserverlaufs gestaltet werden. Pseudoklassen beginnen immer mit einem Doppelpunkt (:) gefolgt von einem Schlüsselwort. Das Schlüsselwort definiert die Eigenschaft der Pseudoklasse. Zu den strukturellen Pseudoklassen zählen unter anderem:

  • :root
  • :empty
  • :first-child
  • :last-child
  • :first-of-type
  • :last-of-type
  • :only-of-type
Mehr zum Thema:
So setzen Sie ein mehrsprachiges Projekt um ohne ein Sprachtalent zu sein

Eine eigene Gruppe bilden dynamische Pseudoklassen. Mit dynamischen Pseudoklassen kann das Aussehen und Verhalten von Links innerhalb einer Webseite gesteuert werden. Beispiele für dynamische CSS Pseudoklassen sind

  • :link
  • :visited
  • :active
  • :hover
  • :focus

Pseudoklassen können mit Einfachselektoren kombiniert werden. Wenn sie eigenständig in das Cascading Style Sheeteingefügt werden, haben sie Auswirkungen auf das komplette HTML Dokument.

Kombinatoren

Mit Kombinatoren können zwei Selektoren miteinander verkettet werden. Der erste Selektor definiert bei der Verwendung von Kombinatoren eine Bedingung. Der zweite Selektor ist das Ziel, das angesprochen werden soll, wenn die mit dem ersten Selektor definierte Bedingung erfüllt wird. Mit dem Kombinator wird zudem angegeben, in welchem Verhältnis die beiden Selektoren vor und nach dem Kombinator zueinanderstehen müssen. Dabei ist zu beachten, dass zwischen zwei Selektorenimmer nur ein Kombinator verwendet werden kann. Es ist jedoch möglich, die Verkettung durch einen weiteren Kombinatorzu verlängern und einen weiteren Selektor anzuhängen.

  • Kombinatoren in CSS sind
  • Kindkombinator: e > f
  • Nachfahrenkombinator: e f
  • Nachbarkombinator: e + f
  • The lobotomized owl selector: * + *
  • Geschwisterkombinator: e ~ f

Pseudoelemente

CSS
Wofür braucht man Pseudoelemente bei einer Website?

Pseudoelemente finden Verwendung, um bei der Wiedergabe einer Webseite Abschnitte zu erzeugen, die in Elementebaum eigentlich nicht vorhanden sind. Diese Abschnitte können mit Inhalt gefüllt und formatiert sein. Diese Selektoren können nur allein stehen oder am Ende verketteter Selektoren eingefügt werden. Allgemein gilt es als sinnvoll, diese Selektoren an einen einfachen Selektor anzuhängen, um die Auswirkung sicher auf das angesprochene Element zu begrenzen. Seit CSS3 notiert man Pseudoelemente mit einem vorangestellten doppelten Doppelpunkt (::). Cascading Style Sheet kennt die folgenden Pseudoelemente

  • ::before, ::after
  • ::first-letter
  • ::first-line
  • ::backdrop
  • ::selection
  • ::placeholder

Wie werden die CSS Vorgaben an ein Dokument übergeben?

Es gibt drei Möglichkeiten, die Cascading Style Sheet Formatvorgaben in ein HTML Dokument einzufügen. Möglich sind

  • Externe Dateien
  • Internes CSS
  • Inline-CSS

Externe Cascading Style Sheet Dateien

Externe Stile definiert man im < link> -Element im < head> Bereich einer HTML-Seite:

< head>
< link rel = „stylesheet“ type = „text / css“ href = „styles.css„>
< / head>

Ein externes Cascading Style Sheet lässt sich mit einem beliebigen Texteditor erstellen und als .css Datei speichern. Dabei muss man beachten, dass die Datei keine HTML-Tags enthalten darf.

Internes CSS

Ein internes Stylesheet findet häufig Verwendung, wenn eine einzelne HTML-Seite einen eigenen Stil erhalten soll. Interne Stylesheets definiert man im < style> -Element im Kopfbereich einer Webseite. Zum Beispiel:

< head>
< style>
body {
background-color: yellow;
}
< / style>
< / head>

Inline-CSS

Will man einzelne Elemente einer Webseite auf besondere Weise formatieren, kann dies mit Hilfe von Inline-CSS geschehen. Hierbei wird das Stilattribut dem entsprechenden Element hinzugefügt. Zum Beispiel

< h1 style = „color: blue; align: center;“> Dies ist eine Überschrift < / h1>

Die Vorteile von CSS

CSS
Eine Website wird Dank CSS auf allen Geräten optimal nutzbar

Durch die Trennung von Inhalt und Gestaltung gestalten sich HTML-Seiten deutlich kleiner und für Programmierer übersichtlicher. Die reduzierte Datenmenge verkürzt die Ladezeit von Webseiten insbesondere auf mobilen Geräten wie Tablets oder Smartphones. Zudem werden spätere Änderungen erheblich erleichtert. Cascading Style Sheets bieten Programmierern und Webdesignern mehr Gestaltungsmöglichkeiten als reines HTML und ermöglichen ohne großen Aufwand die optimale Anpassung von Webseiten an unterschiedliche Endgeräte.

Ähnliche Artikel

  • Remote Work bei Awantego: Wir fühlen uns wohl dort, wo wir… 15. September 2021
  • Produktsuche im E-Commerce: So suchen Kunden nach Produkten 17. Dezember 2021
  • E-Commerce KPIs: Welche sind die wichtigsten für Ihr Online… 22. April 2022
  • So setzen Sie ein mehrsprachiges Projekt um ohne ein… 22. Juli 2021

Filed Under: Allgemein, Software Tagged With: Attribut, Browser, CSS, Element, HTML, Inline, Stylesheet, Syntax, Webseite

Primary Sidebar

Neueste Artikel im Blog

GPT oder Data-to-Text: Welche Alternative ist besser?

GPT-3 oder Data-to-Text: Welche Alternative ist besser?

13. März 2023

Awantego_E-Commerce_Expo_2023

Die E-Commerce Berlin Expo 2023 – unsere Erfahrungen

2. März 2023

Online shop

Produktbeschreibung erstellen: Tipps für Einsteiger

20. Februar 2023

AX Deutschland Tour - Stadt Banner Stuttgart

Was bringt Textautomatisierung monetär und welche Effekte hat sie auf die eigene Webseite? 

13. Februar 2023

Awantego auf der Expo E-Commerce Berlin

Awantego auf der E-Commerce Berlin Expo 2023

24. Januar 2023

Texte für Fashion Online Shops

So erzielen Sie Erfolg mit automatisiertem Content im E-Commerce

20. Januar 2023

Marketing_Personalisierung

Personalisierte Produktbeschreibungen revolutionieren die Customer Experience

13. Januar 2023

Automated Content erstellen: Ein Textkonzept ist erforderlich

Content generieren: So erstellen Sie automatisierte Texte

8. Januar 2023

Gute Texte können die Sichtbarkeit der Webseite positiv beeinflussen

So erhöhen Sie die Sichtbarkeit Ihres Onlineshops mit automatisiertem Content

4. Januar 2023

Kontakt zur Agentur

Agentur Awantego
Tel.: +49(0)711/48890-50
E-Mail: info@awantego.com

Anschrift
Breitscheidstraße 65
70176 Stuttgart

Traumjob bei Awantego:

  • Vertriebs-Mitarbeiter Online Marketing
  • Online-Marketing Spezialist (m/w/d)
  • Student / Praktikant (m/w/d)
  • Software-Entwickler php/Javascript (m/w/d)
  • Praktikant Online-Marketing (m/w/d)

Downloads / Tutorials

  • Downloads
  • Tutorials

Weitere Anleitungen und Tutorials finden Sie im Blog von Awantego.com

Am meisten gelesen

  • Unique Content – Die Technik dahinter
  • Marketing Lexikon
  • Marketing Automation
  • Mehr Kunden mit Newsletter-Marketing

Weitere Beiträge im Blog

Content erstellen

Die besten Content Marketing-Strategien

18. Oktober 2022

Online Shop Texte erstellen

So schreiben Sie überzeugende Onlineshop Texte

7. Oktober 2022

Gute Produktseiten erhöhen den Bestellwert

Automatisierte Texterstellung: Ein Blick hinter die Kulissen eines Contentprojekts

5. Oktober 2022

Texte für alle Produkte im Online Shop erstellen

Vorteile der automatischen Texterstellung für Unternehmen

4. Oktober 2022

Kundengruppen identifizieren und erfolgreich ansprechen

Kundentypen erkennen und richtig ansprechen

30. September 2022

So bereiten Sie Ihre Produktdaten optimal vor

22. September 2022

Weihnachtssaison_2022

Weihnachtsgeschäft 2022: Prognosen und Ideen

16. September 2022

Automated Content erstellen

Mehr Power für Ihren Online Shop dank der Content Automatisierung

9. September 2022

Kundenbindung_Kundenpflege

So stärken Sie die Kundenbindung in Ihrem Online Shop

15. August 2022

positives Kundenerlebnis wirkt sich auf die Kundenbindung aus

Mit 5 Schritten zum einzigartigen Kundenerlebnis

9. August 2022

Customer Journey optimieren

So steuern Sie die Customer Journey mit dem richtigen Content

29. Juli 2022

Unsere_Workation_Ferienhaus_Ostsee

Wir hätten es nicht für möglich gehalten…

21. Juli 2022

E-Commerce Produkttexte: So punkten Sie mit exzellentem Content

8. Juli 2022

Footer

Kontakt

Digital-Agentur Awantego
Tel.: +49 (0)711/48890-50

E-Mail: info@awantego.com
Web: www.awantego.com

Anschrift
Breitscheidstraße 65
70176 Stuttgart

Jobs bei Awantego

Offene Stellen bei Awantego

  • Vertriebs-Mitarbeiter Online Marketing
  • Online-Marketing Spezialist (m/w/d)
  • Student / Praktikant (m/w/d)
  • Software-Entwickler php/Javascript (m/w/d)
  • Praktikant Online-Marketing (m/w/d)

Jetzt bewerben

E-Mail: jobs@awantego.com
Tel.: 0711-4889050

Online Marketing Lexikon

Im Marketing-Lexikon von Awantego erläutern wir alle wichtigen Begriffe zum Thema Online-Marketing kompakt und verständlich.


Die wichtigsten Themen:

Automated Unique Content

Online Marketing Downloads

Downloads & Anleitungen

Im Download-Bereich von Awantego.com finden Sie Anleitungen, Tutorials und eBooks rund um das Thema Content und Marketing.


Gastautoren

Informationen für Gastautoren

Neueste Beiträge im Blog

So erstellen Sie mehrsprachige Produktbeschreibungen kostengünstig und effizient

Automatische Textgenerierung für natürlich wirkende Texte aus Daten

Internationalisierung im E-Commerce: Wie bereitet man einen Rollout vor?

Machen Sie Ihren Online Shop bekannt: 5 wirkungsvolle Tipps für mehr Kunden

Duplicate Content entdecken und beseitigen

Darum geht’s im Blog

4.7.4A+ Amazon ContentAbfolgeAbfrageAbgrenzungAbonnenten für den NewsletterAbonnenten gewinnenAbrechnungAbsenderAbsicherungaccelerated mobile pagesAccountActiveCampaignAdobeAdresseAdvertisingAdwordsAffiliateAgenturAhrefs
  • Jobs
  • Blog
  • Datenschutz
  • Disclaimer
  • Impressum
  • Awantego.com in English

© 2023 · Awantego.com ·