CSS — Lesson 2
Selectors & Colors
Targeting elements with selectors and using colors.
Selectors & Colors
Selectors are patterns used to target specific HTML elements. Colors bring your designs to life.
Basic Selectors
/* Element selector */
h1 { color: navy; }
/* Class selector */
.highlight { background: yellow; }
/* ID selector */
#header { height: 80px; }
/* Universal selector */
* { margin: 0; }
Combined Selectors
/* Descendant: all p inside .card */
.card p { ... }
/* Child: direct children only */
.card > p { ... }
/* Adjacent sibling: p immediately after h2 */
h2 + p { ... }
/* Multiple selectors */
h1, h2, h3 { ... }
Colors in CSS
Named Colors
CSS supports 140+ named colors: red, blue, tomato, rebeccapurple, etc.
Hex Colors
A six-digit code starting with #: #ff0000 (red), #00ff00 (green), #0000ff (blue).
RGB / RGBA
.box {
color: rgb(255, 0, 0); /* red */
background: rgba(0, 0, 0, 0.5); /* 50% black */
}
HSL / HSLA
HSL stands for Hue, Saturation, Lightness. Often more intuitive than RGB.
.box {
color: hsl(0, 100%, 50%); /* red */
background: hsla(200, 80%, 50%, 0.3);
}
Background vs Text Color
.card {
color: #333; /* text color */
background-color: #f0f0f0; /* background */
}
Tip: Use online tools like Adobe Color or Coolors to find beautiful color palettes. Stick to 2-3 primary colors for a cohesive design.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →