1. Cascading Style Sheets Chris Vollmer IT 5610 Chatfield Senior High School

2. Table of Contents What is CSS Using Cascading Style Sheets Why Cascading Style Sheets Types of CSS External Internal Inline Class Try Some Helpful Links

3. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets External Style Sheets are stored in CSS files Multiple style definitions will cascade into one http://www.w3schools.com/css/css_intro.asp

4. Using Cascading Style Sheets Cascading Style Sheets are mainly used to separate the presentation aspects of a web page from the content aspects.presentationcontent CSS are used for presentation, HTML is used for structure. Things to keep in mind… –Human disabilities (508 compliant) –Version of browser –Text based browsers –Handheld internet devices

5. Why Cascading Style Sheets ? Multiple style definitions will cascade into one oBrowser default oExternal Style Sheet oInternal Style Sheet (inside the tag) oInline Style (inside HTML element) Allow you to accomplish more fixed background images

6. Types of CSS ExternalExternal – ideal when same style is applied to several pages InternalInternal – style is applied to a single document InlineInline – Single occurrence within a page (ie. Single word, cell of table) ClassClass – custom styleClass

7. External Style Sheet Separate from.html file Tag placed in.html to link.html to.css (external style sheet file) <link rel=“stylesheet” type=“text/css” href=“filename.css”> example

8. Internal Style Sheet Created within the.html file between Styles defined Format includes 3 parts: selector {property: value} body {color: black or #ffffff}

9. Inline Style Sheets Use this sparingly, mixes content with presentation Tag placed around text or image that you are applying the attribute Text goes here

10. Class (Custom) Define different styles for same html tag #1 align right #2 align center p.right{text-align: right} p.center{text-align:center} You can omit the html tag and create your own classcreate.alpha a:link,.alpha a:visited{font- size: 12px;}

11. Helpful Links W3Schools, CSS2 Reference Page, http://www.w3schools.com/css/css_reference.asp http://www.w3schools.com/css/css_reference.asp - Comprehensive list of css2 tags CSS Zen Garden, homepage, http://www.csszengarden.com / http://www.csszengarden.com / -Great examples of how CSS is used for presentation Section 508, homepage, http://www.section508.gov/index.cfm?FuseAction=Content&ID=3 http://www.section508.gov/index.cfm?FuseAction=Content&ID=3 - Government site describing Rehabilitation Act section 508 that deals with access to information on the internet

12. Try Some 1.Background color and heading tags, http://www.w3schools.com/css/tryit.asp?filena me=trycss_background-color http://www.w3schools.com/css/tryit.asp?filena me=trycss_background-color 2.Text color, alignment, background http://www.w3schools.com/css/css_text.asp 3. You choose http://www.w3schools.com/css/css_background. asp