Integrating Cascading Style Sheets

There are multiple ways of calling and integrating styles and style sheets into your HTML file(s).

There are three typical ways of integrating cascading style sheets:

  1. Inline CSS
  2. Embedded CSS
  3. External CSS *

* There are two ways of calling an external style sheet into the HTML document. The main or common use is using the <link> tag within the head of the HTML document. The second is a combination of the embedded CSS and the external CSS functions, this is called the "@import" function. We will go into depth with this function in its own page.

Inline CSS

Inline CSS allows you to define your styling directly within your HTML tags

Example:

<p style="color:#F00000;">My Text Is Red</p>

The Result:
My Text Is Red

Embedded CSS

Embedded CSS specifies the CSS properties within the "head" tag of your "HTML" code using a "<style>" block.

Please note within the style block there is a comment "<!-- -->" tag. The comment is there to stop older/ancient browsers that do not support CSS from reading the code and outputting it in the browser. The majority of such browsers are outdated and are no-longer used today, so meaning that it is most probably safe to ignore the use of the comment tag.

Each specification or elements specification is written on a new line, as in our example with the "body" and "p" tags.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr"> <head> <title>Embedded CSS Styles</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- body{color:#FFFFFF; background-color:#000000;} p{font-family:Verdana, Arial, Helvetica, sans-serif;} --> </style> </head> <body> </body> </html>

External CSS

External CSS is called via the <link> tag within the <head></head>.

The style sheet contains CSS syntax including if needed comment tags "/* */". The external style sheet has a document specification ".css" in our example we are calling in "default.css"

Example:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr"> <head> <title>External CSS Styles</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="default.css" type="text/css" /> </head> <body> </body> </html>

CSS Syntax in the "default.css" file:

body{color:#FFFFFF; background-color:#000000;} /* This is a comment */ p{font-family:Verdana, Arial, Helvetica, sans-serif;} h1{font-size:16px;}