CSS Tutorial

CSS: Cascading Style Sheets
Simple design language - used "styling" or making pages presentable
Advantages:

Separates presentation from content or structure
Saves time
Pages load faster
Facilitates maintenance
Multi-Device Compatibility
Web standards

CSS1 (1996): Simple visual formatting model for HTML tags
CSS2 (1998): Adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables
CSS3 (2011, first "formal" recommendation): Most modules are level 3 (e.g., Media Queries, Namespaces, Selectors Level 3, Color, etc.) they build on things from CSS 2.1. http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_3

CSS Employment

Four methods of CSS application (in order of precedence):

inline (internal)
embed or document-level (internal)
@import (external)
link (external)

CSS Comments: Many times you may need to put additional comments in your style sheet blocks.
So it is very easy to comment any part in style sheet. You simply put your comments inside /*.....this is a comment in style sheet.....*/. You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.

CSS Syntax – Style Rules

CSS style rules: interpreted by browser, applied to associated elements in document.
Style rule comprises three parts:

Selector: HTML tag to which style will be applied, e.g., <h1> or <p> etc.
Property: similar to HTML attributes, e.g., color, border, width, etc.
Value: Values are assigned to properties, e.g., white or #FFFFF (or, #FFF shorthand), etc.

Syntax: selector { property: value }

Example: Table border

/* selector example: table; property: border; value: 1px dashed #cff */

table {border: 1px dashed #cff; }

Testing child elements.

Type or Element Selector

Same as above.
Example: color of black assigned to all h1 elements

h1 { color: #000; }

Universal Selector

Universal selector applies styles to all element types.
Example: color of black assigned to all document elements

* { color: #000000; }

Descendant Selector

Descendant selector applies styles to an element that lies inside another element.
Example: color of black assigned to <em>element, only w/in <ul>element

ul em { color: #000000; }

Class Selector

Class selector applies styles based upon a defined class, which begin with a period (.).
Example: color of black assigned to all elements using myClass attribute

.myClass { color: #000000; }

/* apply class definition in html element */
<p class="myClass">All text would be in black.</p>

Example: color of black assigned to all <h1>elements using myClass attribute

h1.myClass { color: #000000; }

/* apply class definition in html element */
<h1 class="myClass">All text would be in black.</h1>

Example: apply more than one class selector to an element

.myClass { color: #000000; }
.yourClass { border: 1px dashed #000000; }

/* then, apply class definition in html element */
<p class="myClass yourClass">All text would be in black, 
with a one-pixel black dashed border.</p>

ID Selector

ID selector applies styles based upon a defined ID, which begin with a pound (#) sign.
Note: (legally) IDs should be unique per file, that is, only be applied *once* w/in each HTML file.

Example: color of black assigned to all elements using myID attribute (though, only *once* per file)

#myID { color: #000000; }

/* apply ID definition in html element */
<p id="myID">All text would be in black.</p>

Example: color of black assigned to all <h1>elements using myID attribute (though, only *once* per file)

h1#myClass { color: #000000; }

/* apply ID definition in html element */
<h1 id="myID">All text would be in black.</h1>

Child Selector

Similar to descendant selectors. However, the styles will apply *only* if they are a direct child of an element. That is, the styles will *not* apply if placed w/in other elements.

Example: color of black assigned to all <p>elements *IF* they are a direct child of <body> element; but, *not* if they are placed w/in other elements like <div> or <table>

body > p { color: #000000; }

Attribute Selector

Attribute selector applies styles to HTML elements with particular attributes.

Example: color of black assigned to all input elements that have a type attribute with a value of text; though, all other input elements would be unaffected; for example <input type="submit" />

input[type="text"]{ color: #000000; }

Multiple Style Rules

Multiple style rules for a single element. It's best to use separate lines for legibility.

Example: multiple style rules applied to h1 element

h1 
{ 
  color: #ccf; 
  font-weight: normal; 
  letter-spacing: .2em; 
  margin-bottom: 2em; 
  text-transform: small-caps; 
}

Grouping Selector

Grouping selector applies styles to multiple selectors, separated by commas.

Example: multiple style rules applied to h1, h2, and h3 elements (order of list is not important)

h1, h2, h3 
{ 
  color: #ccf; 
  font-weight: normal; 
  letter-spacing: .2em; 
  margin-bottom: 2em; 
  text-transform: small-caps; 
}

Example: combine class selectors

.content, .footer, .extra 
{ 
  position: absolute; 
  left: 510px; 
  width: 200px;
}