CSS bietet verschiedene Möglichkeiten, Elemente farblich zu gestalten. Farben können mit Namen, Hexadezimalwerten oder RGB/RGBA-Werten angegeben werden.
In CSS werden Grössen mit verschiedenen Einheiten angegeben: px für Pixel, % für relative Werte, em/rem für Schriftgrösse, vh/vw für Prozentwerte der Viewport-Höhe/-Breite.
div {
width: 50%; /* 50% der übergeordneten Breite */
height: 10vh; /* 10% der Fensterhöhe */
padding: 1em; /* 1-mal Schriftgrösse */
}
border-radius
Mit border-radius können Ecken von Boxen abgerundet werden. Werte können in px oder Prozent angegeben werden.
div {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 10px; /* Abrundung der Ecken */
}
box-shadow
box-shadow erzeugt Schatten um Elemente. Man kann Versatz, Unschärfe, Ausbreitung und Farbe festlegen.