Who wins: order and inline styles
The <link> comes after the <style>, so its equally specific h1 rule wins. Swap the two lines in the head and run again: now orange wins.
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
first h1: rgb(70, 130, 180)
second h1: rgb(0, 128, 0)