1 / 12

Cascading Style Sheets

Cascading Style Sheets. Chris Vollmer IT 5610 Chatfield Senior High School. 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. What is CSS?.

jorden-bowen
Download Presentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related