Internal CSS: Using the style Element in the Head

Internal CSS puts all of a page’s rules in a style element inside <head>.

index.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS</title>
  <style>
    body { font-family: Georgia, serif; background: #fffbf9; }
    h1 { color: #b84624; }
    p { line-height: 1.6; }
  </style>
</head>
<body>
  <h1>Juniper Books</h1>
  <p>Open every day from nine to six.</p>
</body>
</html>

The shape of a rule

style.css

CSS

selector {
  property: value;
  another-property: value;
}

The selector says which elements to style. Each declaration inside the braces sets one property. Here h1 is the selector and color is the property.

When to use it

Internal CSS is handy for a single page that has styles no other page needs, and for small demos like the ones in this course. When several pages share the same styles, use an external stylesheet so you write them once.

warning

Putting style in the body

Place the style element in the head. It may work in the body, but it is not valid for most uses and can cause the page to flash unstyled before it applies.