Cascading Style Sheets - Part 02

Cascading Style Sheets Hatem Mahmoud [email_address]

What is CSS? Layers of a web page: Content: Text, images, videos, etc. Presentation: How the content will appear to a human Behavior: Real-time user interaction: validation, sorting, drag-n-drop, etc.

What is CSS? CSS separates the presentation from the content

Why CSS? Flexible, can be applied in several ways Easy to maintain Accessibility to different users with different devices. CSS caching = less bandwidth + fast loading

Why Guidelines? Stability Cross-browser compatibility Consistency Readability Maintainability More time for real development

Respect major browsers IE 6+ Firefox 2+ Safari 3+

Major Browsers (6, 2008) Source: http://www.w3schools.com/browsers/

IE7.js A JavaScript library to make Microsoft Internet Explorer (5, 6, 7) behave like a standards-compliant browser. http://code.google.com/p/ie7-js/

IE7.js Hot Link

Semantic Markup HTML is for describing the structure not the presentation of the content Use HTML elements for what they were made for: <div> , , <label> , , , <h2> , <th> , <td> , <ul> , <ol> , <li> , ... Don't nest blocks inside inline elements: incorrect

Do not use tables for layout, they were made for tabular data

Always use Web-safe fonts (Common fonts to all versions of Windows and Mac)

Web-safe fonts Arial Arial Black Comic Sans MS Courier New Georgia Impact Lucida Console Lucida Sans Unicode Tahoma Times New Roman Trebuchet MS Verdana

When possible, use transparent GIFs instead of transparent PNGs

Never resize images in CSS or HTML, they would look ugly

Make your site accessible and usable for all users and devices

Accessibility & Usability Provide a “Skip to Main Content” link Always provide a text equivalent for non-text content (image, video, flash, etc.) Differentiate links (underlined) and use meaningful names (avoid "click here") Ensure that the color combinations have an adequate contrast Don't expect the user to use a mouse!

Validate your markup http://validator.w3.org/

Validate your CSS http://jigsaw.w3.org/css-validator/

Avoid inline styles Bad My poor paragraph. Good <link href="screen.css" media="screen" rel="Stylesheet" type="text/css" />

Compress your CSS http://www.cssdrive.com/

Coding Tips 1) File-naming convention: screen.css , ie6.css , reset.css , etc. 2) CSS rule names should describe the purpose not the style. Use: #sidebar , .date , etc. Instead of: #div1 , .red , etc.

Coding Tips 3) Divide into specific sections: /*--->>> GLOBAL <<<---*/ ... /*--->>> HEADER <<<---*/ ... /*--->>> FOOTER <<<---*/ ...

Coding Tips 4) Use indentation: #sidebar { width: 392px; } #sidebar #articles { background: #ccc; } .side_button { background: #fff; }

Coding Tips 5) Use shorthand properties: div { margin: 10px } div { margin: 10px 3px } div { padding: 10px 5px 3px } div { padding: 10px 0 0 3px } div { border: 1px solid #000; } div { font: 140% Verdana; }

Coding Tips 6) Surround embedded styles, if needed, with HTML comment characters to hide from older browsers: <head>  </head>

Use a framework typography.css, grid.css, layout.css, form.css, etc.

Organize your CSS 1) Separate your CSS code: reset.css header.css content.css footer.css ie.css

Organize your CSS 2) Use a master CSS file: master.css @import url(”reset.css”); @import url(”header.css”); @import url(”content.css”); @import url(”footer.css”); @import url(”ie.css”);

Organize your CSS 3) Link to the master CSS file: template.html <link href=" master.css " media="screen" rel="Stylesheet" type="text/css" />

Master CSS Little code in each file One link to all CSS files Disable styling for some parts Add more CSS files without touching HTML files Separate hacks code

CSS Reset * { margin:0; padding:0; } 1) Eliminates all differences in padding and margin across browsers 2) Eliminates margin collapses But 1) Very heavy on the rendering agent to apply rules to every single element 2) Destroys a lot of good default styling

Begin with a few default styles

CSS Reset body, form { margin: 0; padding: 0; font-family: Verdana; } h1, h2, h3, p, ul, ol { margin: 0 0 1em; }

CSS Reset img { border: none; } table { border-collapse: collapse; } input, select, textarea { font-family: inherit; }

Keep a library of helpful classes

Helpful Classes .float_left { float: left; } .float_right { float: right; } .clear_both { clear: both; }

Avoid The Bug Avoid specifying both width and padding or border for an element #sidebar {width:250px} #news {padding:10px; border:1px solid;} <div id="sidebar"> <div id="news"> News </div> </div>

IE Hacks Use IE Conditional Comments to link to a different CSS file:

IE Hacks [if IE] All versions of IE [if IE 6] Only version 6 [if lt IE 7] Less than 7 [if lte IE 7] Less than or equal to 7 [if gt IE 5] Greater than 5 [if gre IE 5] Greater than or equal to 5

Targeting different media types

Supported values: all , aural , braille , embossed , handheld , print , projection , screen , tty , tv

A document can link to multiple style sheets

You can give it a default style and any number of alternatives for the user to choose from

Using the right rel and title attributes

Linked without a title attribute and always applied

Linked with a title attribute and selected by default

Linked with a title attribute, and the rel attribute should be set to “ alternate stylesheet “

Floating A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left ( float:left ) or right ( float:right ) until its outer edge touches the edge of the containing block or the outer edge of another float.

Floating Floating an element converts it to a block Unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it.

Floating Content flows down the right side of a left-floated box and down the left side of a right-floated box. A floated box must have an explicit width via the width property or its intrinsic width (for replaced elements: img , input , textarea , etc.)

Floating This span is floated right. This is my paragraph. This is my paragraph. This is my paragraph.

Floating A floated box can overlap boxes adjacent to it in the normal flow.

Floating This span is floated right. This is the first paragraph. This is the second paragraph.