Cascading Style Sheets - PowerPoint PPT Presentation

cascading style sheets n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets PowerPoint Presentation
Download Presentation
Cascading Style Sheets

play fullscreen
1 / 12
Cascading Style Sheets
179 Views
Download Presentation
jorden-bowen
Download Presentation

Cascading Style Sheets

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

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

  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. • 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 • Browser default • External Style Sheet • Internal Style Sheet (inside the <head> tag) • Inline Style (inside HTML element) • Allow you to accomplish more fixed background images

  6. Types of CSS • External – ideal when same style is applied to several pages • Internal – style is applied to a single document • Inline – Single occurrence within a page (ie. Single word, cell of table) • Class – custom style

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

  8. Internal Style Sheet • Created within the .html file between <head> <style type=“text/css”>Styles defined </head> • 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 <p style="color: sienna; margin-left: 20px">Text goes here</p>

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

  11. Helpful Links W3Schools, CSS2 Reference Page, http://www.w3schools.com/css/css_reference.asp - Comprehensive list of css2 tags CSS Zen Garden, homepage, 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 - Government site describing Rehabilitation Act section 508 that deals with access to information on the internet

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