1. Using the CSS Prepared by: Sanjay Raval | http:// www.usableweb.in /
2. What is CSS? CSS is a language that’s used to define the formatting applied to a Website, including colors, background images, typefaces (fonts), margins, and indentation. Let’s look at a basic example to see how this is done. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>A Simple Page</title> <style type="text/css"> h1, h2 { font-family: sans-serif; color: #3366CC; } </style> </head> <body> <h1>First Title</h1><p>…</p> <h2>Second Title</h2><p>…</p> <h2>Third Title</h2><p>…</p> </body> </html>
3.
4. Using CSS in HTML Embedded Styles In this approach, you can declare any number of CSS styles by placing them between the opening and closing <style> tags, as follows: While it’s nice and simple, the <style>tag has one major disadvantage: if you want to use a particular set of styles throughout your site, you’ll have to repeat those style definitions within the style element at the top of every one of your site’s pages. <style type="text/css"> CSS Styles here </style>
5. Using CSS in HTML External Style Sheets An external style sheet is a file (usually given a .css filename) that contains a web site’s CSS styles, keeping them separate from any one web page. Multiple pages can link to the same .css file, and any changes you make to the style definitions in that file will affect all the pages that link to it. To link a document to an external style sheet (say, styles.css), we simply place a link element in the document’s header: <link rel="stylesheet" type="text/css" href="styles.css" />
6.
7. CSS Selectors Type Selectors By naming a particular HTML element, you can apply a style rule to every occurrence of that element in the document. For example, the following style rule might be used to set the default font for a web site: p, td, th, div, dl, ul, ol { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color: #000000; }
8. CSS Selectors Class Selectors CSS classes comes in when you want to assign different styles to identical elements that occur in different places within your document . Consider the following style, which turns all the paragraph text on a page blue: Great! But what would happen if you had a sidebar on your page with a blue background? You wouldn’t want the text in the sidebar to display in blue as well—then it would be invisible. What you need to do is define a class for your sidebar text, then assign a CSS style to that class. To create a paragraph of the sidebarclass, first add a classattribute to the opening tag: p { color: #0000FF; } <p class="sidebar"> This text will be white, as specified by the CSS style definition below. </p>
9. CSS Selectors Class Selectors Now we can write the style for this class: This second rule uses a class selector to indicate that the style should be applied to any element of the sidebar class. The period indicates that we’re naming a class—not an HTML element. p { color: #0000FF; } .sidebar { color: #FFFFFF; }
17. Redundant Units for Zero Values The following code doesn't need the unit specified if the value is zero. It can be written instead like this: Don't waste bytes by adding units such as px, pt, em, etc, when the value is zero. The only reason to do so is when you want to change the value quickly later on. Otherwise declaring the unit is meaningless. Zero pixels is the same as zero points. padding:0px 0px 5px 0px; padding:0 0 5px 0;
18.
19. Excess Whitespace Usually we have tendency to include whitespace in the code to make it readable. It'll only make the stylesheet bigger, meaning the bandwidth usage will be higher. Of course it's wise to leave some space in to keep it readable.
