CSS

Written by Larry Gray on . Posted in CSS

CSS Explained

What is CSS?

CSS stands for Cascading Style Sheets. CSS is a style sheet language which is used to enhance or describe how a document written using a markup language is presented on a web browser. Basically HTML or any other markup language should contain the content for the web page and CSS would do all the formatting and layout control. So all the fonts, positioning and decorating of all the elements on a web page is done using Cascading Style Sheets.

.xouter{
width:80%;
margin-left:9%;
border:1px solid #000;
}
.xleftcol
{
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol
{
float: left;
width: 34%;
background:#eff2df;
}
.xrightcol
{
float:left;
width: 33%;
background:#d2da9c;
}

Even though CSS is used more commonly with markup languages such as HTML and XHTML, it can  be used with XML documents as well. CSS is also applied in rendering of speech and certain other types of media.

CSS is mainly used to bring webpages, web applications and web user interfaces from the state of a basic content page to something visually engaging for the users by maintaining the look and feel of the page. In addition to the common use of CSS on the web, it's used in designing mobile user interfaces as well.

History of CSS

The invention of CSS took place in the recent past. To be precise, it was proposed or invented on the 10th of October, 1994 by Hakon Wium Lie who was working at CERN at the time. Although number of other style sheet languages were also proposed during this time, the W3C (World Wide Web Consortium) recommended and released a recommendation for CSS as CSS1 in 1996.

Note: CSS is currently maintained by the W3C CSS Working Group. This group is responsible for releasing recommendations after agreeing on a CSS specification.

Versions of CSS

The first version of CSS, CSS1 (Cascading Style Sheets Level 1)as mentioned earlier, was released in 1996. By 1998, the second CSS specification was released by W3C as CSS2 which was developed based on CSS and had improved features such as the support for media-specific style sheets.

CSS3

The version of CSS in use at the present is CSS3 which was released in June, 1999. CSS3 is also built on the previous versions of the language. The specialization in CSS3 was its division into documentations known as Modules.

CSS Modules

  • Box Model
  • Background and Borders
  • Text Effects
  • Selectors
  • Image Values and Replaced Contet
  • 2D/3D Transformations
  • User Interface
  • Multiple Column Layout
  • Animations

Syntax and Usage

HTML formatting can be controlled by other types of style sheets rather than CSS. But since CSS is the W3C recommended standard style sheet language, it's best to give priority to CSS as the style sheet language for all your web sites and applications.

Applying CSS to your webpage can be done in several ways. CSS can be,
  • located in a separate CSS file for the entire web site.
  • located in multiple CSS files for specific pages.
  • located within a web page itself as a CSS section or within the html tags.
The 3 basic methods of CSS application is as follows.
  1. External
  2. Internal
  3. Inline
Note: It's not the best practice to use inline CSS. In this way you will only need to edit one or two css files in order to change the format and layout for a web site with hundreds of pages. You can see the efficiency in editing and maintenance of this vs using any formatting and layout control within the HTML. There is a CSS Level 3 but CSS Level 3 as of this writing is beginning to be implemented in all browsers except IE. There are web sites with tables to show each major browser vendors and the CSS features supported for various levels of CSS. For more info see w3c.org

Meaning of Cascading

Cascading in CSS means that it is defined in a parent child type relationship. Inner portions of web pages inherit CSS sytling from their containing parent portions. Html elements inherit from parent elements and so on. Children can add to or override parent formatting. 'div' tags 'id' and 'class' attibutes play inportant roles in all of this. There are varying way to enhance your web site with menu like features. I have found that using CSS for the menu is the best way to go. This web site uses CSS for its menu. No Javascript is necessary. Using CSS you may also do other interesting things such as fancy tool tips on mouse hover.

Tags:

Trackback from your site.

Leave a comment