Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Content Marketing Agentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Full-Service Agentur
    • Internetagentur
    • Local SEO Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • Performance Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopify Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
  • Beste Agentur finden
    • 3D Animationsagentur
    • Content Marketing Agentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Full-Service Agentur
    • Internetagentur
    • Local SEO Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • Performance Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopify Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Projekt anfragen
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
Projekt anfragen

Dr. Web » Webdesign » CSS richtig schreiben

CSS richtig schreiben

  • Aktualisiert am 23. November 2023
  • Markus Seyfferth von Markus Seyfferth
  • Webdesign
  •  

Top Agenturpartner

Werbehinweis-Icon.

B NEX Webdesign

Eckental

Webweisend Media

Düsseldorf

Jocado

Leipzig

Orange Services

München

Andreas Hecht

Hamburg

Ruslan Julbarissow

Köln

Alle Agenturpartner

So manche Style-Definition will auf Anhieb nicht funktionieren, Schuld sind nicht selten versteckte Syntaxprobleme. Vor Überraschungen gefeit ist man nur, wenn man mit den Zeichen und Bezeichnungen richtig umgehen kann.

CSS ist “case insensitiv”, das heißt Groß- und Kleinschreibung werden nicht unterschieden.

 b {font-size : 1em;} und 
B {font-size: 1em;}

können geschrieben werden. Ähnliches gilt für eigene Klassen:

      .oben {font-size : 1em;} und
.Oben {font-size: 1em;} und
.OBEN {font-size : 1em;}

sind das selbe.

Zahlen und Sonderzeichen sind hier jedoch nicht erlaubt. Mancher Browser mag sich vielleicht nicht daran stören, ein anderer aber wohl. Vermeiden Sie Definitionen wie:

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.
      .1 {font-size : 1em;} 
._ {font-size : 1em;}
.überschrift{font-size : 1em;}

Die Grundlage dafür ist etwas komplizierter. Erlaubt nach CSS2 sind A-Za-z0-9 und die ISO 10646 Zeichen 161 und höher sowie das Zeichen “-” mit dem eine Klasse jedoch nicht beginnen darf. Besser also man beschränkt sich auf das Alphabet.

Mancher ist von HTML noch den Gebrauch des Anführungszeichen gewohnt, dies ist hier nicht zulässig.

      B {font-size : "1em";}    

Klammern müssen immer Paarweise erscheinen. Das gilt für ( und { und [ sowie für ” und ‘.

Leerzeichen produzieren keine Fehler. Dieses Beispiel funktioniert:

      B {font-size :   1em ;}    

Falschschreibungen sollten dazu führen, dass nichts ausgeführt wird. Beispielsweise:

      K{font-size : 1em;}    

oder

      H8 {font-size : 1em;}    

Diese Definitionen wird ein Browser ignorieren. Das gilt auch für:

      P{font-family :  garamond;} 

und ähnliche Konstruktionen.

Wie hilfreich war diese Info?

Gesamtbewertung: 0 / 5. Anzahl Bewertungen: 2 0

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Lust auf mehr?

Die Bedeutung von Whitespace im Design

Whitespace (Weißraum oder „negativer Raum”) ist der leere Raum zwischen den Elementen einer Seite. Obwohl viele dies als Verschwendung von wertvollem Platz auf dem Bildschirm ansehen, ist der Weißraum ein wesentliches Designelement:

42 CSS Buttons mit Hover-Effekt & Code Snippets

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn du an eine umfassende Browser-Kompatibilität denkst. Wie gut, dass es fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir heute die besten Beispiele auch gleich in diesem Beitrag präsentieren.

KI Mobile-first Design in 2023: Hype oder Flop für Designagenturen?

Ende 2022 sorgte die KI-Anwendung ChatGPT für Schlagzeilen. Seither ist KI ein beliebtes Buzzword und löst in der IT-Branche die gesamte Gefühlsskala von Zukunftsängste bis Euphorie aus. Wir bleiben gechillt und schauen uns an, wie Sie als Inhaber einer Designagentur von KI getriebenem Mobile-first Design profitieren. Gibt es auch Schattenseiten und Grenzen? Mal sehen.

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.

Fachmagazin für Online-Marketing. Seit 1997. Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur finden in Ihrer Nähe

  • Alle Städte
  • Augsburg
  • Berlin
  • Bonn
  • Dortmund
  • Dresden
  • Düsseldorf
  • Essen
  • Frankfurt am Main
  • Freiburg im Breisgau
  • Hamburg
  • Hannover
  • Innsbruck
  • Karlsruhe
  • Köln
  • Leipzig
  • München
  • Nürnberg
  • Stuttgart
  • Wien
  • Alle Städte
  • Augsburg
  • Berlin
  • Bonn
  • Dortmund
  • Dresden
  • Düsseldorf
  • Essen
  • Frankfurt am Main
  • Freiburg im Breisgau
  • Hamburg
  • Hannover
  • Innsbruck
  • Karlsruhe
  • Köln
  • Leipzig
  • München
  • Nürnberg
  • Stuttgart
  • Wien

Agenturleistungen

  • Beste Agenturen finden
  • Content Marketing Agentur
  • Designagentur
  • Digitalagentur
  • Drupal Agentur
  • Full-Service Agentur
  • Internetagentur
  • Local SEO Agentur
  • Marketing Agentur
  • Performance Marketing Agentur
  • Online Marketing Agentur
  • SEO Agentur
  • Shopify Agentur
  • Shopware Agentur
  • Social Media Agentur
  • TYPO3 Agentur
  • Webagentur
  • Webdesign Agentur
  • Werbeagentur
  • Woocommerce Agentur
  • WordPress Agentur
  • Beste Agenturen finden
  • Content Marketing Agentur
  • Designagentur
  • Digitalagentur
  • Drupal Agentur
  • Full-Service Agentur
  • Internetagentur
  • Local SEO Agentur
  • Marketing Agentur
  • Performance Marketing Agentur
  • Online Marketing Agentur
  • SEO Agentur
  • Shopify Agentur
  • Shopware Agentur
  • Social Media Agentur
  • TYPO3 Agentur
  • Webagentur
  • Webdesign Agentur
  • Werbeagentur
  • Woocommerce Agentur
  • WordPress Agentur