Page 1 of 16
CSS selectors explained
CSS selectors into your brain forever, grade-5 style.
Alright — let's lock
Think of a CSS selector as a way to point your finger at something on a web page and say:
"Hey, you! I'm going to style you."
🧠 The Core Idea
HTML = the stuff on your page (like text, buttons, pictures).
CSS selectors = the labels or directions telling CSS which stuff to decorate.
🎯 The Main Types of CSS Selectors
1. Type Selector (a.k.a. element selector)
Points to all things of a certain kind.
css
p{
color: blue;
}
💡 "Hey, all <p> paragraphs, be blue."
2. Class Selector
Points to things wearing a certain class name.
css
.orange {
color: orange;
}
💡 "Anyone wearing the .orange badge, turn orange."
HTML:
html
<p class="orange">I'm orange text</p>
3. ID Selector
Points to the one and only thing with that ID.
Page 2 of 16
css
#bigTitle {
font-size: 50px;
}
💡 "You, with ID bigTitle , be super big."
4. Universal Selector
Points to everything.
css
*{
font-family: Arial;
}
💡 "Everyone, wear Arial clothes."
5. Group Selector
Style multiple things the same way.
css
h1, h2, p {
color: red;
}
💡 "H1s, H2s, and paragraphs—turn red together."
6. Descendant Selector
Points to something inside something else.
css
div p {
color: green;
}
💡 "If a paragraph lives inside a div, make it green."
7. Child Selector ( > )
Points to a direct child only.
css
Page 3 of 16
div > p {
color: purple;
}
💡 "Only the paragraphs that are directly inside a div get purple."
8. Adjacent Sibling Selector ( + )
Points to the thing right after another thing.
css
h1 + p {
color: pink;
}
💡 "If a paragraph is right after an H1, make it pink."
9. Attribute Selector
Points to stuff with certain HTML attributes.
css
input[type="text"] {
border: 2px solid blue;
}
💡 "Any <input> with type text —give it a blue border."
10. Pseudo-classes (state-based styling)
css
a:hover {
color: red;
}
💡 "When your mouse hovers over a link, turn it red."
11. Pseudo-elements (style part of an element)
css
p::first-letter {
font-size: 200%;
}
💡 "Make the first letter of every paragraph huge."
Page 4 of 16
🪄 My "Never Forget" Trick
Imagine the web page as a big school:
Type selector → "All students named 'Paragraph' come here."
Class selector → "Everyone in Class Orange, line up."
ID selector → "You, Student #bigTitle, come here."
Universal → "All students in the school—listen up!"
Descendant → "Only students inside this specific classroom."
Child → "Only kids whose parent is the teacher I'm talking about."
Adjacent sibling → "The student sitting right next to this other student."
Attribute → "Everyone wearing glasses (attribute), come here."
Pseudo-classes → "Only when you're doing something special (hover, clicked, etc.)."
Pseudo-elements → "I'm only talking to your first letter or part of you."
If you want, I can give you a one-page colorful "CSS Selector Map" so it's stuck in your head
like a video game cheat sheet. That way you'll never forget.
Do you want me to make that for you?
Alright — CSS colors time! 🎨
Think of colors in CSS like paint you can splash on any HTML element.
🎯 1. Color Names (The Simple Way)
CSS already knows 140 named colors — you just type their names.
css
p{
color: red;
background-color: lightblue;
}
💡 Examples: red , blue , green , yellow , purple , orange , black , white , pink , gray , gold ,
tomato .
🎯 2. HEX Codes (The Secret Code)
A HEX code is a # followed by 6 letters/numbers.
It's like a secret recipe for mixing red, green, and blue.
css
Page 5 of 16
p{
color: #ff0000; /* red */
background-color: #00ff00; /* green */
}
💡 Format: #RRGGBB
RR = Red amount (00 to FF)
GG = Green amount (00 to FF)
BB = Blue amount (00 to FF)
Example:
#000000 → black
#ffffff → white
#ff5733 → reddish orange
🎯 3. RGB (Red, Green, Blue)
Uses numbers (0–255) for each color part.
css
p{
color: rgb(255, 0, 0); /* red */
}
💡 rgb(255, 255, 255) = white
rgb(0, 0, 0) = black
🎯 4. RGBA (RGB + Transparency)
Same as RGB, but with an alpha value for transparency (0 = invisible, 1 = solid).
css
p{
color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
}
🎯 5. HSL (Hue, Saturation, Lightness)
This one feels like an art class:
Hue → color type (0–360 degrees on a color wheel)
Saturation → how colorful (0% = gray, 100% = full color)
Lightness → how light/dark (0% = black, 50% = normal, 100% = white)
css
Page 6 of 16
p{
color: hsl(0, 100%, 50%); /* pure red */
}
🎯 6. HSLA (HSL + Transparency)
css
p{
color: hsla(200, 100%, 50%, 0.3);
}
💡 This is a semi-transparent bright blue.
🪄 "Never Forget" Color Trick
Think of CSS colors like ordering juice:
Name → "I'll have Orange, please."
HEX → "I'll have recipe #FF9900."
RGB → "Mix 255 red, 153 green, 0 blue."
RGBA → "Same mix, but 50% see-through."
HSL → "I want hue 30°, 100% colorful, 50% light."
If you want, I can make you a one-page CSS Colors cheat sheet with all color names + codes,
so you can pick colors like an artist with a magic paint bucket.
Want me to prepare that?
Got it — you want the predefined colors in CSS (the ones with actual names you can just
type).
CSS knows 140 named colors — no need for HEX or RGB codes. Here's the full list, grouped so
your brain doesn't melt. 🧠✨
🎨 Basic Colors
nginx
black
white
gray
silver
red
Page 7 of 16
maroon
yellow
olive
lime
green
aqua
teal
blue
navy
fuchsia
purple
🌸 Pinks
nginx
pink
lightpink
hotpink
deeppink
palevioletred
mediumvioletred
🔥 Reds & Oranges
nginx
lightsalmon
salmon
darksalmon
lightcoral
indianred
crimson
firebrick
darkred
orangered
tomato
coral
darkorange
orange
🍋 Yellows
nginx
Page 8 of 16
gold
yellow
lightyellow
lemonchiffon
lightgoldenrodyellow
papayawhip
moccasin
peachpuff
palegoldenrod
khaki
darkkhaki
🍃 Greens
nginx
greenyellow
chartreuse
lawngreen
lime
limegreen
palegreen
lightgreen
mediumspringgreen
springgreen
mediumseagreen
seagreen
forestgreen
green
darkgreen
yellowgreen
olivedrab
darkolivegreen
mediumaquamarine
darkseagreen
lightseagreen
🌊 Cyans & Blues
nginx
aqua
cyan
lightcyan
paleturquoise
aquamarine
turquoise
Page 9 of 16
mediumturquoise
darkturquoise
cadetblue
steelblue
lightsteelblue
powderblue
lightblue
skyblue
lightskyblue
deepskyblue
dodgerblue
cornflowerblue
royalblue
blue
mediumblue
darkblue
navy
midnightblue
💜 Purples
rust
lavender
thistle
plum
violet
orchid
fuchsia
magenta
mediumorchid
mediumpurple
blueviolet
darkviolet
darkorchid
darkmagenta
purple
indigo
slateblue
darkslateblue
mediumslateblue
🪵 Browns
arduino
cornsilk
blanchedalmond
Page 10 of 16
bisque
navajowhite
wheat
burlywood
tan
rosybrown
sandybrown
goldenrod
darkgoldenrod
peru
chocolate
saddlebrown
sienna
brown
☁️ Grays
nginx
gainsboro
lightgray
silver
darkgray
gray
dimgray
lightslategray
slategray
darkslategray
black
☀️ Specials
nginx
aliceblue
antiquewhite
azure
beige
floralwhite
ghostwhite
honeydew
ivory
lavenderblush
linen
mintcream
mistyrose
oldlace
seashell
Page 11 of 16
snow
whitesmoke
💡 How to use them:
css
h1 {
color: tomato;
background-color: lightyellow;
}
If you want, I can make you a color chart image with all 140 CSS colors + their codes so you
can visually pick colors like a paint store catalog. That way you'll never have to guess.
Alright — you've seen predefined CSS colors (the named ones).
Now let's talk about customizing colors so you can make any color in the universe, not just
the ones CSS already named. 🌈✨
🎯 Ways to Customize Colors in CSS
1️⃣ HEX Codes (Secret Color Recipes)
Format: #RRGGBB (RR = red, GG = green, BB = blue)
Values: 00 (0) → FF (255) in hex numbers.
css
p{
color: #ff5733; /* reddish orange */
}
💡 You can also use 3-digit HEX like #f53 → becomes #ff5533 .
2️⃣ RGB (Red, Green, Blue)
Format: rgb(red, green, blue)
Values: 0–255 for each.
css
p{
color: rgb(255, 87, 51); /* same as #ff5733 */
}
Page 12 of 16
3️⃣ RGBA (RGB + Transparency)
Last number is alpha (0 = transparent, 1 = solid).
css
p{
background-color: rgba(255, 87, 51, 0.5); /* semi-transparent */
}
4️⃣ HSL (Hue, Saturation, Lightness)
Hue: 0–360 (position on the color wheel)
Saturation: 0% (gray) → 100% (full color)
Lightness: 0% (black) → 50% (normal) → 100% (white)
css
p{
color: hsl(14, 100%, 60%); /* orange-ish */
}
5️⃣ HSLA (HSL + Transparency)
css
p{
color: hsla(14, 100%, 60%, 0.5);
}
6️⃣ CSS Variables for Colors
You can create your own reusable color names.
css
:root {
--main-color: #ff5733;
--bg-color: hsl(200, 100%, 90%);
}
p{
color: var(--main-color);
background-color: var(--bg-color);
}
💡 Change the variable in one place, and the whole site updates.
7️⃣ Gradients (Smooth Color Blends)
Page 13 of 16
css
div {
background: linear-gradient(to right, red, yellow);
}
💡 You can blend any custom colors in gradients — HEX, RGB, HSL, or named.
8️⃣ Opacity vs RGBA/HSLA
You can make everything inside an element transparent:
css
div {
opacity: 0.5; /* affects text, images, etc. */
}
💡 Use rgba() or hsla() if you only want the background transparent, not the text.
I can make you a "CSS Custom Color Cheat Sheet" that shows all these methods with side-
by-side examples so you can instantly mix your own colors like a pro artist.
Do you want me to prepare that next?
Alright — let's break down CSS backgrounds and borders so simply a 5th grader could style
their own Pokémon card. 🎨🖌️
🎯 CSS Backgrounds
1️⃣ Background Color
css
div {
background-color: lightblue;
}
💡 Fills the box with a solid color.
2️⃣ Background Image
css
Page 14 of 16
div {
background-image: url("[Link]");
}
💡 Puts a picture behind the content.
3️⃣ Background Repeat
css
div {
background-repeat: no-repeat;
}
Options:
repeat (default) → repeats both directions
repeat-x → repeats horizontally
repeat-y → repeats vertically
no-repeat → shows only once
4️⃣ Background Size
css
div {
background-size: cover;
}
Options:
auto → keeps original size
cover → fills the whole box (may crop)
contain → fits fully inside (may leave space)
or custom like 100px 200px
5️⃣ Background Position
css
div {
background-position: center top;
}
💡 Places the background (like moving a poster on a wall).
6️⃣ Background Attachment
Page 15 of 16
css
div {
background-attachment: fixed;
}
Options:
scroll → moves with the page
fixed → stays still when scrolling
7️⃣ Shorthand (1 Line for All)
css
div {
background: lightblue url("[Link]") no-repeat center/cover;
}
🎯 CSS Borders
1️⃣ Border Style
css
div {
border-style: solid;
}
Options: solid , dashed , dotted , double , groove , ridge , inset , outset , none
2️⃣ Border Width
css
div {
border-width: 3px;
}
💡 Can be thin , medium , thick , or a number ( px , em , etc.).
3️⃣ Border Color
css
div {
border-color: red;
}
Page 16 of 16
4️⃣ Border Shorthand
css
div {
border: 3px solid red;
}
5️⃣ Individual Sides
css
div {
border-top: 5px dashed blue;
border-bottom: 2px solid green;
}
6️⃣ Rounded Corners
css
div {
border-radius: 15px;
}
💡 border-radius: 50%; → makes circles.
7️⃣ Border Images (Fancy Stuff)
css
div {
border: 20px solid transparent;
border-image: url([Link]) 30 round;
}
💡 Lets you use an image as the border.
If you want, I can make you a side-by-side illustrated chart of all background and border
styles so you can instantly see how each looks — like a visual menu for designing web pages.
Do you want me to make that?