Applying CSS to HTML

Style Sheets can be added to a html document in three (3) different ways.

  1. External Style Sheet
  2. Internal/Embedded Style Sheet
  3. Inline Style Sheet

External Style Sheet

This format would be most ideal when applying to more than one html document.  An external file will be created and a link will be placed in each document.

Example 

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />;
</head>

Internal /Embedded Style Sheet

This format would be most ideal when applying a unique style to a specific html document. This style sheet override the external style sheet.

Example

1
2
3
4
5
<head>
<style type="text/css>
h1, h2 { color: blue;  font-family:"Times New Roman",Georgia,Serif;}
</style>
</head>

Inline Style Sheet

This format would be most ideal when applying a unique style to a single occurrence of an element. This method overrides both the internal and external method. This method can be used with the span tag with the style attribute

1
<span style=""></span>

or the style attributed used with the relevant tag

1
<p style=""></p>

.

Example

1
<span style = "color:red">TEXT</span>
1
<p style = "color:red">PARAGRAPH</p>