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

Awantego

  • Unique Content
  • Lead Pilot
  • Websites
  • Blog
  • Kontakt
You are here: Home / Lexika / Was ist CSS?

23. September 2020 by Claudia Rothenhorst

Was ist CSS?

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

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.

Mehr zum Thema:
Was ist eine SKU?

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

  • 7 visuelle Techniken und Strategien für wirksame… 15. April 2019
  • Website mit WordPress erstellen - Theme auswählen 12. Februar 2019
  • Tipps für die Kundengewinnung über Pinterest 7. März 2019
  • AX Content Day Masterclass Folien 6. Oktober 2020

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

Primary Sidebar

Neueste Artikel im Blog

Produktsuche online

Produktsuche im E-Commerce: So suchen Kunden nach Produkten

29. Oktober 2020

Was sind Produktkategorien im Marketing, wie werden diese erstellt und zu welchem Zweck?

8. Oktober 2020

Produktpräsentation im Online Shop

Produktpräsentation für E-Commerce: So verkaufen Sie online richtig

2. Oktober 2020

AXCD 2020: Die Content Konferenz

AXCD 2020: Wir sind dabei. Und Sie?

25. September 2020

Wirkungsvolle Tipps, um die Konversionsrate in Ihrem Online Shop zu steigern

11. September 2020

7 Tipps für professionelle Produktbeschreibungen

14. August 2020

Produktvorteile

So bringen Sie Produktvorteile in Ihren Produktbeschreibungen auf den Punkt

5. August 2020

So erstellen Sie Texte für Ihre Produktpalette

31. Juli 2020

5 Regeln einer erfolgreichen Produktpräsentation im Online Shop

24. Juli 2020

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
  • Was kostet Ihre neue Website?
  • Was ist WordPress?

Weitere Beiträge im Blog

Online Shops und Corona Krise: Welche Inhalte kommen gut an?

6. Mai 2020

Produktbeschreibungen für Online Apotheken erstellen

Produktbeschreibungen für Online Apotheken

30. April 2020

Amazon_SEO_Produktbeschreibungen Amazon

Produktbeschreibungen für Amazon: So erstellen Sie ansprechende Produkttexte

18. April 2020

5 Express Tipps für Online Shops in der Corona Krise

7. April 2020

Vorteile der automatischen Texterstellung für Unternehmen

1. April 2020

automatische Texte für E-Commerce

So schreiben Sie gute Kategorietexte für Ihren Online Shop

26. März 2020

automatische Texte erstellen

Automatische Texterstellung: Schreiben Sie Ihre Texte immer noch selbst?

20. März 2020

WooCommerce Tutorial: Produktseiten mit Elementor erstellen

2. März 2020

Konsumentenverhalten wirs immer mehr digitalisiert

Konsumentenverhalten 2020: Neuste Erkenntnisse aus der Konsumentenforschung

24. Februar 2020

KI

Wie können Online Händler von KI profitieren?

30. Januar 2020

Retouren

Tipps zur Senkung der Retourenquote

20. Januar 2020

automatische Textgenerierung

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

3. Januar 2020

Die Rolle von Unique Content in der Content Marketing Strategie

12. Dezember 2019

Aktuelle Tutorials

  • Yoast nutzen – So nutzen Sie Yoast für Ihren Text

  • Ahrefs Tutorial

  • Tutorial: Tablepress – einfach eine Tabelle erstellen

  • PDFs und Lead-Magnete mit ActiveCampaign versenden

  • WordPress umziehen

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

Gastautoren

Informationen für Gastautoren

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

Websites

Lead Pilot

Was kostet eine Website?

Online Marketing Downloads

Online Marketing Tutorials

Wichtige und anspruchsvolle Aufgaben beschreiben wir in der Rubrik
WordPress Tutorials .

Downloads & Anleitungen

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

Neueste Beiträge im Blog

Mit diesen Tipps verhindern Sie den Kaufabbruch

Warum ist USP so wichtig für Ihr Marketing?

So erstellen Sie Produktbeschreibungen für erklärungsbedürftige Produkte

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

Produktnutzen beschreiben: Tipps für gute Produktbeschreibungen

Darum geht’s im Blog

Automatic Unique ContentAutomatische TexteContentContent-MarketingE-CommerceFacebookKunden gewinnenMarketingOnline-MarketingOnline ShopProduktbeschreibungenSEOSocial MediaSuchmaschinenoptimierungTextUnique ContentUnternehmenWebsiteWerbungWordpress
  • Jobs
  • Blog
  • Datenschutz
  • Disclaimer
  • Impressum
  • Awantego.com in English

© 2021 · Awantego.com ·

Diese Website benutzt Cookies. Wenn Sie die Website weiter nutzen, gehen wir von Ihrem Einverständnis aus.OK