Three ways to Style

3 Ways To Style

(under construction)

1) Inline Styles

<p>This paragraph simply takes on the browser's default paragraph style.</p>

<p style="font-size:25pt; font-weight:bold; font-style;italic; color:red;">By adding inline CSS styling to this paragraph, we can override the default styles.</p>

<p>And now we are back to a regular default paragraph without any inline styles.</p>

which looks like this:

This paragraph simply takes on the browser's default paragraph style.

By adding inline CSS styling to this paragraph, we can override the default styles.

And now we are back to a regular default paragraph without any inline styles.

Inline Styles Notes

The scope of Inline Styles are very restricted. An inline style only affects the tag to which it is attached.

Adding inline styles everywhere is as bad for the portability and editability of your markup as adding deprecated HTML attributes, such as FONT. Inline styles should be generally avoided.

Use it just in rare occasions when you need to overide a style in just one specific instance and there is no better way to do it.

It is a good way to try out a style before you move it into the style sheet.

------------------------------------------------------------------------------

2) Embedded Styles or Page Styles

You can place a group of CSS styles in the head of your XHTML document. Embedded styles work like this:

<html>

<head>

<title>Embedded Styles example</title>

meta http-equiv="Content-Language" content="en-us"/>

h1{font-size:16px;}

p{color:blue;}

</style>

</head>

</html>

Embedded Styles Sample

Embedded Styles Notes:

1) The scope of embedded styles is limited to the page that contains the styles.

2) If you are only publishing a single page with these particular styles, you can embed the styles in the head of the document.

3) If you are working up multiple styles for a complex layout such as a form, sometimes it's easier to write the styles as embedded styles in the head of the document so that you don't have to constantly witch between the markup and the style sheet.

4) Page styles override style sheet styles, but they lose out to attributes you define in inline styles.

5) If you are sending an XHTML page to someone for a critique, it's considerate to embed the CSS styles in the page, so the reviewer only has to open the page and everything works.

6) For the web site of any scale, there is really only one way to manage the CSS and that is in style sheet that can be linked to all of the site's pages.

--------------------------------------------------------------------------------

3) Linked Styles

Ideally, you place styles in a separate document (a style sheet) that links to multiple pages so that the styles have gobal (site-wide) scope. The styles defined in this style sheet can then affect every page of your site. This is the only method of the three that truly separates the presentational styles from the structural markup. If you centralize all your CSS styles in a style sheet in this way, Web site design and editing become much easier. To point or link to the file:

This is also called "link tag".