www.codez.in basics of smarajit dasgupta
TRANSCRIPT
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!