1 / 28

CSS

CSS. Cascading Style Sheets. Why CSS. Separates content (XHTML) and presentation (CSS) So What? Update a whole site’s look & feel via one document Allows different users to receive a tailored presentation

john-chaney
Download Presentation

CSS

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. CSS Cascading Style Sheets

  2. Why CSS • Separates content (XHTML) and presentation (CSS) • So What? • Update a whole site’s look & feel via one document • Allows different users to receive a tailored presentation • You often do not have control over formatting of XHTML data coming from disparate systems

  3. Example CSS File

  4. CSS Syntax Selector (XHTML TAG) Property Value(s)

  5. More Syntax CSS English XHTML Select the <div> tag with an id of ‘content’ Select any <p> tag in the document Select any <p> tag within the div with an id of ‘content’ Select any <span> with a class of ‘important’

  6. Tags, Properties & Values • Not all properties apply to all tags • Refer to • W3C CSS Recommendation • W3schools CSS tutorial

  7. CSS is not Black Magic • Install the Firebug plug-in so you can visualize and inspect CSS/XHTML • Fundamental concepts • Leveraging ‘Tree-y-ness’ of XHTML documents • Inheritance • The Box Model • Positioning • Display

  8. Tree-y-ness body content header nav ul p p p p h1 img li li li

  9. Tree-y-ness Bad way to set the style for <li> items in the nav bar: Good way to set the style for <li> items in the nav bar:

  10. Tree-y-ness • Why use the XHTML document tree in your CSS? • Less markup in the XHTML doc • Less typing • Less for future editors or CMSs to mangle • Leaves Javascript/CSS options open • A script could set an elements class to ‘hidden’ and the css hides the element: .hidden{display: none;} • Reminds you of how properties are inherited • Cleaner CSS documents

  11. Inheritance XHTML In the below example, the text within the <strong> tag would inherit the blue color from its parent, the <p> tag. CSS Browser display blahblahblahblah

  12. The Box Model Firebug display Wait, shouldn’t this be 56? Firefox is applying some left margin to the <body> since we didn’t specify anything.

  13. Display & Position Properties • Setting these properties change • Which other properties you can use • How other property/value pairs are interpreted

  14. Display Values • Block • Inline • None • And a bunch more…

  15. Display:Block • Default property for <div>, <p>, <h1>, <ul>, <blockquote>…and more • Start on new ‘line’ in the document flow • Block level elements can set • height/ width • Can contain other block level elements and inline elements

  16. Display:Inline • Default property for <span>, <img>, <a>, <em>…and more • Flow left to right on the same line • New line when they run out of page width • Block level elements cannot set • Height/Width • Can contain other inline elements

  17. Display:None • Does not display element • Does not generate a box for the element • Handy for showing/hiding multiple tabs on a single page

  18. Display Examples Making a <span> behave like a <div> Making a <div> behave like a <span> Hiding any images of the class ‘hidden’

  19. Positioning • Static • Default • Ignores positioning instructions • Relative • Position an element relative to its normal position in the page flow • Note: the area that the element would normally occupy remains reserved in the page flow

  20. Positioning • Absolute • Position an element with x,y coordinates. • {top: 0; left: 0;} would be the upper left corner of the nearest relative positioned ancestor • Fixed • Position an element with x.y coordinates relative to the screen

  21. Positioning • Properties • left, right, top, bottom • You cannot specify left & right or top & bottom at the same time…one of the properties will be ignored

  22. Positioning Examples Right & Top properties have no effect Does not move the paragraph horizontally Moves the paragraph down 15px from its normal position Aligns the right edge of the paragraph 0px away from the right edge of the nearest relatively positioned ancestor element Aligns the top edge of the paragraph 15px below the top edge of the nearest relatively positioned ancestor element

  23. Relative div id=“a” class=“blue” div#c { position: relative; left: 200px; top: 50px; } div.blue { background: #6f969e; margin-top: 5px; } div id=“b” class=“blue” div id=“c” class=“blue” div id=“c” class=“blue” div id=“d” class=“blue” div id=“e” class=“blue”

  24. Absolute div id=“cont” div#cont { width=400px; height=800px; background: #cae9ef; position: relative; } div#msg { position: absolute; left: 200px; top: 100px; background: #6f969e; } div id=“msg”

  25. Float • Allows block level elements to stack horizontally on the page • Elements stack inside a parent container • Can float: left or float: right • Clear: right, clear: left or clear: both stops elements from stacking

  26. Float

  27. Example time: • Load up: • http://www.rpi.edu/~gillw3/websys/css/files/ • OMG 1997!!!! Try to make it look like…..

More Related