Open original
Info
Demo 2.1

Adding CSS to a file using the <style> element

HTML gives a page its content. CSS gives it a look. There are three ways to attach CSS to a page, and this is the middle one.

<style>
	h1 {
		color: crimson;
	}
</style>

Everything inside <style> is CSS, and it applies to the whole page. On a real site it belongs in the <head>.

The other two ways

  • A separate .css file, linked with <link rel="stylesheet" href="style.css">. This is what you want for anything real ~ one file of styles, shared by every page.
  • Inline styles, written directly on an element with style="". There’s a whole demo on those later, and a warning attached.

Anatomy of a rule

h1 { color: crimson; }

h1 is the selector ~ which elements this applies to. Inside the braces is a declaration: a property, a colon, a value, and a semicolon.

I use <style> for quick tests and demos like this one. For an actual website, use a separate file.

Next demoCSS classes
Keyboard Shortcuts
⌘ Z / ⌘ ⇧ ZCtrl Z / Ctrl ⇧ Z Undo / redo
Tab / ⇧ TabTab / ⇧ Tab Indent / unindent selection
⌘ ] / ⌘ [Ctrl ] / Ctrl [ Indent / unindent lines
⌘ ACtrl A Select all
⌘ DCtrl D Select next occurrence of selection
⌘ /Ctrl / Comment / uncomment lines
Ctrl SpaceCtrl Space Autocomplete
Ctrl EnterCtrl Enter Reset layout
⌘ ⌥ [ / ⌘ ⌥ ]Ctrl ⇧ [ / Ctrl ⇧ ] Fold / unfold block
Code
The editor didn't load — try refreshing the page. Navigation, shortcuts and the info panel still work in the meantime.
Preview
Dimensions0 × 0
Delay
Console
›