Basics of Smarajit Dasgupta

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

 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)

Using url(/style.css); Using link linked -> imported -> embedded -> inline

 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

 Eric Meyer’s CSS reset dex.html 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.

 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

 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=" and a[href*="w3.org"] {font-weight: bold;}

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"] 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

 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

 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. )

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

 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; }