Cascading Style Sheets - Understanding When & How to Use Them.

Purpose: Students will understand how and when to use Cascading Style Sheets (CSS).


1. Model Html without CSS - Then show the Same Site With CSS.


2. Styles


Explanation of Cascading Style Sheets
Cascading Style Sheets allow you to format text by writing the Declaration (the format you desire) only once…not each and every time you write a heading or a paragraph. If you want to change the format on a web site, you don't have to go to each line to make the change. All you have to do is go to the Declaration or Style and make the change. That change will be applied to all sections of the site that are being referenced (or linked) to it. Another benefit: you only have to create one Style Sheet...from that point on, all you have to do is have any new web site you create link to it. What a time saver!

Example: Imagine you have a corporate training manual that is 100 pages long. Lets say your old boss likes Arial, but he retired and the new boss likes Helvetica. All you have to do is delete Arial in the Internal or External CSS and substitute it with Helvetica and within a split second, the new font is applied to the text on all 100 pages changes.

Internal Style Sheets (12pts.)
Internal Style Sheets allow you to format text by writing the Declaration only once…not each and every time you write a heading or a paragraph. You declare the Style in the Header of the page.  Any time it appear in the body, it automatically receives the attributes declared in the Header.

External Style Sheets - Drugstore 20 off coupon code(50 pts.)
With an external style sheet, you create a web page in which you will write all the Styles that you want to appear on your web pages. All you have to do is add a link to it in the <head> section of the HTML page.The benefit is that you can reuse this external Cascading Style Sheet over and over on future websites and you can change the look of an entire web site by changing one style in this file

  1. Support Website.
    • Recreate each .html page and then copy and paste the code and images onto them.
    • Create an external Style Sheet (!Save it as: "styles.css"). The css code for this site has also been provided to you. Type it onto the page.

Inline Styling (5pts)
Inline Styling is different. Inline Styling is written directly in the line of code, just like you did with Tags. So why use Inline Styling? You would use it when you want to apply a unique style to a section of text. This web site would most likely already be using an external style sheet. Eg. You were writing an essay and you wanted the name of your school to appear in the school colors and bold. The inline style would supersede the sites exteral style sheet.
Note: Inline Styles should be used sparingly, because they defeat the purpose of separating the style from the content.