Your First Styles

Applying CSS to HTML

CSS (Cascading Style Sheets) adds visual styles to HTML. You can embed CSS directly in HTML using a <style> tag in the <head>:

<style>
  h1 {
    color: blue;
    font-size: 2em;
  }
  p {
    color: gray;
  }
</style>
<h1>Hello</h1>
<p>World</p>

A CSS rule has:

Selector — what to style (h1, p, .class, #id)
Declaration block — { property: value; }

Inheritance: Some CSS properties (like color, font-family, line-height) are inherited by child elements automatically. Others (like border, padding, margin) are not. This means if you set color: navy on body, all text inside inherits that color unless overridden.

CSS Variables (Custom Properties): You can define reusable values with -- prefix:

:root { --primary: #2563eb; --gap: 1rem; }
h1   { color: var(--primary); margin-bottom: var(--gap); }

Common properties:

color — text color
font-size — text size
background-color — background fill
margin — outer spacing
padding — inner spacing

Your Task

Style an <h1> with a color and font-size, and a <p> with a different color.

← Previous Next →

CSS preview loading...

Click "Run" to execute your code.