{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

Tutorial on How To Include CSS in HTML Documents

There are 3 ways to embed styles in web pages:

external style sheets
internal style sheets
inline styles

Video Tutorials:
View our video tutorials to learn how to create HTML forms, text-fields, password fields, submit buttons and textareas.

External Style Sheets

External style sheets allow you to be able to make changes to the look and layout of multiple web pages by making changes to only one style sheet.

An external style sheet is a text file with a .css extension, for example, style_sheet.css. External style sheets should not contain any HTML code, only CSS rules. An example of a cascading style sheet is shown below:

* { margin:0; padding:0; } body { margin:0; padding:0; color:black; font-size:16px; background:grey; } h1 { margin:10px; padding:0; color:red; font-size:32px; } p { margin:5px; padding:5px; }

Each web page that links to the external style sheet must do so using the <link> tag. The <link> tag goes inside the <head> section of HTML documents. The <link> tag is a self enclosing tag which means that the tag must end with an blank space followed by a forward slash (<link />). The tag must also contain the property rel with an attribute of text/css and also the property href with the value being the external style sheet that the web page is linking to.

An example of how this is shown below. The external style sheet that is being linked to in this example has the name of styles.css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <body> <p> This is a paragraph. </p> </body> </html>

NOTE: Do not leave spaces between the property value and units. For example, margin:5px; will work in all web browsers as they should while margin:5 px; will work in Internet Explorer but will not work in Firefox or Opera.

Internal Style Sheets

Internal style sheets, also called embedded style sheets, is a way to embed CSS rules within HTML documents using the <style> tags. There must be an openning <style> tag and a closing </style> tag. The openning <style&g; tag must include the type attribute with a value of text/css.

The example below shows you how to embed an internal style sheet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> /* the CSS rules go here */ </style> <body> <p> This is a paragraph. </p> </body> </html>

Inline Styles

Inline styles do not offer the same benefits of external style sheets or even embeded style sheets. Inline style sheets allow you to style one HTML element within an HTML document by including the style property within an HTML element.

The code example below shows you how to do this. It will give style the paragraph giving the text the color of red and a font size of 18 pixels.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> </style> <body> <p style="color:red; font-size:18px;"> This is a paragraph with inline styles applied to it. </p> <p> This is a paragraph. </p> </body> </html>

Home

Tutorials

Templates

Free Website Templates

References

CSS References