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:

HTML CODE:
<p style="color:#CCCCCC;">My Text Is Light Grey</p>

Result
My Text Is Light Grey

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:

HTML CODE:
<!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 CODE:
<!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:
body{color:#FFFFFF; background-color:#000000;}
/* This is a comment */
p{font-family:Verdana, Arial, Helvetica, sans-serif;}
h1{font-size:16px;}

Check Out Our Sponsors
Bookmarks
RSS Feed    Search
Remortgages