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 / 17
Cascading Style Sheets
170 Views
Download Presentation
joseph-benjamin
Download Presentation

Cascading Style Sheets

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

  1. Cascading Style Sheets

  2. Cascading Style Sheets • Purpose • Define Styles • HTML • Class • ID • Add style • Inline • Single page • Entire site

  3. Cascading Style Sheets • Intended as a way to eliminate need for formatting on each page • Allows you to change all style at once • Quickly change the appearance of a huge site

  4. Cascading Style Sheets • More detail • Remove link underline • More control • Redefine HTML • Pixel precision placement • Layer objects • Faster Loading

  5. Cascading Style Sheets • Style • Definition of attribute • Selector • Individual styles • CSS Code • Tag { property:value;}

  6. Selector • HTML Selector • Redefine HTML tags • Class Selector • Definitions that can be used for multiple tags • ID Selector • Define object positioning

  7. HTML Selector • Redefine an entire tag • Example body { background-color: black; } • When <body> is used, background will be black

  8. Class Selector • Can be used by multiple HTML tags • Example .important { font-size:36px; color:blue; text-decoration:underline; }

  9. Class Selector • <p class=“important”> • Result: • Look at Me • <b class=“important> • Look over here • Flexibility

  10. ID Selector • Define objects, mostly used to layer • Example #adcol { position: absolute; right: 10px; top: 210px; width: 160px; height: 600px; }

  11. ID Selector • Will create a text box that remains in one position regardless of other items on page • Imagine layering pictures, or cells of tables to create interactive menus

  12. <SPAN> and <DIV> • Dummy tags • Useless by themselves • Carriers • Very powerful when paired with Class or ID Selectors • <span> • Inline • <div> • Block tag

  13. Grouping • Multiple tags can be defined together h1,h2,h3,h4,h5,h6 { color: white; font-variant: small-caps; }

  14. Placement • Inline • Within a page, within a specific tag • <p style=“font-size:100px;”> • That paragraph will be huge • Cannot be reused • DO NOT DO THIS

  15. Placement • <head> section • Definitions for that entire page • All style in one spot • Easy to change • Helpful if one page is to be drastically different • Downside • Need to repeat for each page

  16. Placement • External Sheet • Separate HTML document • Saved as .css • Reference by using <link> <head> <link href=“format.css” type=“text/css”> • All that needs to be done is to add this into every head section • And create a style page

  17. Placement • Priority of CSS • Inline – 1st • Page • External – last