Using Cascading Style Sheets

By · 1 Comment

CSS files can be implemented in one of three ways: Inline, Internal and External.

Inline

Inline styles are used within the <body> tags of a web page. They can be added to any tag within the body. Example:

<p style=”color:blue”>This is a sentence.</p>

This method mixes content elements with presentation elements. It is not recommended for this defeats the purpose of cascading style sheets. In some DOCTYPEs inline styles will register as invalid. The effective use of classes and ids within an external style sheet is a remedy for inline styles.

Internal

Internal style sheets are used within the head section of a document. Internal style sheets are defined by <style> tags:

<head>
<style type=”text/css”>
body {font: arial;}
</style>
</head>

When the web page is read, the browser will apply any styles within this tag.

This method is not typically recommended, but you won’t break any DOCTYPE standards with its use. If possible put all styles in an external style sheet.

Note: if you use a CMS that uses plugins, be aware that some plugins may add their own styles to your web documents. I don’t like this practice and feel you should be aware of it.

External

External style sheets are the recommended and preferred method for using cascading style sheets. External CSS files are referenced within the <head> section of a web page by using ht <link> tag:

<head>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”
</head>

Browsers reading the webpage will access the file and format the page accordingly.

Visit the archives for more information on CSS archives or visit our CSS Tutorials page.

 

About the Author

Paul Flyer loves to research the web and find resources and tools for building, maintaining and promoting websites. Based in Saint Louis, MO, he works in management and spends his free time sharpening his web development and copy writing skills. Feel free to contact Paul with any questions, comments or ideas. He is also available to help you with your own website.

Visit Paul Flyer's Website