rajesh gollapudi’s blog

Designed by John Jacobsen, with help from Sarah Stup
url: http://www.nch.org/medical-services/gastroenterology-center/connie.php or http://nch.org/gi

Cascading style sheets(CSS), which is responsible for styling various web pages, is and has always been going through a lot of changes. This blog post, tries to summarize some of the new and exciting ways to write it.

1. Grids
   • Reset - reset the default font styling in all major browsers
   • Column grid
   A set of classes or styles, which you can use to generate a grid. This is extremely helpful if you want to layout a site quickly. Most often these grids provide a centered layout of some xxx px, which can be split into any number of columns that you wish.
   • Typography
   A set of classes which prescribe the default font sizes and the type of fonts to use. For example,<h1> bold 36px Verdana and <h2> bold 30px Verdana
   • Icons
   A set of icons that are widely used. Although the default icons may not be useful or ideal for everyone, they can act as a placeholder. Typically they include icons such as RSS feed, user add/delete, buttons etc
   • Styles for form elements
   This is very helpful, if the website that you are developing includes lot of forms. Frequently the grids provide ways to develop inline and block styles for form elements.
   • Scripts/Tools
   Scripts to minify/compress the css. These could help you save bandwidth. My personal preference is the Yahoo UI compressor, which can compress both your css and js.
CSS Grids are widely used to handle the differences between various browser implementations and to simplify common tasks. Of the various grids - 960.gs, YUI grid, Blueprint, Bluetrip seem to be ones that are widely used. CSS grids typically include the following - You can choose one or more of the available components from a CSS Framework depending on your situation. Be advised, there is no one framework that can be used for handling all the styles/issues that you have in mind. Each CSS framework is designed with a set of principles in mind, while being flexible enough to allow addition of other styles.
2. OO approaches to write/generate CSS

First of all, CSS is not object oriented and is not a programming language. The sole purpose of CSS is to let the browser know how to display or render a HTML element. Object oriented approaches to CSS, are targeted at redundancies in writing CSS. For example, consider the following CSS

#container #content #header .title {

    font-size: 16px;

}

#container #content #header .sub-title {

    font-size: 12px;

}

You see the problem? If you change the name of the '#content' to '#newcontent', within your html markup, then you end up changing all occurrences of #content in your CSS. SaSS and xCSS are attempts at applying the DRY (Do not Repeat Yourself) programming paradigm to CSS. They typically rely on a programming language such as PHP or ruby to generate CSS. For example, SaSS converts

#box
:border 0
:color black
.orange
:border 1px orange

to

#box {
border: 0;
color: black;
}
#box .orange {
border: 1px orange;
}

 Combine this with the abilities to use variables, mixins and templates. You can see how useful it could be in managing the css for a big corporate website.

I am eager to hear about any good frameworks or tools that I might have missed as part of this blog post.

We changed Finelight's web site last Friday, in our efforts to improve Finelight's search engine ranking, add more social media features and promote involvement of Finelighters among many others.

You can follow Finelight on Twitter @finelight and be a fan on Facebook.

Rajesh

When using css (opacity) to set the transparency of an element, the child elements inherit the transparency of the parent element.

For example, if you set 50% transparency to the body element, the whole pages becomes 50% transparent. Even if you explicitly set the opacity to 1 for the child elements, the transparency is still there.

This is particularly not desired if your child elements has text.  As you can see from the screenshots, the text looks clear in Screenshot 1.  In Screenshot 2, the text dissolves into the background when opacity is set to 0.5. I used opacity 0.5 just to demonstrate this. The text looks better with opacity 0.9, but this is not the ideal solution.

   

Solution
To prevent this, the only way is to use a  png with the desired alpha transparency.
Note:
Transparent pngs are not supported by IE 6. So make sure that you use the fix mentioned at TwinHelix