Using CSS

CSS can be given to a HTML file as one of three types, inlined, internal and external.

Both inlined and internal CSS are loaded with the HTML page because they are included within it whereas external CSS needs to be loaded from a different URL, causing another HTTP request for the browser.

Each of these definitions of CSS are defined differently within the HTML file however.

Internal CSS

Internal CSS is defined within the HTML file head element.

The <style type="text/css"> tag opens up an internal CSS block. This then allows any CSS to be included within that file that affects only that page.

CSS

<!DOCTYPE html>
<html dir="ltr">
   <head>
      <style type="text/css">

      </style>
   </head>
   <body>
   </body>
</html>

Where the style element is given the CSS.

Internal CSS is not a particularly useful way of avoiding repetition across a website as it cannot be cachedCacheCached files are retained on the system temporarily, resulting in a faster loading time.

Inlined CSS

Inlined CSS is used to define something about a singular element. For instance, back in the day HTML used to define how a piece of text would look to the extent that it would surround the text with a font tag. With CSS this is done with inline CSS. The big drawback with inlined CSS is that it also cannot be cached.

The following is an example of inlined CSS:

<p style="">Styled paragraph</p>

Where the style attribute is given the CSS.

External CSS

External CSS refers to CSS that is not in anyway defined within the file and that all the style pointers are defined within a seperate file. This brings the benefit of faster loading due to the fact that the CSS file can be cached.

External CSS needs to be combined as much as possible - it is simply not good enough to have three or four stylesheets that are then requested by the client (browsers can only request up to around 90 files in a single cycle).

External CSS is designed for site-wide themes. This site for instance uses a single CSS file that contains all the information about styling the site. At the time of writing this article, the CSS used with this site is around 3,700 lines long, this would be terribly slow if it were not for being able to cache this file.

External CSS is defined as part of the head element but using a link element:

CSS

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="link_to_stylesheet">
   </head>
   <body>
   </body>
</html>

Try building a simple HTML page and adding all three types of CSS to it.

Did you know my courses are all printer-friendly? This means you can easily export them to PDF or print them for later use.

Course
overview

Part 2.2Using CSS

Using CSS

Internal CSS

Inlined CSS

External CSS