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

Shape without losing meaning

The ideas workshop already has content. Now consider how people read it and find their way.

Learning paths10 min

Let's discover together

  1. 1

    HTML organizes content; CSS describes presentation. Browsers already have default styles, so a page without your CSS is not empty. An h1 remains a heading when its color changes.

  2. 2

    In .sample { color: #15364c; }, .sample is the selector, color the property and #15364c its value. Declarations go between braces and are separated by semicolons. An unknown property is normally ignored by the browser.

  3. 3

    This project keeps HTML and CSS in one file: edit <style id="lesson-css"> in the file workspace. An external sheet is also possible with <link rel="stylesheet" href="style.css">; both files then need to be kept together.

  4. 4

    Change .sample’s color and update the preview. The workshop applies the CSS block to the supplied HTML; check HTML changes in the downloaded file. The preview accepts the taught CSS subset without external resources.

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

Locate a CSS rule and observe its effect while preserving semantic HTML.

Now it's your turn

Discovery workshop

Predict, change, compare

The rule is .sample { color: #15364c; }. The text has class="sample".
Build your answers and check when you are ready.
A moment to understand

Does changing h1 color change its semantic role?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

Take it with you

Change one declaration at a time and record prediction and result. Download the edited HTML, open it in a browser, save another change and reload.

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.