All three ways on one page
The preview can't load other files, so the <link> uses a data: URL that contains the CSS text itself. It behaves exactly like a separate file.
CSS can go in a style attribute on one element, in a <style> element in the page, or in a separate .css file linked with <link rel="stylesheet">; external files are the normal choice, and when they conflict, inline styles beat rules, and between rules the more specific, then the later, wins.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the <head> of a page titled Shop that links two stylesheets, css/reset.css and css/theme.css, in the order where the theme can override the reset.
Rewrite this inline style as a class in a <style> element: <p style="color: gray; font-style: italic">Note</p>.
A page has <style>h2 { color: red; }</style> and then <h2 style="color: blue">. What colour is the heading, and why?
Explain it without notes
What are the three ways to add CSS to a page, and when would you use each?
A paragraph matches p { color: blue; } in a linked file and p { color: red; } in a <style> element. Which colour wins?
Why do professional sites use external stylesheets instead of inline styles?
Why is @import slower than <link>?
Preview
Console
Nothing logged yet.Expected console output
rgb(46, 139, 87)
rgb(102, 51, 153)
rgb(220, 20, 60)
Stylesheets on this page: 2