1 / 16

Cascading Style Sheets

Cascading Style Sheets. CSS2. HINT. Use a LIVE CSS editor Web Developer Tools for FireFox have this Firefox has addons for CSS reference Someday somebody will merge the CSS reference with a live editor… maybe you? Firefox add-ons are coded in javascript. CSS3 properties.

malissa-economos
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 • CSS2

  2. HINT • Use a LIVE CSS editor • Web Developer Tools for FireFox have this • Firefox has addons for CSS reference • Someday somebody will merge the CSS reference with a live editor… maybe you? Firefox add-ons are coded in javascript...

  3. CSS3 properties • Draft finalized end of 2005? still in draft 2008… • Browser support initially limited • Problems: • buggy limited support • POORLY designed standard

  4. Naming Conventions • If you didn’t notice… • CSS attributes are LOWERCASE • background color = background-color • colors in CSS • named (a short list) red, blue, green… • #99CC33 → #9C3

  5. Display • display: none; (hide) • display: inline; (fits in the line) • display: block; (alone on its own line) • display: table-row, table-column, table-cell, inline-table

  6. Import • @import “…” or @import url( … ) • media types can follow it • @media media_type {…css…} • like: if( media_type == true ) { } • ex: @import “fancy.css” print, screen;

  7. Printing • page-break-before • page-break-after • page-break-inside • auto, always, avoid, left, right • @page {margin properties…}

  8. Box Model • All Elements (tags) have a box around them. • width, height • margin, padding,border • position: top,left,bottom,right

  9. Positions & Dimensions • width, height • top,left,bottom,right • must be positioned to use • auto or inherit (used in CSS cascades) • ##% = relative to parent • units: mm,cm,in,px,pt,pc,em,ex

  10. relative Positioning • Position relative to the text flow (sibling text and tags) • If the text moves, it moves • Example: sub-text or super-text (1st 2nd X² ) • negative positions allowed

  11. absolute Positioning • positions relative to PARENT position • scrolls with the PARENT position • bottom is the bottom of document • going off the page can cause browser to make document larger • negative positions (left/right/top/bottom) are allowed

  12. fixed Positioning • positioned ON THE WINDOW • bottom is the bottom of the window’s page viewing area • does NOT scroll with the the page • adjusts to when the window does

  13. float Positioning • left or right • The box moves to the left or right of the area (contained by parent) • text flows around the box • works diagrams or photos in text documents

  14. z-index • Layering control • Multiple positioned boxes overlapping cause a layering problem, this solves it • only works on boxes that are positioned • 0 and up back to front • auto = default behavior

  15. tricks • bugs (look up the Acid Tests for CSS) • there are IE specific comments that help in coding around IE bugs • Absolute positioning inside a PARENT with relative positioning can be useful • Combining positioning, tables, float can create interesting situations (bugs too)

More Related