Im Folgenden findet ihr eine Liste über einige CSS-Eigenschaften mit kurzer Erläuterung.
Die möglichen Werte sind mit | getrennt.
Ändert die Schriftart eines Textes.
font-family: Times New Roman | Roboto | Helvetica | Arial | Georgia | VerdanaÄndert die Schriftgröße eines Textes.
Für das Wort "Zahl" im Beispiel muss eine entsprechende Zahl eingefügt werden. Die Einheit muss ohne Leerzeichen an die Zahl geschrieben werden.
font-size: Zahl px | em | cm | mm | % | ptÄndert das Gewicht eines Textes.
font-weight: normal | bold | bolder | lighterÄndert die Ausrichtung eines Textes.
text-align: left | center | right | justifyLegt fest, ob der Text groß- oder kleingeschrieben werden soll.
text-transform: capitalize | uppercase | lowercaseLegt den Abstand zwischen den Wörtern eines Textes fest.
word-spacing: Zahl px | em | cm | mm | % | ptLegt fest, welche Textfarbe der Text erhalten soll.
color: red | blue | green | #FFFFFF | #E3E3E3 | rgb(52,60,188) | ...Legt fest, ob der Text einen Schatten erhalten soll. Dabei werden drei Zahlenwerte mit den Einheiten px | em | cm | mm | % | pt angegeben und abschließend eine Farbe des Schattens. Die Zahlenwerte stehen in der Reihenfolge für 1. den Horizontalen Versatz des Schattens, 2. den Vertikalen Versatz des Schatten und 3. den Verlaus-Radius des Schattens, z.B.:
text-shadow: 2px 3px 4px black;Legt den Abstand zwischen den Zeilen eines Textes fest.
line-height: Zahl px | em | cm | mm | % | pt | Zahl (ohne Wert)Ändert das Aufzählungssymbol einer Liste.
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | noneLegt fest, ob die zweite Zeile eines Listenelements, auf Höhe des Aufzählungszeichen oder auf Höhe der ersten Textzeile beginnen soll.
list-style-position: inside | outsideLegt ein Bild als Aufzählungssymbol fest.
list-style-image: url(Link zum Bild)Legt fest, ob und wie ein HTML-Element angezeigt werden soll.
display: none | block | inline-block | flexLegt fest, ob ein HTML-Element (z.B. ein Bild) am linken oder rechten Rand ausgerichtet werden soll und der Text entsprechend an der rechten oder an der linken Seite "vorbeifließen" soll.
float: left | right | noneBeendet das Umfließen eines HTML-Elements
clear: both | left | right | noneLegt fest, wie ein HTML-Element auf der Seite positioniert werden soll.
position: static | relative | fixed | absolute | stickyLegt fest, wo das HTML-Element auf der Seite positioniert werden soll.
top: Zahl px | em | cm | mm | % | ptleft: Zahl px | em | cm | mm | % | ptright: Zahl px | em | cm | mm | % | ptbottom: Zahl px | em | cm | mm | % | ptLegt fest, welche HTML-Elemente übergeordnet und welche untergeordnet werden soll. Das heißt, welche HTML-Element über welchem liegt. Das HTML-Element mit dem höheren Wert wird auch über dem anderen HTML-Element positioniert.
z-index: Zahl (OHNE WERT!)Legt fest, welche Farbe der Rahmen erhalten soll.
border-color: red | blue | green | #FFFFFF | #E3E3E3 | rgb(52,60,188) | ...Legt die Dicke des Rahmens fest.
border-width: Zahl px | em | cm | mm | % | ptLegt fest, wie die Linie des Rahmens aussehen sollen (z.B. durchgehende Linie, gepunktete Linie etc.)
border-style: none | dotted | dashed | solid | double | groove | ridgeLegt fest, wie stark die Rundung der Ecken des Rahmens sein soll.
border-radius: Zahl px | em | cm | mm | % | ptMit dieser CSS-Eigenschaft kann die Rahmenfarbe, die Rahmendicke und die Rahmenart gemeinsam festgelegt werden. Dabei werden die einzelnen Eigenschaften mit Leerzeichen getrennt hintereinander aufgeschrieben, z.B.
border: 5px dotted green;Legt fest, welchen Abstand das Element zu anderen Elementen haben soll.
margin-left: Zahl px | em | cm | mm | % | ptmargin-top: Zahl px | em | cm | mm | % | ptmargin-right: Zahl px | em | cm | mm | % | ptmargin-bottom: Zahl px | em | cm | mm | % | ptDie vier Werte kann man in einem Ausdruck kombinieren, indem man nur margin schreibt und anschließend wie Zahlenwerte angibt. Die Reihenfolge ist wie folgt: Oben, Rechts, Unten, Links, z.B.
margin: 10px 0px 5px 10px;Möglich ist auch, dass nur 2 Werte anzugeben. Der erste Wert steht dann jeweils über Oben und Unten, der zweite für Links und Rechts, z.B.
margin: 10px 5px;(Ist gleich wie: margin: 10px 5px 10px 5px;)Legt fest, welchen Abstand der Text in einem Element zum Rand haben soll.
padding-left: Zahl px | em | cm | mm | % | ptpadding-top: Zahl px | em | cm | mm | % | ptpadding-right: Zahl px | em | cm | mm | % | ptpadding-bottom: Zahl px | em | cm | mm | % | ptDie vier Werte kann man in einem Ausdruck kombinieren, indem man nur margin schreibt und anschließend wie Zahlenwerte angibt. Die Reihenfolge ist wie folgt: Oben, Rechts, Unten, Links, z.B.
padding: 10px 0px 5px 10px;Möglich ist auch, dass nur 2 Werte anzugeben. Der erste Wert steht dann jeweils über Oben und Unten, der zweite für Links und Rechts, z.B.
padding: 10px 5px;(Ist gleich wie: padding: 10px 5px 10px 5px;)Legt die Breite eines HTML-Elements fest.
width: Zahl px | em | cm | mm | % | pt | autoLegt die Höhe eines HTML-Elements fest.
height: Zahl px | em | cm | mm | % | pt | autoLegt die Hintergrundfarbe eines HTML-Elements fest.
background-color: red | blue | green | #FFFFFF | #E3E3E3 | rgb(52,60,188) | ...Legt ein Hintergrundbild fest.
background-image: url(Link zum Bild)Legt fest, ob der Hintergrund beim scrollen der Seite "mitläuft" oder stehen bleibt.
background-attachment: scroll | fixedLegt fest, wo der Hintergrund stehen soll. Zum Beispiel könnte ein Bild einen Abstand zum oberen Rand erhalten.
background-position: Zahl px | em | cm | mm | % | pt | auto | top | center | bottomWird nur eine Zahl geschrieben, wird der Wert auf alle vier Seiten angeglichen. Bei vier Werten gelten die Werte in der Reihenfolge Oben, Rechts, Unten, Links. Bei zwei Werten gelten die Werte in der Reihenfolge Oben/Unten und Rechts/Links.
Legt fest, ob der Hintergrund wiederholt werden soll, wenn er an einer Seite zu Ende ist. Zum Beispiel könnte das Hintergrundbild kleiner sein, als der Bildschirm. Dann wird das Hintergrundbild einfach kopiert und nochmals daneben gestellt.
background-repeat: repeat | repeat-x | repeat-y | no-repeatLegt fest, wie durchsichtig ein Element sein soll.
opacity: ZahlBei Opacity wird zwischen AN und AUS unterschieden, angegeben mit den Ziffern 1 und 0. Bei der Zahl 1 ist das Element voll sichtbar. Bei 0 ist das Element unsichtbar. Die Abstufungen dazwischen (z.B. 0.5) bestimmt die Transparenz.
Beachte: Kommazahlen immer mit Punkt angeben!