CSS Colors and Units
✅ CSS Colors and Units
🎨 CSS Colors
CSS allows you to define colors in several
formats. Colors are used for text, backgrounds, borders, etc.
🔹 1. Color Names
These are predefined color names like:
color: red;background-color: navy;
🔹 2. Hexadecimal Values
Hex codes represent RGB values in hex format:
color: #ff0000; /* red */background-color: #000080; /* navy */
🔹 3. RGB (Red, Green,
Blue)
Define the intensity of red, green, and blue
(0–255):
color: rgb(255, 0, 0); /* red */
🔹 4. RGBA (with Alpha
Transparency)
The a stands for alpha (transparency):
color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
🔹 5. HSL (Hue,
Saturation, Lightness)
Newer way to define colors:
color: hsl(0, 100%, 50%); /* red */
🔹 6. HSLA (with Alpha)
color: hsla(0, 100%, 50%, 0.5);
📏 CSS Units
Units are used to measure lengths like width,
height, padding, margin, font-size, etc.
🔸 Absolute Units (Fixed
size)
·
px – Pixels
·
cm – Centimeters
·
mm – Millimeters
·
in – Inches
·
pt – Points
·
pc – Picas
font-size: 16px;margin: 2cm;
🔸 Relative Units
(Responsive/Scalable)
·
% – Relative to the
parent element
·
em – Relative to the
font-size of the element
·
rem – Relative to
the root element (usually <html>)
·
vw – Relative to 1%
of the viewport's width
·
vh – Relative to 1%
of the viewport's height
·
vmin / vmax
– Relative to the smaller/larger of viewport’s width/height
width: 80%; /* 80% of parent */font-size: 1.2em; /* 1.2x of parent font size */margin: 5vw; /* 5% of the viewport width */