CSS3: Ready to hit

CSS3 offers a variety of new ways to create an impact with your designs, with quite a few important changes. The development of CSS3 is going to be split up into ‘modules’. The old requirement was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new ones also added. Some of these modules include:

1. The Box Model
2. Lists Module
3. Hyperlink Presentation
4. Speech Module
5. Backgrounds and Borders
6. Text Effects
7. Multi-Column Layout

Several of the modules have now been finished, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon. It is very difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to. New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted. It will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2. The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and get present design features in a much easier way (e.g. using columns).

Cascading Style Sheets (CSS) for Web pages

Our HTML documents can be displayed using different output styles using CSS. HTML tags were originally developed to define the content of a document but Styles sheets define HOW HTML elements are to be displayed. All major browsers support Cascading Style Sheets. As a Website designer we can define a style for each HTML element and apply it to as many Web pages as we want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

CSS allows developers to control the style and presentation of multiple Web pages all at once. Style sheets allow style details to be specified in many ways. Styles can be defined inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external stylesheets can be referenced inside a single HTML page. An inline style defined in an HTML element has the highest priority, which means that it will skip a style declared inside the tag, in an external style sheet.

selector {property: value}

body {color: blue}