Forum digitalis

2.4 Colour and colour effects

Colors

CSS offers various ways to style elements with color. Colors can be specified using names, hexadecimal values, or RGB/RGBA values.

p { color: red; /* color name */ background-color: #00ff00; /* hexadecimal */ border-color: rgb(0,0,255); /* RGB */ opacity: 0.8; /* transparency */ }

Units

In CSS, sizes can be specified using different units: px for pixels, % for relative values, em/rem for font size, vh/vw for viewport height/width percentages.

div { width: 50%; /* 50% of parent width */ height: 10vh; /* 10% of viewport height */ padding: 1em; /* 1 times font size */ }

border-radius

border-radius allows you to round the corners of boxes. Values can be specified in px or percentages.

div { width: 100px; height: 100px; background-color: blue; border-radius: 10px; /* rounding corners */ }

box-shadow

box-shadow creates shadows around elements. You can specify offset, blur, spread, and color.

div { width: 100px; height: 100px; background-color: red; box-shadow: 5px 5px 10px gray; /* x-offset, y-offset, blur, color */ }

opacity

The opacity property controls the transparency of an element. 1 = fully opaque, 0 = completely transparent.

div { background-color: green; opacity: 0.5; /* semi-transparent */ }

Colors

Units

border-radius

box-shadow

opacity