CSS Colors Units

CSS Colors

CSS provides several ways to define colors for text, backgrounds, borders, etc.

Common Color Formats

1. Named Colors

• Predefined names. color: red; background-color: yellow;

2. Hexadecimal Colors (#RRGGBB)

• Uses hex codes. color: #00ff00; /* green */

3. RGB (Red, Green, Blue)

• Define each component using a value from 0 to 255. color: rgb(255, 0, 0); /* red */

4. RGBA (RGB + Alpha)

• Adds transparency (alpha ranges from 0 to 1). color: rgba(0, 0, 0, 0.5); /* semi-transparent black */

5. HSL (Hue, Saturation, Lightness)

color: hsl(240, 100%, 50%); /* blue */

6. HSLA (HSL + Alpha)

color: hsla(120, 100%, 50%, 0.3); /* semi-transparent green */

CSS Units

CSS uses units to define the size of elements like fonts, padding, margins, width, and height.

Absolute Units

px (pixels): Fixed unit, doesn’t scale. font-size: 16px;

Relative Units

1. em

• Relative to the font size of the parent. padding: 2em; /* 2x the parent font size */

2. rem

• Relative to the root (html) font size. font-size: 1.5rem; /* 1.5x root size */

3.% (percent)

• Relative to the parent element’s size. width: 50%; /* Half the parent’s width */

4. vw (viewport width)

• 1vw = 1% of the browser’s width. width: 100vw; /* Full screen width */

5. vh (viewport height)

• 1vh = 1% of the browser’s height. height: 100vh; /* Full screen height */