Inline styles can't do everything
Hover over both buttons. A style attribute has no selector, so it can't say "when hovered". The class version can.
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.