CSS

Hinweis:

Dieser Artikel ist eine persönliche Sammlung zu Infos rund um CSS (Cascading style sheets). Sie hat weder den Anspruch auf Vollständigkeit, noch auf vollständige Richtigkeit. Trotzdem wirst du hier vielleicht noch wertvolle Infos oder Links mitnehmen können.

1 Allgemeines zu CSS

• Stylesheets dienen dazu Layouts für Webseiten zu definieren.
• Ohne Style-Angaben ist das Aussehen von den Default-Einstellungen des Browsers abhängig. Die Website sieht in diesem Fall in jedem Browser anders aus. Mit Stylesheets kann man erzwingen, dass die Website in jedem Browser gleich aussieht.
• Es gibt drei verschiedene Arten, wie man CSS einbinden kann:
  • Embedded: Stylesheets im Head-Bereich der HTML-Datei
  • Inline: CSS direkt in den Tags, Beispiel <p style="bla"></p>
  • External: Stylecheets in einer seperatren CSS-Datei. Vorteil hiervon: Man kann die Datei leicht in mehrere (oder alle) HTML-Dateien einbinden.
  • Mehr Infos zum Einbinden von CSS gibt es auf Selfhtml.
• Die Reihenfolge der style definitions ist in CSS normalerweise egal. Eine Ausnahme gibt es allerdings: Für die Style-Definitionen der Links ist es wichtig, dass a:hover und a:active nach a:link und a:visited definiert werden.
• Kommentare in CSS werden über diesen Code realisiert: /* Das ist ein Kommentar */ Sie können sich auch über mehrere Zeilen mit Umbrüchen erstrecken. Einen einzeiligen Kommentar der Form // Kommentar gibt es in CSS nicht.

2 Tipps & Tricks

• Unterschied zwischen den Attributen "width" und "max-width":
  • "width" ist wirklich eine feste Breite -> wird das Browser-Fenster verkleinert, wird der Seiteninhalt rechts abgeschnitten
  • "max-width" ist die maximale Breite -> wird das Browser-Fenster kleiner gemacht als die Angabe unter max-width, so wird der Seiteninhalt weiter verkleinert und ist somit noch komplett lesbar
• media-Parameter: kann man zum Beispiel nutzen um fürs Drucken (media="print") andere Styles zu verwenden als auf dem Schirm (media="screen")
• Das Attribut z-index (für Schichtpositionierungen) funktioniert nur bei positionierten Elementen (position:absolute, position:relative, position:fixed).
• Mit dem Attribut "text-shadow" kann man einen Textschatten-Effekt produzieren - zum Beispiel mit dem Code text-shadow: 0 1px 2px #777777;
• Die Standard-Attribute für das body-Tag sind color, background-color, font-size und font-family.
  Beispiel für eine typische Style-Definition für den Body-Bereich:

body {
     color: #5d665b;
     background-color: #e8eae8;
     font-size: 100%;
     font-family: Verdana, Geneva, Arial, sans-serif;
}

• Um einen pre-Bereich nicht über die ganze Seitenbreite zu strecken, sondern der Breite des Elternelements anzupassen: white-space: pre-wrap;
• Wie du eine Website mit CSS zentrierst: [1]
• Klassen- oder ID-Namen dürfen nicht mit Zahlen beginnen, sondern nur mit Buchstaben, Unterstrich oder Bindestrich.

2.1 Positionierung

• Möglichkeiten um Ausgabe unterhalb von floatenden Objekten zu erzwingen (Textumfluss beenden):
  • clear:both
  • Alternative zu CSS: <br clear="all">
• Ein übersichtliches Tutorial über display: flex und die vielfältigen Design-Möglichkeiten mit Flexboxes, findest du hier.
• Um in einem Wrapper (der eine bestimmte Maximalbreite hat) ein div wieder full-width zu machen:

.full-width-innerhalb-wrapper {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

2.2 Textformatierung

• Der Unterschied zwischen den Einheitenem und rem: Die Einheit em bezieht sich immer auf das Elternelement. rem steht für "root em" (CSS 3) und bezieht sich somit immer auf die Schriftgröße des body beziehungsweise html (meistens 16 Pixel). Die Berechnung von endgültigen Schriftgrößen ist mit rem einfacher, weil die Bezugsgröße immer fix ist. Bei em dagegen kann es durch mehrere verschaltete em schwieriger werden, endgültige Schriftgrößen zu bestimmen.

2.3 Pseudo-Elemente

• Um einen Zeilenumbruch innerhalb content: hinzubekommen, baue ein /A ein und nutze white-space: pre;. Beispiel:

#deine-ID::before {
    content: "Hallo \A";
    white-space: pre;
}

• Um ein Leerzeichen innerhalb content: hinzubekommen, nutze diese Code:

#deine-ID::before {
  content: " ";
  white-space: pre;
}

• Um unter Überschriften einen kleinen Strich anzuzeigen, der nicht über die komplette Breite geht:

h2::after {
    content: "";
    display: block;
    width: 70px; 
    padding-top: 20px;
    border-bottom: 1px solid #aaa;
}

2.4 Bilder

• Um ein background-image mit opacity zu versehen, siehe [2].

2.5 Abstände

• Das margin-Attribut kann in einer Kurzform verwendet werden: margin: a b c d. Dabei stehen die Werte a bis d der Reihe nach für die Abstände top, right, bottom und left.
• Wird nur ein Wert hinter margin angegeben, so wird allen 4 Abständen dieser Wert zugewiesen. Beispiel: margin: 200px; erzeugt einen Abstand von 200 Pixeln in alle 4 Richtungen.

3 Sass, SCSS und Less

Sass und Less sind CSS-Präprozessoren, die CSS unter anderem um folgende Funktionen erweitern:

• Variablen
• Verschachtelung
• Mixins
• Mathematische Funktionen

Sass ist ein Akronym und steht für Syntactically Awesome Stylesheets. Bei Sass wird auf Klammern und Semikolons verzichtet. Stattdessen wird einfach mit Einrückungen gearbeitet.

SCSS ist eine andere Syntax für Sass, bei der wiederum mit Klammern und Semikolons gecoded wird. SCSS hat also den Vorteil, dass man sich als CSS-Gewohnter nicht umgewöhnen muss.

In Sass werden Variablen mit einem $-Zeichen dargestellt. Less nutzt für Variable das @-Zeichen.

Ein gute Einführung in Sass findest du hier.

4 Weblinks

• CSS: Best practices
• CSS Infographic: Interesting Facts and History
• campaignmonitor.com/css/ - Infos über den Einsatz von CSS in E-Mails
• css-tricks.com/downloads/css-stuff - Slider, Tabs, Zoomer und vieles mehr in CSS
• emailology.org - List of universally supported CSS & HTML in Email clients
• universalwebservices.net - Modify CSS with JavaScript
• Context dependant selectors in CSS
• css3button.net - Button-Generator mit Hilfe von CSS3

4.1 Tipps & Tricks

• CSS-Rahmen: Unterschied zwischen "outline" und "border"
• Fixed position relativ zu einem anderen Container (nicht zum Browser-Viewport)

Nur ein wahrer Online-Marketer erreicht mehr als 13 von 17 Punkten in unserem Online-Marketing-Quiz »

5 Weiterführendes

• HTML

5.1 Tools

• CSS button library built with Sass & Compass - Vielzahl von schönen Buttons die über CSS erzeugt werden  
• CSS-Validator  
• HTMLPad - Intelligenter HTML-, CSS- und JavaScript-Editor
• Long Shadows Generator - Erzeugt Lange Schatten per CSS  

                 

5.2 Weblinks

• html.com - Große Plattform, auf der du HTML und CSS lernen kannst  

Neuen Link erstellen

Autoren

• Stefan Seidner-Britting (33)
• Christian Herrmann (1)

Jeder Autor hat seine eigenen Passagen zu diesem Artikel beigesteuert. Deshalb muss nicht jeder Autor alle Passagen des Artikels unterstützen.<br />Zahl in Klammern = Anzahl der Artikel-Bearbeitungen dieses Autors. Eine hohe Anzahl bedeutet nicht zwangsweise, dass dieser Autor auch viel Inhalt zum Artikel beigesteuert hat.