t3n – digital pioneers

CSS

RSS-Feed abonnieren

Neueste Artikel

DX, SEO, E-Commerce – darum ist Next.js so beliebt

Das React-Framework Next.js hat mittlerweile endgültig den Mainstream erreicht. Wir haben es genauer unter die Lupe genommen und festgestellt: Für die zunehmende Popularität gibt es gute Gründe.

Ratgeber•6 Min. Lesezeit

CSS Working Group bringt CSS Nesting Module auf den Weg

Sie gehört zu den meist gewünschten CSS-Features überhaupt – die Möglichkeit, CSS-Selektoren ineinander zu verschachteln. Das CSS Nesting Module soll genau das standardisieren und hat sich jetzt auf den steinigen Weg gemacht.

News•2 Min. Lesezeit

10 Jahre Bootstrap: Auf weitere 10 Jahre oder hat das Framework ausgedient?

Jeden Dienstag blicken wir im Wochenbriefing für unsere Pro-Member auf ein wichtiges Thema der IT. Heute geht es um CSS-Frameworks. Den Impuls gab der zehnte Bootstrap-Geburtstag.

Briefing•3 Min. Lesezeit

Was ist eigentlich CSS in JS?

CSS in JavaScript ist kontrovers – und kann durchaus einen Blick wert sein, nicht nur für React-Entwickler. Wir stellen das Konzept vor und formulieren Fragen, die dir bei der Entscheidung für die CSS-in-JS-Library helfen können.

Ratgeber•7 Min. Lesezeit

4 CSS-Kniffe, die eure Website aufwerten – und euch das Leben leichter machen

Angehende Frontend-Entwickler brauchen CSS-Kenntnisse. Vielen ist die Stylesheet-Formatierungssprache dennoch ein Graus. Auch wer nie zum CSS-Profi werden wird: Diese vier Tipps kann man immer wieder gebrauchen.

Ratgeber•3 Min. Lesezeit

CSS ist kompliziert? Mit diesen Spielen lernst du wichtige CSS-Features wie nebenbei

Am Rechner spielen und gleichzeitig neues Wissen über das Grid-Modul, CSS Flexbox oder die verschiedenen CSS-Selektoren erwerben – hört sich nach einem guten Plan an? Dann haben wir ein paar Spiele für euch.

Tool-Tipp•3 Min. Lesezeit

Mit Focus-Ring-Feature und Dark-Mode: Tailwind 2.0 ist da

Neun Monate nach Release von Version 1.0 hat das immer beliebter werdende CSS-Framework jetzt Version 2.0 erreicht. Das steckt drin.

News•1 Min. Lesezeit

Responsive Webdesign: 4 Tools für die Viewport-Vorschau

Auf einen Blick sofort sehen, ob euer CSS für die verschiedenen Viewport-Größen funktioniert? Dafür gibt es eine Reihe von Tools – diesesr Tool-Tipp stellt vier davon vor.

Tool-Tipp•3 Min. Lesezeit

PureCSS Oil Painting: Entwicklerin erstellt interaktives „Ölgemälde“ aus reinem CSS

Diana Adrianne hat wieder zugeschlagen. Mit ihrem bisher umfangreichsten Werk hebt sie ihr eigenes Schaffen auf eine neue Ebene. Dieses CSS-Gemälde könnt ihr sogar interaktiv verändern.

Fundstück•1 Min. Lesezeit

Pfui: Was du mit CSS machen könntest, aber nicht solltest

Hättet ihr es gewusst? Ein funktionierender Keylogger oder ein diskretes User-Tracking lässt sich recht einfach per CSS umsetzen. Die Komplizenschaft übernimmt ein bisschen Javascript.

Fundstück•3 Min. Lesezeit

CSS steht für Cascading Style Sheets und ist eine Kernsprache des Word-Wide-Web. CSS hat eine große Bedeutung in der Webentwicklung, denn es werden häufig im Zusammenhang mit HTML („Hypertext-Markup-Language“), Gestaltungsanweisungen einer Website erstellt. Darunter fallen zum Beispiel die Styles für das Layout wie Schriftarten, Farben, Ränder, Linien, Höhen, Breiten, Hintergrundbilder und zur Positionierung und inzwischen sogar komplexere Module, mit denen beispielsweise Animationen und die passenden Darstellungen für verschiedene Ausgabemedien definiert werden können. Außerdem lassen sich neben dem Ausgabemedium Monitor auch andere Medien wie zum Beispiel Drucker oder Handy-Displays ansprechen. So können medienspezifische Besonderheiten berücksichtigt werden.

Mehr erfahren

Wie funktioniert CSS ?

Elemente eines Dokuments können aufgrund verschiedener Eigenschaften identifiziert werden. Dazu zählen neben dem Elementnamen (zum Beispiel „a“ für alle Hyperlinks), ihrer ID und Position innerhalb des Dokuments (etwa alle Bildelemente innerhalb von Linkelementen) auch Details wie Attribute (beispielsweise alle Linkelemente, deren href-Attribut mit „www.example.com“ beginnt) oder die Position in einer Menge von Elementen (zum Beispiel das siebte Element einer Liste). Mit CSS-Anweisungen können für jede solcher Elementgruppen Vorgaben für die Darstellung festgelegt werden. Diese Festlegungen können zentral erfolgen, aber auch in separaten Dateien, sodass sie leichter für andere Dokumente wiederverwendet werden können. Viele Entwickler haben großen Respekt vor CSS, dabei müssen einfach nur die Grundkonzepte verstanden und beachtet werden.

Die Stylesheet-Sprache ist ein so genannter „Living Standard“ (lebendiger Standard) und wird vom World-Wide-Web-Consortium (W3C) beständig weiterentwickelt. Cascading-Style-Sheets werden vor allem genutzt, um semantisch ausgezeichnete HTML-Elemente zu formatieren. Anders ausgedrückt werden die im HTML-Dokument erstellten Elemente gestaltet und positioniert, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. CSS font ist die Kurzschrift für die Schrifteigenschaften in einer CSS-Regel.

Die Geschichte hinter CSS

Entwickelt wurde CSS von Håkon Wium Lie. 1994 veröffentlichte er seinen ersten Vorschlag, den er später als „CHSS“ (Cascading-HTML-Style-Sheets) bezeichnete. Zusammen mit Bert Bos, der zur selben Zeit an Argo arbeitete, entwickelte er die Sprache weiter. 1995 wurde das W3C auf CSS aufmerksam. Im Dezember 1996 wurde die CSS-Level-1-Recommendation publiziert. Diese Norm befolgen die aktuellen Browser mittlerweile fast vollständig.

Seit 2000 ist CSS Level 3 in der Entwicklung. Hier werden die Entwicklungen weiter vorangetrieben, die bereits mit CSS2 begonnen wurden. CSS3 wird im Gegensatz zu den Vorgängern modular aufgebaut, womit einzelne Teiltechniken (beispielsweise Steuerung der Sprachausgabe oder Selektoren) in eigenen Versionsschritten entwickelt werden können.

Weitere Informationen und Artikel rund um das Thema CSS findet ihr auf dieser Seite.