CSS_HomePage

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

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

Vocabulary:

Attributes
Selector & Declarations
Inline Styles
Internal Style Sheets
External Style Sheets

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

1a. Example of site with no formatting (just image). click here.
1b. Example of site in which Tags are applied to each line of code in order to format the text. click here.
- Tags: You used Tags to change the text to any size, font, color, alignment, etc. This is the method the students have followed to date.
- Tags are being phased out while Styles are being phased in!

Note

If No tags are present: browser default settings are used. (Explorer: MM/Tools/InternetOptions/Fonts)(Chrome: Open Menu/Settings/Advanced/WebContent/CustomizeFont).

2. Styles

Styles are used to format text on a web page. Why use Syles and not Tags: More efficient (Consistency/Professional & Saves Time!)
Three methods for inserting Styles:

Internal Style Sheets (Used with small sites.)
External Style Sheets (Used with any sites. Very common.)
Inline Styles (Used to change just one line of code - rarely used. Usually used to over ride an External Style Sheet.)

Styles Model (16 pts.)

View the model. You are able to view the code on the right in the browser window. Use a text editor and copy the code on the right to create your own Internal Style Sheet. When you are done, you will have original code that you will be able to copy and paste into future projects.

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.

Model Internal Style Sheet

Recreate Model by Using this Code

External Style Sheets - Model (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

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.

Model

In this example, I opened the code for the Lincoln Page that I just made for the External CSS and changed the color of the Header from Pink to Orange. Notice that I did not edithe code on the External Style Sheet because I wanted pink to remain the color on all the other pages. I wrote an Inline Style directly onto the page - it superceded the external style sheet.