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

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

Explanation of Cascading Style Sheets (CSS)

• Up to this point, you have been using 'Tags' to format your web pages. Examples: Bold, Italics, Center, Text color, Text font, etc.
• Cascading Style Sheets (Css) are also used to format text on a web page. For a number of years, website developers have been moving away from using 'Tags' to format a page and instead have been using Cascading Style Sheets (Css).
• So, why use Cascading Style Sheets (Css) and not 'Tags?' Css is much more efficient. It allows consistency/professional and saves a tremendous amount of time.
• How does it work? When formatting a page with 'Tags', you had to type the 'Tag" into each line of code. With Css, you design a webpage to have a couple of Text 'Styles' for that page. Example: the Title will be H1, Red and Centered. The Topics will be Blue, Font size 14, align Left. The Text will be Black, Font size 12 align size Left. I create a separate webpage called "Styles.css" and I type the Formatting requirements for Title, Topic and Text on it. Then on each web page, I create a link to the "Styles.css" page - this allows each web page to go to this page to find the formatting requirements I want applied.
  • Consistency/Professional: On each page, I will apply just these three Styles (Title, Topic & Text) as I develop each page. Obviously, all my webpages will be far more consistent & professional looking because they will all be based off these same three Styles.
  • Time Saving: Lets say my company gets bought by a new owner. This new owner hates the color red and wants all the website Titles to be green. If my website was based off of Tags, I would have to find and then edit each line of code that had a Red Title. It could take me days to weeks to make that one change. But, if my web site is based upon Css, all I have to do is make one change to the line of code that defines the Title - I will delete the word Red and type in Green. All I have to do is Save and Refresh and within 1 second, the Red Titles on all the pages will change to Green. Can you imagine the time savings if your website is 100 pages long? What about 1000 pages long

View an HTML Page With No Tags - Then View the Same Site With Tags - Finally View the Same Site With Css.

• 1a. Example of site with no formatting/Tags (just image). Click here. & View this pages code containing no Tags. Click here.
• 1b. Example of the same site in which Tags are applied to each line of code in order to format the text. Click here, & view the web page code containing Tags. Click here.
  • Tags: You used Tags to change the text to any size, font, color, alignment, etc. This is the method the students (You!) have followed to date.
  • Tags are being phased out while Styles are being phased in!
• 1c. Example using Css and no Tags. Click here.
  • Here is the Code for San Francisco using CSS: Click here.
  • Here is the Code for Geography using CSS: Click here.
  • Finally, here is the Style Sheet that both of these webpages are linked. Click here.

Project #1: My First Website Using CSS!

1. Find the "My First Website: Geography / San Francisco" that you created.
2. Create a duplicate (copy and paste it.).
3. In the Documents folder, create and add a "Styles.css" page (on PC use Notepad).
4. Edit this website so that it does not rely on Tags for its formatting, but relies on css.
   • Just copy the code I provide above.
     • Notice the line of code at the top of the webpage that states,<link href="styles.css" rel="stylesheet">. The name of your Style Sheet must match the what you typed in this segment of the code. Example: if you titled your Style Sheet "bubba.css", then the line of code linking your web page to the Style Sheet would say: <link href="bubba.css" rel="stylesheet">
   • When you are done, call me over and I will ask you to change parts of your Styles Sheet and after you save and refresh, the change should appear on your web page.

Using Cascading Style Sheets
There are three methods for applying Styles to a web page:

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

---

Internal Style Sheets
Internal Style Sheets allow you to format text by writing a Style 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.

Project #2: Creating An Internal Style Sheet Using CSS!

• Model of an Internal Style Sheet
• Recreate the Model by Using this Code
  • Save your self some time...here is the text for you to copy: click here.
• Gradesheet.

---

External Style Sheets
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.

Project #3: Creating a Website Using an External Style Sheet!

• Model of an External Style Sheet
• Recreate the Model 4 Page Website by Using this Code
  • Save your self some time...here is the text for you to copy: click here.
• Style Sheet Code
• Gradesheet

---

Inline Styling
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 title on your school's website to appear in specific colors and bold. The inline style would supersede the sites external style sheet.
Note: Inline Styles should be used sparingly, because they defeat the purpose of separating the style from the content.

In this example, I created one web page with an External Style Sheet. The title on the page is "St. Helena H.S. Environmental Club." The Style Sheet makes all "Titles" Red. On this specific page, I want it to be Green. Notice that I did not edit he code on the External Style Sheet because I wanted red to remain the color on all the other pages. I wrote an Inline Style, or in other words a "Tag", directly onto the page - it superceded the External Style Sheet.

Project #4: Editing a Page Using an Inline Style!

• Model of an Inline Styling
• Recreate the Model by Using this Code
  • Save your self some time...here is the text for you to copy: click here.
• Style Sheet Code