Submodule 3.2: Inserting CSS

External style sheet

An external style sheet is a separate file which is saved with the .css extension. It can be produced with the same editor that is used for html.

An external style sheet can be used for multiple html pages.

In order for the styles to be applied to the html elements, we should reference our style sheet inside the <link> element which will be placed in the head area of the html document.

The syntax used is:

<link rel="stylesheet" type="text/css" href="css/mystyle.css">

<link rel="stylesheet" type="text/css" href="https://example.com/css/thestyle.css">

The rel attribute specifies the relationship between the current and linked document. The rel with value "stylesheet" informs the current page that it should import a style sheet.

The type attribute specifies the Internet media type. The type attribute with value ="text/css" defines that the content of the document would be CSS.

The href contains the url at which our css file can be found.

Note

It is good practice to save the .css file in a separate folder named css.

Example

This is a simple HTML file:

Just HTML

We insert in this HTML file an external style sheet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
      <!-- This is an external style sheet-->
      <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/Core/Swiss">
  </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>
    </p>
    <ul>
        <li>The first list item</li>
        <li>The second list item </li>
        <li>The third list item!</li>
    </ul> 
    <a href="https://www.w3schools.com/ target="_blank"">This a link</a>
  </body>
</html>

This style sheet will create a page displayed as:

HTML + CSS result