CSS:Introduction

From virtualMV2015wiki
Jump to: navigation, search
 Home  CSS <

Introduction

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 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:

 <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.


Icon Objectives.png

Objectives

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

  • Describe the terms: style, cascading style sheet
  • Describe inline, embedded and linked styles

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

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>

Examples of how styles can be applied

Inline (directly in the tag)

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

Inline (inside a <span> tag or <div> tag)

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

 <p>Hello <span style="{color:red}">world</span>, Michael here</p>

when lots of tags are to have the style applied use the <div> tag

 <div style="{color:red}">
 <p>This is red</p>
 <p>This is also red</p>
 </div>

Embedded: In a style sheet in the web page

(placed in the <head> area

 <style type="text/css">
  h1 {
    color: #FF0000;
  }
 </style>

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

  • one.css contains:
 h2 {color: #0000FF;}
 .center {text-align: center}
  • this is linked in the head area of the web page
 <link rel="stylesheet" type="text/css" href="one.css" />
  • 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.
<h1 class="center">This heading will be center-aligned</h1>
 <p class="center">This paragraph will 	also be center-aligned.</p>

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 <head> 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

Icon 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/
  5. CSS Course Tutorials and Reference Guide Online (2011). Retrieved from http://www.developphp.com/list_css.php

CSS:Introduction. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 12, 2017, from http://www.virtualmv.com/wiki/index.php?title=CSS%3AIntroduction    (zotero)