MMDT1021 Chapter 8 Notes

MMDT1021 Chapter 8 Notes - page 1

The text book actually describes applying styles in the opposite order of what I am presenting here. But actually applying styles locally, then internal to the document, and then finally in an external file is the easiest way to learn applying styles.

Applying Styles Locally

Simply add the "style" attribute to the tag.

Code	Page
An example of multiple uses of applying styles locally inline. The style is included directly into the tag using the style attribute. The style only works for this instance of the tag.	Result Source

Creating an Internal Style Sheet

Code	Page
Actually this is what I have been doing all along to demonstrate the material for Chapter 8. Here is another example of an Internal Style Sheet. The style sheet is fully contained in the <head> of the document. The style applies to the entire document.	Result Source

Creating an External Style Sheet

This is the most complicated method of creating a style sheet. It requires an external file to be created. Then you create a link to this style sheet to all the pages that you want to take on this style sheet.

Actually this method has a distinct advantage over any of the other methods of applying styles. The main advantage is that one style sheet can be used for all the pages in a web site to give a common look and feel. And later, if you change the look of your site, you only have one style sheet file to edit.

The external style sheet can easily be applied to the entire web site.

Code	Page
Here is the external style sheet. Remember to end the file name with the extension ".css"	CSS source
Here is page one of the site that takes advantage of the external style sheet.	page1 result page1 source
Here is page two of the site that takes advantage of the external style sheet.	page2 result page2 source

When multiple styles are applied to the same tag, the most local style and the most recent style is applied.
Review chapter 7 notes on precedence again.