Cascading Style Sheet (CSS) in Web applications

Generally people associate CSS with the color and font of site. The perception is that the CSS will help in making jazzy looking site with cool colors and fonts. This is also true, but more than that it's important to understand that CSS is not just about colors and fonts. It can handle many other aspects of a web application in a more transparent and maintainable way. Have a look at http://www.csszengarden.com/ and see that just by changing the CSS themes, entirely different look and feel is achieved.

Whenever you are planning a web application, theming should be an important element to be taken care of. Do not relegate it to the end of the project when first styles are managed in a style attribute and than in a hotch potch way moved to an external css file. It will create more problem than you can thought of.

The better approach is to take the theming right in the beginning of the project. If not comfortable about the structure than use one of the scaffolding code generators like roo or seam and see how they handle the theming.

Beyond color and font, CSS should be used for the following:

• Handling layout of the web application
• CSS can control the styles based on the system on which the final output is going to be rendered. It can control the visibility and other styles based on whether the output is to be rendered on printer or on web browser or on a mobile or is meant for braille instrument.

A good theme which includes appropriate selection of look and feels provides a higher confidence level to all stakeholders. Also theme if mocked out properly gives a consistent mental model to all involved

More articles on CSS

Cascading Style Sheet (CSS) - Tips and Tricks

CSS - Development and Testing Resources

Color Checking Tool

• http://www.colorschemer.com/online.html
• http://colorschemedesigner.com

For CSS development the following tools can be used

• Adobe Dreamweaver

There are CSS analysis tools that come with all the leading browsers now.

• IE - Tools->Developer Tools or press F12
• Firefox - Firebug plugin has webdeveloper toolbar.
• Chrome - The browser itself comes with rich java script and CSS handling tools. To access go to Tools->Developer Tools

Testing Tools

• For IE testing one can use Expression Web super view from http://expression.microsoft.com/en-us/dd565874.aspx
• IE tester is another one that can be used for testing different version of IE  http://www.my-debugbar.com/wiki/IETester/HomePage
• Adobe Browser lab

CSS - Handling Browser Moods

I think a big part of browser compatibility industry survives on the moods of IE6. And still this can not be ignored because still substantial number of people use IE6. To see the various trends on browser usage, look at the link http://www.w3schools.com/browsers/browsers_stats.asp

To handle IE specific issues, the conditional statements are put inside comment. (We think comments are only for real user). The IE will look into those comments though all other browser ignore it. The condition looks like

<! -- [if condition] >

IE is the greatest browser. Only IE will see it :)

<! [endif]- ->

Conditions are:

• lt  Less than
• lte  Less than or equal to
• gt  Greater than
• gte  Greater than or equal to
• IE 6  IE version 6 (Note the space between IE and 6
• IE 7  IE version 7

For example for less than or equal to IE6

<! -- [if lte IE 6] >

IE 6 is the coolest browser ever made

<! [endif]- ->

CSS - Trivia

What is the most available font list in internet?

• The most available font list in end machine can be seen at http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

What is 960 grid system?

• Designers use to do the layout and is based on 960 pixels width screen and is used for doing layouts. Check http://960.gs/

HTML5 boilerplate

• Check http://html5boilerplate.com/. This is a base html/css/js template to start with. Supports various browsers and all.

Modernizr Javascript

• http://www.modernizr.com/. A small javascript library which provides fine level control on various issues depending on the underlying browser.

selectivizr

• http://selectivizr.com/. selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Please add to comment if you have more tricks under your sleeve.

More articles on CSS

Cascading Style Sheet (CSS) - Handling Different Media

CSS styles can be selectively applied based on the medium on which rendering is going to happen. This is controlled by the media attribute when applying the style. For example it's a very common requirement that we should see the Print button the main screen but should not see it on the printed document. This can be controlled by defining different styles and applying them selectively. For example let's say the standard style sheet is

standard.css (Just for completeness, I am putting this style, this can be skipped also)

.printNoDisplay

{

   

}

Also let's define another css file for printing

print.css

.printNoDisplay

{

    display:none;

}

Now the main html document would look like

<html>

<head>

    <link rel="stylesheet" type="text/css" media="print, screen"

                href="<LocationOfCSS>/standarad.css"/>

    <link rel="stylesheet" type="text/css" media="print"

                href="<LocationOfCSS>/print.css"/>

</head>

<body>

 <div class="printNoDisplay">

            <form class="textAlignCenter">

                 <input type="button" value=" Print" onclick="window.print();return false;" />

            </form>

</div>

</body>

</html>

Note the usage of media on the linking of css. In the print document the printNoDisplay style defined in print.css will kick in and will disable the displaying of button.

We can apply the style in the same css also. In this case define printNoDisplay in standard.css as follows and no need for print.css

@media .printNoDisplay

{

    display:none;

}

Various media types that are supported by CSS are:

• all - Default value, applies to all devices.
• print - Printed document
• braille - Braille devices
• embossed - Embossed braille printers 
• handheld  - Handheld devices like mobile phones
• projection - projector
• screen  - Out standard web browser.
• speech - Speech synthesizers for hearing impaired.
• tty - Good old dumb terminals.
• tv - television

More articles on CSS

Cascading Style Sheet (CSS) - Writing Style Sheets

Styles can be written in couple of ways, which are listed below:

Writing styles for the elements themselves. 

This is the preferred way of doing the things. In this case, the style element would look like

body,div,td {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #666;

}

body {

    background-color: #fff;

    text-align: center;

 }

In this case, the styles are automatically applied to the respective elements. This will also allow to handle the site look and feel in a generic way. It is always better to control the look and feel in this way and than do the local application of styling where required.

Applying style using id's

Here style are applied to the elements based on id. The definition of style is done by (Note the use of #)

#wrapper {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #666;

}

And this is applied to the elements using the id name

<div id="wrapper">

</div>

Using classes

This is what is the most prevalent way of using the styles. But use after you have exhausted the way of doing it in the first way. Here a class is define (Note the use of .)

.myStyle {

    text-align: center;

    font-weight: bold;

    padding-top:1em;

}

Now this can be applied on an element using the class attribute

<div class="myStyle">

</div>

Applying style directly as an style attribute

<div style="text-align: center;font-weight: bold;padding-top:1em;">

</div>

More articles on CSS

Cascading Style Sheet (CSS) Introduction

CSS stands for cascading style sheet. The richness of web that we see today is attributed to the CSS. It’s knows as Cascading because it cascades from outer nesting to inner. A style applied to a body cascaded to all the elements inside the body. However each element can also override the style.  CSS brings a definite advantage to web designing by decoupling the data markup with the styling issues. Also they provide capability to control the style of a web site in a more generic way.

To see the power of CSS, please visit www.csszengarden.com. This is a web site where the same underlying html markup is rendered with different style sheets by different authors.

CSS can be applied three ways:

Putting style in an external style sheet. Make a file with extensions css, For example

standard.css

body,div,td {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #666;

}

body {

    background-color: #fff;

    text-align: center;

}

include in your html or jsp markup file

<html>

<head>

<link rel="stylesheet" type="text/css" href="<location_of_css>/standard.css"/>

</head>

<body>

</body>

</html>

<style> block in the html itself - In this case, the styles are put in the html file itself

<html>

<head>

<style type="text/css">

body,div,td {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #666;

}

body {

    background-color: #fff;

    text-align: center;

}

</style>

</head>

<body>

</body>

</html>

Defining the style as an attribute itself

<html>

<head>

<style type="text/css">

body,div,td {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #666;

}

body {

    background-color: #fff;

    text-align: center;

}

</style>

</head>

<body style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #666;background-color: #fff;text-align: center;">

</body>

</html>

All the three way will give the same effect. The difference comes in re-usability of an approach. When written in an external file, it  can be used throughout the site and also the whole site style can be controlled generically. On the other hand, style defined in the page can be used generically for the elements in the page only. Style defined as part of attribute applies to only that element.

More articles on CSS