CSS is for design

├─ index.html
└─ style.css

The page from the last demo had all the right content, but it looked pretty plain. CSS (Cascading Style Sheets) is the language that makes a page look good.

Adding CSS to a page

In this demo, CSS lives inside a <style> element at the top of the code. We can also put our CSS inside a separate file. All demos on Demoland are a single file, though, so you’ll be seeing the <style> element a bunch.

Applying CSS to elements

Here’s how we style elements:

1. 1Choose a selector to target specific elements.
2. 2Define a property of the element’s design that you want to change.
3. 3Give that property a value.

Property-value pairs use the formatting property: value;. Try changing some of the values in this demo and see how the preview updates!