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
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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 user’s 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. There’s 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) can’t work out which element is in focus (usability fail)
● Once you’ve got your CSS Reset that you like and will always use, keep it on hand and tweak it for each project.
● Remember – there’s 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 W3C’s free CSS validator. If you’re stuck and your layout isn’t 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 they’re declared, spanning the whole width of the available space. Inline elements take only as much
space as they need, and don’t force a new line after they’re 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 exa t pixel. Ho e er, e ause of a solute positioning’s 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
Related Documents
