MMDT1021 Chapter 9 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. |
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. |
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. |