Global Marketing Resources is a one stop solution for all your online and offline marketing needs. We provide you the finest services including: market research, offline marketing services, online marketing services, corporate branding services, search engine optimization services, and website design/development.
Designing Tutorials

DownloadWeb 2.0 & CSS

  • Web 2.0 is a 'Soft concept' - it's not a standard, or a formula or a definition
  • web 2.0 can be described as the 'Intelligent web' or 'Harnessing collective intelligence'
  • Web 2.0 provides a new and enhanced makeover for the World Wide Web by providing users with an easier and a faster web.
  • Web 2.0 makes use of the desktop applications at a greater level than the traditional version with static web pages.
  • These days everybody is using Web 2.0 and AJAX, but everyone understands a different meaning of those technologies. Here I’ll explain my interpretation.
    Web 2.0 = XHTML Strict + CSS2 + AJAX
  • It means the end of using html tables for positioning objects in the page (HTML 4.0 or XHTML Transactional). Web 2.0 uses CSS2 properties to do it.

Introduction to CSS

Cascading Style Sheets, a feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page.

The term cascading derives from the fact that multiple style sheets can be applied to the same Web page.
CSS was developed by the W3C.

Syntax:

selector {property: value;}

Example:

p {color: blue; font-size: 120%;}

Way to creating styles

Basically there are three ways we can set styles for the html tags.

  • Inline : This kind of style takes values inline with the html tag

<font style="color: red”> Test Font </font>

  • Internal CSS : Here we define style under head tag and use it for our tags

<head>
<style>
a { color: green; }
</style>
<head>

  • External CSS : In our head we will link to the external style sheet using the tag link in header portion Tag:

<head>
<link rel="stylesheet" type="text/css“ href="mystyle.css"/>
</head>

Here we define style under head tag and use it for our tags. Inside head tag we will define styles as given in the examples. Internal styles can be used in three ways,

  • Universal : Style to effect all the tags that we specify.
    Syntax: a {color: green;}
    Example: <a href="index.php">INDEX</a>
  • Identifiers : To Set different styles at different positions for the same type of tag. set the id for the style to take effect.

Syntax:

a#test1{color: red; background-color: orange;}
a#test2{color: green; background-color: yellow;}

Example:

<a href="index.php“ id=test1>INDEX</a>
<a href="index.php“ id=test2>INDEX</a>

  • User defined : The names used for user defined styles should not belong to any html tag. We set the style for the tag using the attribute "class“.

Syntax:

.mystyle1{color: green; text-decoration:underline;}

Example:

<a href="index.php" class=mystyle1> MY STYLE </a>

Benefits of CSS

  • Makes all the pages more efficient in HTML.
  • Pages download faster.
  • You have to type less code, and your pages are shorter and neater.
  • The look of your site is kept consistent throughout all the pages that work off the same style sheet.
  • Updating your design and general site maintenance are made much easier, and errors caused by editing multiple HTML pages occur far less often.

What CSS Can Do

  • Modify the font size, color, family, and style of text in markup
  • Define the location and size of an element
  • Change the background image and color of elements
  • Create a new look and feel for markup pages to display on the Web

What CSS Cannot Do

  • Add content to the document
  • Combine multiple documents into one

Difference Between CSS1 & CSS2

CSS1– Level 1 CSS

Below are the points which we can do in CSS1:

  • Font properties such as typeface and emphasis
  • Color of text, backgrounds, and other elements
  • Text attributes such as spacing between words, letters, and lines of text
  • Alignment of text, images, tables and other elements
  • Margin, border, padding, and positioning for most elements
  • Unique identification and generic classification of groups of attributes
  • The W3C maintains the CSS1 Recommendation

CSS2 – Level2 CSS

  • CSS level 2 is the superset of CSS1
  • CSS2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows.

CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a Candidate Recommendation for several months, on 15 June 2005 it was reverted to a working draft for further review. It was returned to Candidate Recommendation status on 19 July 2007.

<style type="text/css" media="all">
@import "style.css";
@import "advanced.css";
</style>

Theme Concept Using CSS Style Sheets

Let US Know about the Theme Concept:

  • Commonly we use number of CSS for a HTML page and we also use single CSS for more HTML pages.
  • Before colors use to change and layout use to be constant
    Eg: MSN, yahoo
  • In one HTML page in which we can set the themes using the different CSS Style Sheets using the java script for switching concept.This concept is more advanced then the concept what we see in Orkut, igoogle and gmail etc.

Download