Using an internal style sheet

To style a page using an internal style sheet, a style element is used inside the head elementAn element that gives information about the page.. The tag nameThe characters used in a tag for a particular element. for a style element is, not surprisingly, the word style. Inside the element is a list of rules.

Each rule consists of a selector that specifies one or more parts of the documentInformation in HTML. and one or more declarationsA specification of style as property:value.. Here is a rule that styles all paragraphs:

p {
   color: green;
   font-style: italic;
}

Here is a style attribute for comparison:

<p style="color:green; font-style:italic"></p>

Notice how the internal style sheet differs from the style attribute:

  • A rule can apply to more than one element.
  • Each declaration appears on a separate line.
  • Values are not put in quotation marks.
  • There is a semicolon after every declaration, including the last one.

Guess the result before clicking the Load page button.

Glimpse of the future

Later we'll consider more complicated selectors and how to resolve conflicts among multiple rulesA selector followed by one or more declarations. applied to the same element.

Note:

Hints:

  • undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX