Submodule 3.2: Inserting CSS

Internal Style Sheet

Internal styles are defined in the <head> area of the HTML document inside the <style> tag.

Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
    <style>
      h2 {
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
      }
      h4 {
        font-family: "Verdana", Sans-serif;
        font-variant: small-caps;
      }
      p {
        font-family: "Lucida", Monospace;
        font-size: 1.1em;
      }
    </style>
  </head>
  <body>
    <h2>This is a Heading 2</h2>
    <h4>This is a Heading 4</h4>
    <p>This is lorem ipsum paragraph: <br>
      Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea. <br>
      Ne omnesque detraxit eam, cu qui movet affert volutpat. <br>
      Qui amet option eu. Utamur euismod hendrerit vel no, ius natum salutatus forensibus in. <br>
      Sea diceret vivendo constituam at, duo an adhuc viderer evertitur.
    </p>
  </body>
</html>

will create a page displayed as:

Internal stylesheet

Internal style sheet can be used when we have only one HTML page or when we have multiple HTML pages but we want special rules for the specific HTML page.

For more information about styling fonts: https://www.w3schools.com/css/css_font.asp