CSS: Colors & Units

CSS Colors

CSS allows you to define colors using various formats:

• Named Colors: e.g., red, blue, green.
• Hexadecimal: e.g., #ff0000, #00ff00, #0000ff.
• RGB: e.g., rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255).
• RGBA: Adds transparency, e.g., rgba(255, 0, 0, 0.5).
• HSL: e.g., hsl(0, 100%, 50%).
• HSLA: Adds transparency, e.g., hsla(0, 100%, 50%, 0.5).

/* Example */
body {
    background-color: #f0f0f0;
    color: rgb(0, 0, 0);
}
        

CSS Units

CSS uses various units to define sizes, spacing, and more:

• Absolute Units: Fixed sizes, e.g., px, cm, mm, in.
• Relative Units: Relative to other elements, e.g., em, rem, %, vw, vh.

/* Example */
h1 {
    font-size: 2em; /* Relative to parent element */
    margin: 10px;  /* Absolute unit */
}
        

Practice

Try experimenting with different color formats and units:

• Set the background color of a div using rgba.
• Use vw and vh to create a responsive layout.

Continue Learning

• Next: CSS Box Model