CSS Basics

Colors in CSS

CSS allows you to add colors to text, backgrounds, borders, and other elements using various color formats.

Where You Can Use Colors:

• color – Sets the text color.
• background-color – Sets the background color.
• border-color – Sets the border color.

Ways to Define Colors:

• Color Names: Simple names like red, blue, green.
• Hex Codes: Example: #ff0000 (red), #00ff00 (green).
• RGB: Example: rgb(255, 0, 0) (red).
• RGBA: Like RGB but with transparency. Example: rgba(0, 0, 0, 0.5).
• HSL: Hue, Saturation, Lightness. Example: hsl(120, 100%, 50%).
• HSLA: HSL with alpha (transparency). Example: hsla(240, 100%, 50%, 0.3).

Example:

h1 {
  color: #0066cc;
  background-color: #f0f0f0;
}

p {
  color: rgba(0, 0, 0, 0.7);
}

Tip:

Use tools or color pickers to choose colors that match your design. Also consider accessibility—make sure text contrasts well with the background.

1. Color Values

a. Named Colors

body { color: red; }

Copy Code

b. Hexadecimal

body { color: #ff5733; }

Copy Code

c. RGB

body { color: rgb(255, 87, 51); }

Copy Code

d. RGBA

body { color: rgba(255, 87, 51, 0.5); }

Copy Code

e. HSL

body { color: hsl(9, 100%, 60%); }

Copy Code

f. HSLA

body { color: hsla(9, 100%, 60%, 0.5); }

Copy Code

2. Background Properties

a. background-color

div { background-color: lightblue; }

Copy Code

b. background-image

div { background-image: url('image.jpg'); }

Copy Code

c. background-repeat

div { background-image: url('image.jpg'); background-repeat: no-repeat; }

Copy Code

d. background-position

div { background-image: url('image.jpg'); background-position: center; }

Copy Code

e. background-size

div { background-image: url('image.jpg'); background-size: cover; }

Copy Code

3. Opacity and Transparency

div { opacity: 0.5; background-color: red; }

Copy Code

div { background-color: rgba(255, 0, 0, 0.5); }

Copy Code