1. www.codez.in http://www.codez.in Basics of Smarajit Dasgupta

2. www.codez.in Cascading Style Sheets, or CSS, is the recommended way to control the presentation layer in a web document. Style declarations cascade down to elements from many origins. Inline, embedded and External CSS

3. www.codez.in  CSS1 – 1994  CSS2 – 1998  CSS2.1 came into being because some parts of CSS2 was very difficult to implement  CSS3 is still being developed, but already in use (will discuss in detail later)

4. www.codez.in Using import @import url(/style.css); Using link linked -> imported -> embedded -> inline

5. www.codez.in  Those 2 words, ‘block’ and ‘inline’ are explicit enough by themselves.. block: an element which forms a separate block, …,,,,,,,  inline: an element which stays inline with the rest of the content,,,,,, Inline-block CSS Box Model & CSS Box Model Hack  The box model applies to block-level elements.  2 hacks : clear: both; and overflow : hidden;  Border and outline difference

6. www.codez.in  Eric Meyer’s CSS reset http://meyerweb.com/eric/tools/css/reset/in dex.html http://meyerweb.com/eric/tools/css/reset/in dex.html  ID v Class Use class for any “label” that might show up more than once in a page, and id for anything that will appear only once. ------------------------------------------------------------------------------------------------------------------------------------ Padding, margin, units (em, px, %) Positioning: absolute, relative, fixed Techniques like : image replacement and CSS sprites Inheritence - process by which properties are passed from parent to child elements even though those properties have not been explicitly defined by other means.

7. www.codez.in  Some properties can be combined into shorthand notation  margin: 1em 2em 3em 4em; Tips to remember : Top, Right, Bottom, Left (TRouBLe) OR Read clockwise  background: #fff url(bg.png) no-repeat fixed right top; Is equivalent to: background-color: #fff; background-image: url(bg.png); background-repeat: no-repeat; background-attachment: fixed; background-position: right top;  Font & border shorthand

8. www.codez.in  Attributes (case-sensitive) input[type="submit"] { declarations } a[href] { declarations } div[class~="warning"] {  attribute selection of class declarations } div[class="warning"] img[src="/img/2010/mainlogo.png"]  You don’t need to class or ID it or anything else  img[alt~="figure"]  Any image whose alternate text contains the word “fi gure”  table[summary~="data"]  Any table whose summary text contains the word “data”  *[title~="2009"]  Any element whose title text contains the word “2009”  a[href="http://w3.org/"] and a[href*="w3.org"] {font-weight: bold;}

9. www.codez.in If you want to select based on a substring at the beginning of an attribute value, use this pattern: a[href^="http"] In order to select based on a substring at the end of an attribute value, use this pattern: a[href$=".pdf"] Other ideas of using attributes  a[href^="https"] Secure-server links  a[href^="mailto"] E-mail contact links  a[href^="aim"] AOL Instant Messenger service links  a[href$=".doc"] Microsoft Word documents  a[href$=".xls"] Microsoft Excel documents  a[href$=".zip"] Zip archives

10. www.codez.in  Partial Child selection div#main > div {border: 1px solid gray;}  SIBLING SELECTION h2 + p {margin-top: 0;}  remove the top margin from any paragraph that immediately follows an h1  h1 ~ ul {list-style-type: lower-alpha;}  Figure selection of elements that are following siblings, but not immediately adjacent following sibling

11. www.codez.in  IE9.js (a JS library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. ) http://code.google.com/p/ie7-js/

12. www.codez.in Specificity is a numeric representation of the “specific-ness” of a selector. Every element descriptor contributes 0,0,0,1. Every class, pseudo-class, or attribute descriptor contributes 0,0,1,0. Every ID descriptor contributes 0,1,0,0. ul li {font- style: normal;} html li {font- style: italic;} If two selectors have same specificity, the one written later will get preference. The proximity to the element being selected does not matter

13. www.codez.in  UNIVERSAL SELECTION * {color: blue;} /*specificity 0,0,0,0*/ div * {border: 1px solid red;} /*specificity 0,0,0,1*/ p#lead-in {font-weight: bold;} p[id="lead-in"] {font-weight: normal; font-style: italic;} Stretch bg image #img.source-image { width: 100%; position: absolute; top: 0; left: 0; z-index:-1; }

14. www.codez.in