Funding for 'IT Lab' Project, Phase 1: Progress of sticker sales. Purchase a sticker to help us reach our target.Updated: 2010-02-28 11:53
Let’s Follow Web Standards
by Hayesha SomarathnaDuring the last two months I did a quick rundown of the evolution of HTML and XHTML to the present status. Along with that I introduced the main governing body behind the WWW, usually called as World Wide Web Consortium (W3C) and how it has devised standards covering all aspects of user requirements in the perspective of Web authors, content generators, information seekers, etc... From this article I'm going to introduced to you an important technological area, where most of us miss the benefits of not knowing its effective use to achieve better performance.
Cascading Style Sheets
- What is Cascading Style Sheets?
- Is it a new language for web design?
- Is it a separate language from XHTML/HTML?
- What is it responsible for?
Inception of CSS
The inception of CSS to the arena of Web development took place along with the HTML 4.0 specification, code name 'cougar'. This was a large evolution of the HTML standards, and the last iteration of classic HTML. Cougar specifications were introduced having a focus on internationalization, and support for HTML’s new presentational language, Cascading Style Sheets(CSS).
How CSS Works
Figure 1: Illustrates how CSS used to manage the presentation
CSS Syntax
Let's see what is meant by the term syntax, because it's good to have a clear understanding about the basics. Syntax can be illustrated as the discipline that examines the rules of a language that dictate how the various parts of sentences go together.
Figure 2: Illustrates how statements are defined in a CSS file
In the context of the CSS, is a set of instructions wrapped into a single statement(as illustrated in Figure 2), which consists of three parts:
- Selector: Identifies the XHTML/HTML element(s) to apply the styles.
- Property: Specify the attribute which the styles to be applied to the selected element(s)
- Value: Specify the parameter each attribute should hold
Figure 3: Illustrates how selector, property and value can be used
Attaching CSS to Web page(s)
So let your site's presentation be handled by CSS rules and feel the power of control and easy management of all the XHTML/HTML elements on your Web application. There are three ways available to attach CSS rules into your Web pages:
- Inline Style Sheets: Describes how to assign an element specific CSS rules
eg: <p style=“padding: 5px; color: #999;”> </p>
- Internal Style Sheets: Describes how to place the necessary rules inside a Web page.
eg: <style rel="stylesheet" type="text/css" />
p { font-familly: Arial, Garamond, Verdana; }
</style>
- External Style Sheets: As the name itself says it tells you how to attach external stylesheets to your Web application or page.
eg: <link rel="stylesheet" type="text/css" href="/style.css“ media=“screen, projection"
/>
<style type="text/css“> @import(/style.css) </style>
The standard Web-based applications come with three main CSS files to facilitate the accessibility of the mostly used media types;
- Screen or Projection media: The most important and mandatory media type used to control the presentation of XHTML/HTML components on the Web Browser or projection screens.
- Print media: Used to control the presentation of XHTML/HTML components when the Web page is subjected to print mode. Only the most important components (headings, paragraphs, some images, etc..) are preserved while leaving behind the rest (navigation menus, advertisement banners, header and footer, etc... ).
- Handheld media: Use to limit the presentation of XHTML/HTML components to suite the screen size of the handheld device( PDAs, Smartphones, etc... ).
Ultimate Goal
Finally we can summarize the important point so far discussed above, which will be useful to keep in mind during the Web development. Especially when handling user Interface related (presentation level) activities with Web 2.0 based applications.
- Separation of structure and the presentation: Simpler and more manageable chunks
- Finer and more predictable control over presentation
- Flexiblility: Media specific Style Sheets (screen, print, handheld, etc... )
- Centralized control of presentation
- Accessibility
- Simple syntax
Have a problem in mind of what I have discussed so far or feels like need further clarification, please feel free to bug me.
Post new comment