www.codez.in basics of smarajit dasgupta

www.codez.in

http://www.codez.in

HTML and CSSHTML and CSSBasics of

Smarajit Dasgupta

www.codez.in

What is CSS ?What is CSS ?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

www.codez.in

History of CSSHistory of CSS

CSS1 – 1994CSS2 – 1998CSS2.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)

www.codez.in

Referencing external CSSReferencing external CSS

Using import

<style type="text/css">

@import url(/style.css);

</style>

Using link

<link rel="stylesheet" type="text/css" href="/style.css” media="screen“ />

linked -> imported -> embedded -> inline

www.codez.in

Inline and block elementsInline and block elements

Those 2 words, ‘block’ and ‘inline’ are explicit enough by themselves..

block: an element which forms a separate block

<div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>

inline: an element which stays inline with the rest of the content

<span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>

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

www.codez.in

Introduction to CSSIntroduction to CSS

Eric Meyer’s CSS reset http://meyerweb.com/eric/tools/css/reset/index.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.

www.codez.in

ShorthandsShorthands

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

www.codez.in

Tips for advanced useTips for advanced use

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

www.codez.in

Tips for advanced useTips for advanced use

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

www.codez.in

Tips for advanced useTips for advanced use

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

www.codez.in

Tips for advanced useTips for advanced use

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/

<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->

www.codez.in

SpecificitySpecificitySpecificity 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

www.codez.in

Tips for advanced useTips for advanced use

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;

}

www.codez.in

Thank You!Thank You!