|
|
How to apply styles:
There are three basic ways to apply styles (also true of JavaScript): in-line, embedded, and externally. This is (finally) where the concept of cascading applies: Styles or formatting that are closest apply first, then the browser "cascades" through the options to the most global style. Any text formatting that you apply with HTML tags is the most local, so that the sequence would be:
HTML tags>in-line styles>embedded styles>external styles
Now, let’s look at how the three means of application work:
In-line styles
This is the easiest but least efficient method
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Document's title</title>
</head>
<body>
<p style="style elements go here">
</p>
</body>
</html>
Embedded styles:
This would be useful if you had a site with only a few pages. It's also the method that's easiest to use to demostrate a style sheet in action, as in the example here. Check the code behind the page (click, then close window to return to this page).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Document's title</title>
<style type="text/css">
<!--
style elements go here
-->
</style>
</head>
<body>
Content goes here
</body>
</html>
External (or, linked) styles:
This is the real reason to use styles. You create the styles in any simple text editor such as Notepad and save as .css files (or .txt) or let Dreamweaver make the file or you. This method mimics their original creation in the publishing world and gives all of the advantages mentioned in the introduction.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Document's title</title>
<link href="filename.css" rel="stylesheet"
type="text/css">
</head>
<body>
Content goes here
</body>
</html>
As a quick test: How many of the advantages can you name:
Intro | Types | How-to | Tags | Dreamweaver
