VirtualMV/CSS

From WikiEducator
Jump to: navigation, search



Overview

VmvIcon Objectives.png

By the end of this page you will be able to:

  • Describe the Basics of CSS.

In early HTML the <font> tag was used to format the text in a web page. With the separation of content and style (particularly as more devices need to display a web page) the font tag is being depricated (slowly removed), and instead a style attached to an HTML element and define how it is to be displayed. For example:

 <p style="color: #00FF00">Paragraph one in green</p>

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.


VmvIcon Objectives.png

By the end of this page you will be able to:

  • Describe the terms: style, cascading style sheet

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

Demonstration of capability

Brief history

  • 1996 CSS Level 1 published (1994 W3C became involved)
  • 1998 CSS Level 2 published
  • 2010 CSS Level 3 is divided in several separate documents called "modules", and add new capabilities or extend CSS2 features. Four modules have been published (2011: Color; Selectors L3; Namespaces and 2012: Media Queries)
  • 2013 CSS4 Level 4 is split into separate modules - however collectively they are referred to as CSS4.

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

Resources

Two of the main references for style sheets are;

Examples

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 <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 <h1> tag to have a blue color,
h1 {color: blue};
  • or the contents of a table (<table>) to be in a smaller font that normal.
table {font-size: small;}
  • 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.
<p style="background-color:#F6F6FA; color:#860BA8">Web pages, <b style="font-size:1.2em">the final frontier</b> these are the voyages of the Web Developer!</p>

VmvIcon References.png References

  1. Lie, H. W. & Bos B. (1996). Cascading Style Sheets, level 1, w3C. Retrieved September 18, 2006 from http://www.w3.org/TR/REC-CSS1-961217.html
  2. w3C (1998) Cascading Style Sheets, level 2,CSS2 Specification. Eds. B. Bos, H.W.Lie, C. Liley & I. Jacobs. Retrieved September 18, 2006 from http://www.w3.org/TR/REC-CSS2/
  3. Shea, D. (n.d.) ss Zen Garden: The Beauty in CSS Design. Retrieved November 3, 2008 from http://www.csszengarden.com/
  4. Gube, J. (2008) 20 sites to help you master CSS. Retrieved August 30, 2008 from http://sixrevisions.com/css/20_websites_learn_master_css/

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/CSS. (2017). In WikiEducator/VirtualMV wiki. Retrieved May 27, 2017, from http://wikieducator.org/VirtualMV/CSS    (zotero)