Scribd
Upload
52 views

CSS Fundamentals

This document provides resources for learning CSS basics, CSS3, and important HTML tags. It includes links to websites like w3schools for CSS tutorials, and Wikipedia pages that define HTML elements and their uses. Specific tags discussed include <article>, <aside>, <footer>, <header>, <menu>, and <nav>. The document also explains the differences between <div> and <span> tags and their default behaviors.

Uploaded by

Santosh Nayak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
52 views

CSS Fundamentals

This document provides resources for learning CSS basics, CSS3, and important HTML tags. It includes links to websites like w3schools for CSS tutorials, and Wikipedia pages that define HTML elements and their uses. Specific tags discussed include <article>, <aside>, <footer>, <header>, <menu>, and <nav>. The document also explains the differences between <div> and <span> tags and their default behaviors.

Uploaded by

Santosh Nayak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

For basics of CSS follow http://www.w3schools.com/css/default.

asp

for CSS3 http://www.w3schools.com/css3/default.asp

Then follow Linda videos by practicing examples which instructor follows

Below are just important points which are taken from Lynda.com - CSS vidoes-by James
Williamson adobe certified Instructor and other websites, you no need to visit all links, if your
interested to know more about particular topic then only you can visit the links.

00-Introduction
01-CSS Basics
0101-What is CSS
HTML controls the document structure;
CSS controls the documents' look and feel;
JavaScript controls behavior within the client, or browser if you prefer;
server-side languages such as PHP control processing and business logic; and
databases such as MySQL store content.

0102-Default browser styles

-Firefox-Preferences
https://support.mozilla.org/en-US/kb/reset-preferences-fix-problems
-Visual designer
focus of graphic design is on communicating in ideas and information

So no matter what the context, content does matter.

Staying focused or making sure that you are overriding defaults styles correctly and making
sure your accounting for your users' needs are very important aspects of web design, and
incredibly important considerations when planning and writing your CSS.

-website accessibility
tool :http://achecker.ca/checker/index.php
http://en.wikipedia.org/wiki/Web_accessibility
http://www.essentialaccessibility.com/download/
http://www.essentialaccessibility.com/download/User-Manual-May1-08.pdf
http://www.finance.gov.au/publications/wcag-2-implementation/


Document structure elements
<html>...</html>
<head>...</head>
<body>...</body>
Document head elements
<base>
<basefont> (deprecated)
<isindex> (deprecated)
<link>
<meta>
<object>...</object>
<script>...</script>
<style>...</style>
<title>...</title>

Document body elements
Block elements
Basic text
Lists
Other block elements
Inline elements
Anchor
Phrase elements
General
Computer phrase elements
Presentation
Span
Other inline elements

In visual browsers, displayable elements can be rendered as either block or inline. While all elements are
part of the document sequence, block elements appear within their parent elements:
as rectangular objects which do not break across lines;
with block margins, width and height properties which can be set independently of the
surrounding elements.
Conversely, inline elements are treated as part of the flow of document text; they cannot have margins,
width or height set, and do break across lines.
Block elements
Block elements, or block-level elements, have a rectangular structure. By default, these elements will
span the entire width of its parent element, and will thus not allow any other element to occupy the same
horizontal space as it is placed on.
The rectangular structure of a block element is often referred to as the box model, and is made up of
several parts. Each element contains the following:
The content of an element is the actual text (or other media) placed between the opening and
closing tags of an element.
The padding of an element is the space around that content, which still form part of said element.
Padding is physically part of an element, and should not be used to create white space between
two elements. Any background style assigned to the element, such as a background image or
color, will be visible within the padding. Increasing the size of an element's padding increases the
space this element will take up.
The border of an element is the absolute end of an element, and spans the circumference of that
element. The thickness of a border increases the size of an element.
The margin of an element is the white-space that surrounds an element. The content, padding
and border of any other element will not be allowed to enter this area, unless forced to do so by
some advanced CSS placement. Using most standard DTDs, margins on the left and right of
different elements will push each other away. Margins on the top or bottom of an element, on the
other hand, will not stack, or will inter mingle. This means that the white-space between these
elements will be as big as the larger margin between them.
The above section refers only to the detailed implementation of CSS rendering and has no relevance to
HTML elements themselves.
Basic text
<p>...</p>
<h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5>
<h6>...</h6>
Lists
<dl>...</dl>
<dt>...</dt>
<dd>...</dd>
<ol>...</ol>
<ul>...</ul>
<li>...</li>
<dir>...</dir> (deprecated)
Other block elements
<address>...</address>
<blockquote>...</blockquote>
<center>...</center>
<del>...</del>
<div>...</div>
Main article: Span and div
<hr>
<ins>...</ins>
<noscript>...</noscript>
<pre>...</pre>
<script>...</script>
Inline elements
Inline elements cannot be placed directly inside the body element; they must be wholly nested within
block-level elements.
Anchor <a>...</a>
Phrase elements
General
<abbr>...</abbr>
<acronym>...</acronym> (deprecated)
<dfn>...</dfn>
<em>...</em>
<strong>...</strong>
Computer phrase elements
These elements are useful primarily for documenting computer code development and user
interaction through differentiation of source code (<code>), source code variables (<var>), user
input (<kbd>), and terminal output (<samp>).
<code>...</code>
<samp>...</samp>
<kbd>...</kbd>
<var>...</var>
Presentation
As visual presentational markup only applies directly to visual browsers, its use is discouraged.
Style sheets should be used instead. Several of these elements are deprecated or invalid in
HTML 4 / XHTML 1.0, and the remainder are invalid in the current draft of XHTML 2.0. The
current draft of HTML 5, however, re-includes <b>, <i>, <u>, and <small>, assigning new
semantic meaning to each. In an HTML 5 document, the use of these elements is no longer
discouraged, provided that it is semantically correct.
<b>...</b>
<i>...</i>
<u>...</u>
<small>...</small>
<s>...</s>
<big>...</big>
<strike>...</strike>
<tt>...</tt>
<font>...</font>
Span
<span>...</span>
Main article: Span and div
An inline logical division. A generic element with no semantic meaning used to distinguish a document
section, usually for purposes such as presentation or behaviour controlled by style sheets or DOM
calls.
Other inline elements
<br>
<bdo>...</bdo>
<cite>...</cite>
<del>...</del>
<ins>...</ins>
Note, both <ins> and <del> elements may also be used as block elements: containing other
block and inline elements. However, these elements must still remain wholly within their parent
element to maintain a well-formed HTML document. For example deleting text from the middle of
one paragraph across several other paragraphs and ending in a final paragraph would need to use
three separate <del> elements. Two <del> elements would be required as inline element to
indicate the deletion of text in the first and last paragraphs, and a third, used as a block element,
to indicate the deletion in the intervening paragraphs.
<q>...</q>
Note: Lengthy inline quotations may be displayed as indented blocks (as block-quote) using style
sheets. For example, with a suitable CSS rule associated with q.lengthy:
<q class="lengthy">An inline quotation of significant length (say 25 words, for example)
goes here...</q>
<script>...</script>
<sub>...</sub> and <sup>...</sup>
Mark
subscript
or
superscript
text. (Equivalent CSS: {vertical-align: sub} or {vertical-align: super}.)
<wbr>
An optional line break.
Was widely used (and supported by all major browsers) for years despite being non-standard until
finally being standardized in HTML 5.
Images and objects
<applet>...</applet> (deprecated)
<area>
<img>
<map>...</map>
<object>...</object>
<param>
Previously obsolete but added back in HTML 5
<embed>...</embed>
<menu>...</menu>

s: http://en.wikipedia.org/wiki/HTML_element
http://en.wikipedia.org/wiki/Block-level_element#Block_elements

Span and div
Differences and default behavior
There is one difference between div and span. In standard HTML, a div is a block-level element
whereas a span is an inline element. The div block visually isolates a section of a document on the page,
in the same way as a paragraph. The span element contains a piece of information inline with the
surrounding text. In practice, even this feature can be changed by the use of Cascading Style Sheets
(CSS).
S: http://en.wikipedia.org/wiki/Span_and_div

Important Tags

article tag
S: http://www.w3schools.com/tags/tag_article.asp http://html5doctor.com/the-article-element/
http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-
soon-be-using/ ****

aside tag
S: http://www.w3schools.com/tags/tag_aside.asp
http://html5doctor.com/understanding-aside/
Example : http://www.quackit.com/html_5/tags/html_aside_tag.cfm
http://www.codekhan.com/2012/01/how-to-use-aside-tag-in-html5.html

footer tag
S: http://www.w3schools.com/tags/tag_footer.asp
http://www.w3schools.com/tags/tag_footer.asp
http://html5doctor.com/the-footer-element-update/
http://kb.mailchimp.com/article/html-code-for-footer-tags

header tag
S: http://www.w3schools.com/tags/tag_header.asp
http://html5doctor.com/the-header-element/
http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-
tags ***

menu tag http://www.w3schools.com/tags/tag_menu.asp not supported yet by any browsers
nav tag
S: http://www.w3schools.com/tags/tag_nav.asp
http://www.quackit.com/html_5/tags/html_nav_tag.cfm **
http://html5doctor.com/nav-element/ ****
http://stackoverflow.com/questions/7002854/html5-nav-tag-proper-usage ***
http://stackoverflow.com/questions/5178761/html5-nav-tag-correct-usage check again

section tag
S: http://www.w3schools.com/tags/tag_section.asp
http://stackoverflow.com/questions/7183132/how-to-correctly-use-section-tag-in-html5 ***
http://www.quackit.com/html_5/tags/html_section_tag.cfm
http://html5doctor.com/the-section-element/ **

https://developer.mozilla.org/en-
US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document ******
http://www.impressivewebs.com/html5-section/
http://webdesign.about.com/od/html5tags/p/bltags_section.htm
http://orderedlist.com/resources/html-css/structural-tags-in-html5/

<!--[if lt IE 9]>
<script>
document.createElement("header" );
document.createElement("footer" );
document.createElement("section");
document.createElement("aside" );
document.createElement("nav" );
document.createElement("article");
document.createElement("hgroup" );
document.createElement("time" );
</script>
<noscript>
<strong>Warning !</strong>
Because your browser does not support HTML5, some elements are simulated
using JScript.
Unfortunately your browser has disabled scripting. Please enable it in
order to display this page.
</noscript>
<![endif]-->
span tag
http://www.w3schools.com/tags/tag_span.asp
http://en.wikipedia.org/wiki/Span_and_div
http://www.htmlgoodies.com/tutorials/html_401/article.php/3479661/HTML-40-SPAN-Tag.htm
http://stackoverflow.com/questions/4153422/difference-between-div-and-span-tag
Example : http://learnwebdesignonline.com/span-div
http://webdesign.about.com/od/htmltags/p/aaspantag.htm
http://www.w3schools.com/tags/tag_div.asp
0103-Syntax
Rule:
1.Selector (can be grouped together) Ex:-p,h1-elements
2.Declaration{ } :-formatting instruction -property:value

rule: property :value;

There are also certain syntax rules, such as shorthand notation and
Font Properties
/* font properties with default values */
font-variant: normal
line-height: normal
font-family: varies
font-weight: normal
font-style: normal
font-size: medium
/* shorthand notation for font properties */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large);
line-height: normal || (number+unit);
font-family:name,"more names";


/* EXAMPLES */
font: 14px Georgia, serif;
font: 14px/1.4 Georgia, serif;
font: italic lighter 14px/1.4 Georgia, serif;
font: italic small-caps lighter 14px/1.4 Georgia, serif;
List Properties
/* list properties with default values */
list-style-position: outside;
list-style-image: none;
list-style-type: disc;





/* shorthand notation for list properties */
list-style: [list-style-type] [list-style-position] [list-style-image];
list-style-type: (numerous);
list-style-position:inside || outside;
list-style-image:url(image.png);

/* EXAMPLES */
list-style: none;
list-style: disc;
list-style: disc outside;
list-style: disc outside url(bg.png);
Background Properties
/* background properties with default values */
background-attachment: scroll;
background-color: transparent;
background-position: top left;
background-repeat: repeat;
background-image: none;
/* shorthand notation for background properties */
background: [background-color] [background-image] [background-repeat] [background-attachment]
[background-position];
background-color: color || #hex || (rgb / % || 0-255);
background-image:url(URI);
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-position: X Y || (top||bottom||center) (left||right||center);

/* EXAMPLES */
background: #777;
background: url(http://domain.tld/images/bg.png) 0 0;
background: #777 url(http://domain.tld/images/bg.png) repeat-x 0 0;
background: #777 url(http://domain.tld/images/bg.png) repeat-x fixed 0 0;
Border and Outline Properties
Borders
/* border properties with default values */
border-width: none;
border-style: none;
border-color: none;
/* shorthand notation for border properties */
border: [border-width] [border-style] [border-color];
border-width: number+unit;
border-style: (numerous);
border-color: color || #hex || (rgb / % || 0-255);
/* EXAMPLES */
border: 1px solid #111;
border: 2px dotted #222;
border: 3px dashed #333;
You can also specify border properties for different sides of the box:
border-bottom: 1px solid #777;
border-right: 2px solid #111;
border-left: 2px solid #111;
border-top: 1px solid #777;
Outlines
/* outline properties */
outline-width: thin;
outline-style: dotted;
outline-color: inherit;
/* shorthand notation for outline properties */
outline: [outline-width] [outline-style] [outline-color];
outline-width: number+unit;
outline-style: (numerous);
outline-color: color || #hex || (rgb / % || 0-255);
/* EXAMPLES */
outline: 1px solid #111;
outline: 2px dotted #222;
outline: 3px dashed #333;
/* transition properties with default values */
transition-property: none;
transition-duration: none;
transition-delay: none;
transition-timing-function: none;
/* shorthand notation for transition properties */
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

/* EXAMPLES */
transition: opacity 3s ease 1s;
transition: opacity 3s ease-in 1s;
transition: opacity 3s ease-out 1s;
transition: opacity 3s ease-in-out 1s;
MARGIN AND PADDING
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
S:http://perishablepress.com/top-5-css-shorthand-properties/
http://www.dustindiaz.com/css-shorthand/
Colours
#000000 becomes #000, #336699 becomes #369.

Pseudo-element and Pseudo-classes
Pseudo-classes are used in CSS selectors to permit formatting based on information that is outside the
document tree. An often-used example of a pseudo-class is :hover, which identifies content only when
the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a
selector as in a:hover or #elementid:hover. A pseudo-class classifies document elements, such
as :link or:visited, whereas a pseudo-element makes a selection that may consist of partial
elements, such as :first-line or :first-letter.

The syntax of pseudo-elements:
selector:pseudo-element {property:value;}
Examples:
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

CSS classes can also be used with pseudo-elements:
selector.class:pseudo-element {property:value;}

Examples:
p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

CSS3 ::selection Selector
The ::selection selector matches the portion of an element that is selected by a user.
Only a few CSS properties can be applied to ::selection: color, background, cursor, and outline.

Example:

::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}



S:http://www.w3schools.com/css/css_pseudo_elements.asp
http://css-tricks.com/pseudo-element-roundup/

http://www.w3schools.com/cssref/sel_selection.asp



Inline rules

Importing a CSS file from within CSS
@import "newstyles.css";
nicely commented CSS syntax websites


0104-Basic selector types

Type Selector
If the selector parameter does not start with a period, the returned CSS StyleDeclaration is a type
selector and applies to all instances of that type. For example, the type selector Button applies to all
instances of Button and its subclasses
Examples of type selector
Button
{
color: #FFFFFF
cornerRadius: 10;
}
The above style applied is reflected in all the instances of the Button
Important things to note about type selector
When you set a new CSSStyleDeclaration on a type selector, you are replacing the entire existing type
selector with your own selector. All style properties that you do not explicitly define in the new
CSSStyleDeclaration are set to null. This can remove skins, margins, and other properties that are
defined in the defaults.css file or other style sheet that you may have applied already.
Global/ Universal Selector
The global selector is similar to a type selector and does not start with a period
Global style applies to all controls.
StyleManager.getStyleDeclaration(global).
setStyle(fontStyle,italic);
S: http://flexrays.wordpress.com/2007/07/10/type-selectors-class-selectors-and-global-
selectors/

http://css-tricks.com/things-it-might-be-funuseful-to-try-the-universal-selector-on/

Element selectors

http://css-tricks.com/child-and-sibling-selectors/ ***

http://oreilly.com/css-html/excerpts/9780596155940/css21-selectors-pseudo-classes-and-
pseudo-elements.html

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

http://www.blooberry.com/indexdot/css/syntax/selectors/element.htm

http://css.maxdesign.com.au/selectutorial/

http://www.w3.org/TR/CSS2/selector.html

Descendent selectors allow you to target an element based on where it's found within another
element.You simply string the selectors together, separating them with whitespace. The parent
selectors are added first, followed by each successive nested selector.

For example,
div p span {color:blue}

in this example the browser would find any span elements inside of paragraph elements which
were also inside of div elements.


grouping selectors
http://www.w3schools.com/css/css_grouping_nesting.asp

Global attributes and event attributes [] *****
Tags valid as content [] *****
Tags valid as container [] *****

0105-How CSS works with HTML structure
classes and IDs should be descriptive

blockquote??

the best piece of advice I can give you is to write your HTML so that you're giving clean, efficient
structure to your content. As best you can, try to structure the code so that you're adding
meaning to the content without even thinking about the styling.


0106-Authoring options

External,embedded,in-line (used in html emails)

plan overall site strategy

0107-How browsers apply styles


rules of style rendering??
CSS inheritance

Specificity

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

http://css-tricks.com/specifics-on-css-specificity/

http://www.htmldog.com/guides/css/intermediate/specificity/




0108-Browser rendering differences
Rendering engines
web standards project,
w3c, mozilla foundation,

differences in CSS rendering from one browsers and one device to another


02-CSS Specifications
0201-A brief history of CSS
modularization of CSS
future of CSS

www.w3.org/TR/css3-roadmap

[] current state of CSS www.w3.org/style/css/current-work

exploring CSS specifications
reading CSS specifications
Checking browser support

www.caniuse.com
quirksmode.org/compatability.html

en.wikipedia.org/wiki/comparision_of_layout_engines_css


positioniseverything.net

developer.mozilla.org/en/mozilla_css_support_chart

developer.apple.com safari css

blog.chromium.org

opera.com/docs/specs/

msdn.microsoft.com/en-us/library/ css



03-Common CSS Concepts

0301-Working with fonts
-systems fonts
-web fonts
font-family:arial,Helvetica,Verdana,sans-serif

@font-face generators []

0302-Formatting text
-fixed units vs relative units
-font-variant
-font-transform
-text-align and text-indent
letter-spacing
line-height??

OpenType support []

0303-What is the box model []

0304-Margins and padding

margins(space b/w elements) and padding???

0305-Borders
border??/
outline(on entire element) vs border??
100% width ??

0306-Backgrounds

0307-Color

RGBA and HSLA??

0308-Common units of measurement
0309-Element positioning

normal flow
element floating
absolute positioning

Position

static,relative,absolute,fixed,inherit
z-index ??

0310-Floats


0311-Basic layout concepts

04-CSS Resources


blueprintcss.org

52framework.com

960.gs




yui 2 framework
developer.yahoo.com/yui/grids

css boilerplate

baselinecss.com framework for advanvanced typography

css preprocessors

lesscss.org
saas-lang.com

turbine
switchcss

css cacheer

pornel.net/css

pcss

Editors

improvingcode/snapcss


cofeecup

Online tools

css3generator.com
css3.me
css3please.com
layerstyle.org
css3.mikeplate.com
css3maker.com
css3g
colorzilla.com
westciv.com/tools
validator.w3.org
csslint.net

web-developer handbook
reference.sitepoint.com/css better specifications
css-tricks.com
lynda.com
simpleprimate.com

@jameswillweb

span (inline level) vs div(block level)

color picker

skip navigational links

keyboard accessable links

w3.org/TR/wai-aria/roles

webaim.org/techniques/hypertext

role=

block level links

<section>

pseudo classes

focus

outline

vischeck
color vision testing - colorblindness

global style css

attribute selectors??
ex: a [href] { }

fontsquirrel.com/fonts/modern-pictograms --. for symbols and icon fonts


generated content??

w3.org/TR/selectors/

what is difference between section and div and nav??

display:block,inline,inline-block.....css

css best techniques []

inline and float ??

white-space:nowrap;

border radius
max-height:

cursor

box-shadow
gradient css

colorzilla.com/gradient-editor

sprites

block elements and inline elements??

http://www.w3schools.com/cssref/pr_gen_counter-reset.asp


-------------------------------------------------------------------------------------------------------------------------
CSS reset clearfix http://necolas.github.io/normalize.css/ ,http://html5boilerplate.com/ ,
http://modernizr.com/,

reset, normalize,modernizr,boilerplate,
Normalize.css:A modern, HTML5-ready alternative to CSS resets

Modernizr : is a JavaScript library that detects HTML5 and CSS3 features
in the users browser.

http://www.cssreset.com/what-is-a-css-reset/

http://www.cssreset.com/which-css-reset-should-i-use/

http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/

http://www.cssreset.com/

http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ use it ****

http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

http://css-tricks.com/poll-results-what-css-reset-do-you-use/

http://cssresetr.com/ ****
http://www.cssreset.com/scripts/eric-meyer-reset-css/ *****

http://html5boilerplate.com/ official ******

http://www.1stwebdesigner.com/design/snippets-html5-boilerplate/ ***

http://davidwalsh.name/html5-boilerplate

http://net.tutsplus.com/tutorials/html-css-techniques/the-official-guide-to-html5-boilerplate/

http://mashable.com/2010/09/01/html5-boilerplate-guide/ **********

http://necolas.github.io/normalize.css/

https://gist.github.com/paulirish/526168

http://www.cssreset.com/scripts/universal-selector-css-reset/ ****

difference between border and outline

Top Tips for CSS Reset Success
Find a CSS Reset that works for you, and customise it.
Avoid using the * (universal selector) anywhere in your CSS Reset. Theres just no
excuse.
If you set outline:0 anywhere (esp. on links and form elements), you need to remember
to redefine :focus styles, otherwise people who tab through things (like me) cant work
out which element is in focus (usability fail)
Once youve got your CSS Reset that you like and will always use, keep it on hand and
tweak it for each project.
Remember theres no point setting body { line-height:0 } in the reset, then body { line-
height:1.5 } later on, when you could have just set 1.5 to begin with.
1. Use margin instead of left, top, bottom and right individual elements.
1. Make use of W3Cs free CSS validator. If youre stuck and your layout isnt doing
what you want it to do, the CSS validator will be a big help in pointing out errors.


1. Save A Template Library
Also, it is a good practice to add the HTML code for the swatch colors at the top of the
code as well. This can save the person doing editing and changes a lot of time because
they will not have to figure out the colors' code. All they will need to do is scroll up to the
top and copy it.


comment, simply add /* behind the comment, and */ to close it, like so:
1. Understand the Difference Between Block vs. Inline Elements
Block elements are elements that naturally clear each line after theyre declared,
spanning the whole width of the available space. Inline elements take only as much
space as they need, and dont force a new line after theyre used.
Here are the lists of elements that are either inline or block:
span, a, strong, em, img, br, input, abbr, acronym
And the block elements:
div, h1...h6, p, ul, li, table, blockquote, pre, form



can create generic classes and add them to the IDs or other CSS classes

Use Margin: 0 auto to Center Layouts


float ????


1. Use Absolute Positioning Sparingly
Absolute positioning is a handy aspect of CSS that allows you to define where exactly an element should
e positioned on a page to the exat pixel. Hoeer, eause of asolute positionings disregard for
other elements on the page, the layouts can get quite hairy if there are multiple absolutely positioned
elements running around the layout.
Position static is same as no position at all.
Absolute element should be placed inside the relatively positioned element.
By using absolute position we can place object anywhere on html page.
Use margin:0 and padding:0 for most of the elements.
Use float for positioning the elements one after the other.
Absolute/relative positioning always based on the parent element.
To position any element use offsets left, right, top, bottom.
If position is relative it is positioned relative to normal flow of the document. Position is
relative to where it could have been in the normal flow.
Position absolute takes your content out of normal flow and create new instance of
normal flow.
When we want to use absolute positioning, create a parent element with position
relative.
http://designshack.net/articles/css/the-lowdown-on-absolute-vs-relative-positioning/
http://www.barelyfitz.com/screencast/html-training/css/positioning/ ****

display:


for practice

http://designshack.net/articles/css/715-awesomely-simple-and-free-css-layouts/

http://www.maxdesign.com.au/articles/process/

http://learnlayout.com/position.html


https://github.com/sebastienwindal/CSS3Anim

[] display: inline-block;

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

http://learnlayout.com/display.html ****



overflow:auto

You might also like