Internal vs external CSS

Inline CSS

The CSS style for a single element can be assigned in an HTML tag's style attribute.

<div style='…'>
  text text
</div>

Internal CSS

The CSS styles that are to applied to a single HTML document can be put into the same document using <style type='text/css'>…</style>.

<!DOCTYPE html>
<html>

<head>

  <title>Using inline CSS</title>

   <!--      This is the inline css:      -->
   <style type='text/css'> 
	    .someColor { color:#ff7700;}
	    .someFont  { font-family:Courier;}
   </style>
   <!--                                   -->

</head>

<body>

  <div class='someColor'>This div uses the &laquo;inline&raquo; style <i>someColor</i></div>
  <div class='someFont' >This div uses the &laquo;inline&raquo; style <i>someFont </i></div>

  <div><a href='use_external_css.html'>Use extarnal css</a>

</body>
</html>

Github repository about-css, path: /inline_vs_external_css/use_inline_css.html

External CSS

If the same stylesheets are to be applied to multiple HTML documents, the can be refererenced from these HTML documents with <link rel="stylesheet" type="text/css" href="path/to/file.css">.

A HTML document that references an external stylesheet file:

<!DOCTYPE html>
<html>

<head>

  <title>How to use extrnal CSS</title>


   <!--      This is the LINK to the external css          -->
   <link rel="stylesheet" type="text/css" href="external.css">
   <!--                                                    -->

</head>

<body>

  <div class='someColor'>This div uses the &laquo;external&raquo; style <i>someColor</i></div>
  <div class='someFont' >This div uses the &laquo;external&raquo; style <i>someFont </i></div>

  <div><a href='use_inline_css.html'>Use inline css</a>

</body>
</html>

Github repository about-css, path: /inline_vs_external_css/use_external_css.html

In this example, the referenced stylesheet file is rather simple:

.someColor { color:#ff7700;}
.someFont  { font-family:Courier;}

Github repository about-css, path: /inline_vs_external_css/external.css

TODO

It seems possible to provide alternative stylesheets that the user can choose from using the View->Page Style menu (at least in Firefox):

<link href="default.css"     rel="stylesheet"           title="Default"    >
<link href="big-letters.css" rel="alternate stylesheet" title="Big Letters">
<link href="contrast.css"    rel="alternate stylesheet" title="Contrast"   >

Internal vs external CSS

Inline CSS

Internal CSS

External CSS

TODO

See also