Rullst AcademyRullst Academy/Lesson
CSS and interface design · Lesson 02 / 12

Select without changing everything

Highlight the cards without changing every paragraph on the page.

Learning paths12 min

Let's discover together

  1. 1

    p selects paragraphs; .card selects elements with the card class; #programa selects the programa id. Classes are reusable; an id should identify a unique element in the document.

  2. 2

    An element can have class="card featured" and receive rules from both classes. .card p selects paragraphs descending from a card; .card > h3 requires a direct child. Spaces and symbols are part of the rule.

  3. 3

    A comma-separated list, h1, h2, selects both types. Prefer classes describing a component, such as card, over appearance-dependent names such as green-text. Appearance can change without changing purpose.

  4. 4

    Change .card p to p in the example and compare affected text. Then restore it. If nothing changes, check the HTML class and selector before adding stronger rules.

Workshop: one interface, different spaces

Edit <style id="lesson-css"> in “My files and GitHub”. The preview applies that CSS to the supplied HTML structure; check HTML edits in the downloaded file. External resources and CSS outside the study subset are not accepted here.

Go to my code

Measurements describe this preview; they do not guarantee every size or complete accessibility. Test long content, zoom, keyboard and assistive technologies in the local project.

Two-color contrast lab

Approximate ratio ·

Calculation only for two opaque sRGB colors selected here; it does not read your page. The threshold uses the unrounded ratio. It does not assess transparency, gradients, images, states or complete conformance.

Official links and next step

✦
YOUR MISSION

Use element, class and simple relationship selectors.

Now it's your turn

Discovery workshop

Predict, change, compare

Some paragraphs are inside .card and a .sample paragraph is outside the cards.
Build your answers and check when you are ready.
A moment to understand

Must a class name state the current color?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

Take it with you

Highlight only the first card using its featured class. Explain why the rest stayed unchanged.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.