HTML: The Style Tag

0
709
HTML style tag

The <style> tag defines a way to include styling information in a HTML document.

There are several ways to style a HTML document – inline, style tag, and link reference through a stylesheet. Here we look into using the style tag in how to make your document look unique. CSS is a technology that accompanies HTML. You need to understand Cascading Style Sheets (CSS) if you are to use this correctly.

The <style> tag has several attributes:

  • type – the type of MIME resource (default is text/css)
  • media – the media to have the styles applied to (default is all)

Media devices that can be specified include:

  • all
  • braille
  • print
  • projection
  • screen
  • speech

This tag must only be used between the <head> tag. It no longer can be used anywhere in the <body> and will not validate even though browsers today support this.

Example <style> Tag Use

<!DOCTYPE html>
<html>
<head>
  <title>Style Tag Example</title>
  <style>
    p {
      font-size: 16px;
    }
  </style>
  <style type="text/css">
    h1 {
      font-size: 48px;
      color: red;
    }
  </style>
</head>
<body>
  <h1>This Should Be Red</h1>
  <p>The style tag contains CSS rules for styling a HTML document.</p>
</body>
</html>

Of Interest