Cascading Style Sheets (CSS) Part II

1. Cascading Style Sheets (CSS)Part II IT210: Web-based IT

2. Some slides modified based upon Charles Severance’s Creative Common’s Licensed CSS intro slides available in full here:http://open.umich.edu/sites/default/files/Severance-SI502-W09-Week10-CSS.ppt

3. A Slight Diversion

4. Microformats • A microformat is a web-based approach to semantic markup that seeks to re-use existing HTML/XHTML tags to convey metadata and other attributes in web pages... (Wikipedia) • In other words, microformats are standards for using agreed upon “class” names for specific things like geographic coordinates, recipe ingredients, phone numbers…

5. Recipe Microformats

6. CSS Positioning

7. Every CSS element in a document is considered to be a rectangular box

8. The Box Model

9. CSS Box Model Properties • height and width properties size the block element • margin properties define the space around the block element • border properties define the borders around a a block element • padding properties define the space between the element border and the element content • background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page http://reference.sitepoint.com/css/boxmodel

10. Two kinds of boxes (i.e. elements) • Inline - affects how text looks • EM, SPAN, actual text or images • Block - Containers that can be laid out • P, DIV, TABLE, etc • CSS can change a tag from inline to block using the “display” property #navigation li { display: inline; }

11. Inline Elements • Flowed with other text • span, em, strong, cite, a • Inline tags can be nested as long as they are both inline • <span class=”important”><cite>Stuff</cite></span> • Block can contain inline - but inline cannot contain block

12. Block Level Elements • Starts on its own line - ends justification and starts a new block • Can be a container for other elements • h1 - h6, p, div, blockquote, ul, ol, form • Blocks can contain other blocks <div id=”content”> <p>One </p> <p>Two</p> </div>

13. A block contained inside a block

14. Positioning/Layout Methods • Normal Flow (i.e., static positioning) = default • Relative (“shifted” from normal flow position) • Absolute (position specified; scrolls as usual) • Fixed (position specified; doesn’t scroll) • Floating (floats to a side; content wraps around it)

15. Normal Flowof Block-level elements = verticalNote the collapsed Margins!

16. Normal Flow of In-line elements = horizontal (with wrapping)

17. Relative Positioning p { position:relative; left:20px; top:25x; } Overlaps are allowed! Original space of box is still taken up!

18. Absolute Positioning Treated as block-level elements Removed from normal flow & can overlap other elements p { position:absolute; left:20px; top:25x; }

19. Fixed Positioning Same as Absolute Positioning except the element does not move when scrolling p { position:fixed; left:20px; top:25x; }

20. Floats span { float:right; width:200px } Floated elements are treated like blocks even if they are inline elements

21. Adjacent Floats Multiple floated elements stack horizontally (unless you use the clear property to stack them vertically)

22. CSS Resources

23. CSS Validation • You can validate your CSS to make sure it has no syntax errors • Browsers will generally quietly ignore bad CSS syntax • http://jigsaw.w3.org/css-validator • The validator can save you time and sanity Source: W3Chttp://validator.w3.org/check

25. Browser CSS Charts *Look into Quirks & Strict mode if you’re designing for old browsers