Click a selector type

Live Preview — Mini Page

Welcome to My Site

This div has class="card"

A regular paragraph element.

This div has id="hero" — unique!

Another .card — same class, same style!

Button

💡 .class styles all matching elements — #id targets exactly one.

Specificity Duel — which CSS rule wins?

ID = 100 pts Class = 10 pts Element = 1 pt Universal = 0 pts

Score: 0 / 5

Round 1 of 5

Which rule wins?

0/5

CSS Color Formats — same color, three ways

Pick any color and watch the hex, RGB, and named formats all update together. In CSS, all three can describe the exact same color.

Quick colors:

Background Color

hex#0072ce

rgbrgb(0, 114, 206)

Text Color

hex#ffffff

rgbrgb(255, 255, 255)

Hello, World! 🎨

Color key: Margin Border Padding Content

Drag the layers

Margin 20px

Space outside the border — transparent, shows background

Border 4px

The visible line around the element

Padding 16px

Space inside the border — takes the element's background color

text-align (content)

Margin

20px each side

Border

4px solid

Padding

16px each side

Total width

168px

Live element — colors show each layer

Page background

margin: 20px

border: 4px

padding: 16px

content

Hello! 👋

          total width =
          20+
          4+
          16+
          88+
          16+
          4+
          20
          =
          168px
        

Container Properties

flex-direction

justify-content (main axis)

align-items (cross axis)

flex-wrap

Flex Container — live

Item 1

Item 2

Item 3

Item 4

Media Queries — drag to simulate screen width

📱 🖥️ 720px

📱 Mobile < 480px

📟 Tablet 480–768px

🖥️ Desktop > 768px

MySite

HomeAboutContact

Card One

Layout adapts automatically.

Card Two

Content wraps on mobile.

Card Three

Responsive by design!

CSS Animations — @keyframes

✦

CSS Transitions — hover each box

Same hover effect — completely different feel depending on the transition property.

No transition

No transition
transition: none

0.4s ease

Smooth (0.4s)
transition: all 0.4s ease

1.3s ease-in-out

Slow (1.3s)
transition: all 1.3s ease-in-out

💡 Animation runs on its own via @keyframes. Transition only activates when a property changes (like on hover).

Question 1 / 5

Which selector targets every single element on the page?

Question 2 / 5

What does "Cascading" mean when two CSS rules conflict?

Question 3 / 5

How do you write a class selector in CSS?

.menu { color: red; }

Question 4 / 5

In the CSS Box Model, which layer is OUTSIDE the border?

Question 5 / 5

Which CSS property changes the text color of an element?

0/5