1. External Style Sheets Exploring Computer Science – Lesson 3-6

2. Objectives The student will be able to Create an html page which links to a separate css file. Use html tags and css styling elements to separate style from structure.

3. External Style Sheets Adding a element in a html file is a great way to format a webpage What if you would like that same style to apply across multiple web pages? This would provide consistency in the web pages Allow a single place to change the style and have that change affect all web pages External Style sheets allow you do that.

4. External Style Sheets You can take all your CSS style code and place it in a separate file (style.css) You do not put the tags, just the css code. In Notepad++ the lines will now be color coded.

5. External Style Sheets The sheet is then linked into any html files that you want to share that style. Add the link tag into the head section where the tags used to be. The sheet can be included in multiple html files. The tags are gone!

6. Using Class to Customize Styles Remember I showed you that you can add a “style” attribute to customize a single paragraph? What if I wanted to customize a set a paragraphs one way and another set of paragraphs another way? I don’t want to have to remember to add the correct “style=“ to every paragraph and if I decide to change the style I would have find all the paragraphs. The solution is to use “class” attribute.

7. How to Define and use a Class Attribute If I want to define a class I simply add class=“name” in the HTML tag: Some text goes here To use the “summary” class in CSS code: p.summary { font-size: 1.2em; font-style: italic; }

8. Example

10. Create a New Webpage Pick one of the topics below and create the web page. You must use an external style sheet and have classes defined. 1.Create a website with three or more movie reviews. The html page will contain the following paragraphs for each review: title, director, synopsis, review. The css stylesheet will have corresponding classes. 2.Create a website with three or more horoscopes. The html page will contain the following paragraphs for each horoscope: sign, dates for the sign, horoscope. The css stylesheet will have corresponding classes. 3.Create a website with three or more recipes. The html page will contain the following paragraphs for each recipe: dish, instructions, ingredients. The css stylesheet will have corresponding classes.