CSS:Introduction

Introduction
In early HTML the &lt;font> tag was used to format the text in a web page. With the separation of content and style (particularly as XHTML becomes more common, and more devices need to display a web page) the font tag is being depricated (slowly removed). A style defines how an HTML element is to be displayed, and is attached to an HTML element. For example:

Will display the paragraph in green

Paragraph one in green

Styles can be saved in an external file (called the cascading style sheet, or css) and can be attached to multiple pages. This allows one style sheet to be applied to multiple pages in your site. Changing the style definition in the css will change the HTML elements of any attached pages.

Cascading style sheets
A style sheet is a set of formatting definitions that are used by a web page to display the web page data.

This means that you can customise the formatting of your web pages and this will be consistent throughout your web site. If at a later stage you want to change any of the formatting features, just changing the style sheet will cause the changes to appear in all the sites pages.


 * CSS stands for Cascading Style Sheets
 * Styles define how to display HTML elements
 * Styles are normally stored in Style Sheets
 * Styles were added to HTML 4.0 to solve a problem
 * External Style Sheets can save you a lot of work
 * External Style Sheets are stored in CSS files
 * Multiple style definitions will cascade into one

Brief history

 * 1996 CSS Level 1 published (1994 W3C became involved)
 * 1998 CSS Level 2 published
 * 2009 CSS Level 3 still under development
 * What's possible in CSS3 ( with HTML5 and Webkit ( 2011, Jun) http://www.sencha.com/products/animator/ )

Also refer to http://en.wikipedia.org/wiki/Cascading_Style_Sheets

Resources
Two of the main references for style sheets are;


 * Lie and Bos (1996), ( http://www.w3.org/TR/REC-CSS1-961217.html )Cascading Style Sheets, level 1
 * W3C (1998), ( http://www.w3.org/TR/REC-CSS2/ )Cascading Style Sheets, level 2,CSS2 Specification

Examples


 * Shea,(n.d.). ( http://www.csszengarden.com/ ) A selection of style sheets that can be applied to the same page.
 * Gube (2008), ( http://sixrevisions.com/css/20_websites_learn_master_css/ ) 20 sites to help you master CSS

What is a style

 * A style is the way a particular element can be displayed in a web page.
 * Styles may be applied to any element including and between the &lt;body> tag using the style attribute in the relevant element tag.
 * The style attribute can contain any number of Style properties.


 * The Style syntax is made up of three parts
 * selector {property:value}

For example,
 * you could set the contents of an &lt;h1> tag to have a blue color,


 * or the contents of a table (&lt;table>) to be in a smaller font that normal.


 * or how a colour can be changed of a paragraph, and a specific part can be enlarged. Note the part enlarged retains the paragraph style.

Examples of how styles can be applied
Inline (directly in the tag)

Inline (inside a &lt;span> tag or &lt;div> tag)

when only a part of a paragraph is to have a style applied

when lots of tags are to have the style applied use the &lt;div> tag

Embedded: In a style sheet in the web page

(placed in the &lt;head> area

Linked: In a style sheet (text document)linked to the web page


 * one.css contains:


 * this is linked in the head area of the web page


 * And all h2 tags in the web page will be blue (#0000FF), and you can use class="center" to any tag to center the contents, e.g.

Why cascading?
An important feature of a style sheet is it’s ability to cascade. That is any definitions will be applied successively.

So if a style for h1 occurs inline, embedded and linked. The linked will be applied first, then the embedded then the inline.

For example: if inline = blue, embedded = green and linked = red, h1 will display blue.


 * Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:


 * 1) Browser default
 * 2) External Style Sheet
 * 3) Internal Style Sheet (inside the tag)
 * 4) Inline Style (inside HTML element)

Products such as Expression Web, Dreamweaver, and Frontpage support the use of Style Sheets, and make it easy to work with the formatting options.

Resources

 * CSS Course Tutorials and Reference Guide Online (2011)