How to manage your style sheet?

noreply@blogger.com (surajnaikin) — Sun, 06 Jul 2008 09:03:00 +0000

This article is for all enthusiasts working in the field of web development. New comers provided that you know basics of HTML & CSS to understand this article. Working in Web site Development projects, managing your stylesheets can help you in the long run. As any projects moves ahead, Its hard to remember everything. So lets start to understand how you can make your life easier by managing you css file. At CSSAGlobal we strictly follow this. Now first of all it is more important to think of all the inner pages, layouts, reusable factors while generating HTML (at least home page) & main CSS file out of your Photoshop or any other template file. This kind of attitude lacks in new comers. They might think of that individual page only & create CSS accordingly & may not able to do optimize the code. So understanding basic things like difference between a static website & a dynamic one might help us. Now see the following categorization. You might not understand what exactly this is unless you completely read the article.

Global declarations = GENERIC
H1 TO H6 styling = HEAD
Changeable content = CONTENT
Navigations / listings = NAVS
Modules = ARTICLE
Plain bg colors = BGS
Gradients = GRADS
Borders = BORDERS
Visual containers = ROUNDS
Text, fonts, = TEXTALL
Form, input = INPUT
Footer = FOOTER
Miscellaneous = MISC

Categorize your css into few sections like above. This comment will appear on top of your css file. After this comment you can start writing for your css file.

First of all, you may need to declare some global settings or declarations in order to set a look & feel throughout all the pages of a website. Eg. Font, text colors, Link colors, Line heights for paragraphs. So this section will have a name “GENERIC”.

/* BODY, FONT AND COLOR, GLOBAL (id=GENERIC) **********************************************************/

body {font:normal 11px Arial; color:#000000; text-align:left; background:url(../images/bigger-project-holder.jpg) top no-repeat center;} body,form,h1,h2,h3,h4,h5,h6,p {padding:0; margin:0;}

& so on all the global declarations.

Then you ma start with main container div & header div styling

/* BODY WRAPPER / HEADER / TOP MENU (id=HEAD) **********************************************************/

#mainWrapper {margin:0 auto; width:960px;} #header {width:100%; padding-top:10px;}

& so on for others…

like wise for each section you can denote an ID, place it to the end of the small description.

Like wise I have categorized it for h1 to h6 elements, borders, form tags, visual containers for example rounded corner expandable tables, gradient backgrounds, plain backgrounds & then modules like Calenders, Latest update news where you need to write css for that individual module.

Now we all know a designer creates main css file & fewer html pages. But some times according to programming requirements, you need to tweak this css a little. After a long span of time you may now remember which class or an id you have written for one particular purpose. Here the top commented declaration helps you to go to exact number line, because you have already categorized your css.

Check out some examples..

/* ALL TEXT CSS (id=TEXTAll) **********************************************************/ /* font SIZES */ .vsmlTxt {font-size:10px;} .smlTxt {font-size:11px;} .para {font-size:12px;}

/* ALL INPUT & FORM CLASSES (id=INPUT) **********************************************************/ .input {background:url(../images/input.gif) repeat-x top; border:1px solid #666666; padding:3px;}

Let me know if you like this kind of approach or not..!

Some of the website examples done using same strategy

http://www.cssaglobal.com/demos/html/newenglandvibe/

http://www.cssaglobal.com/demos/html/redandsilver/

http://www.cssaglobal.com/demos/html/schlagmich/

Some live websites as

www.drivelocker.com/

www.favorask.com/

www.boondogglen.com

www.hiremycoder.com/

www.idcs.usa.org

www.styledout.com

www.suturemd.com

Some social networking websites..

noreply@blogger.com (surajnaikin) — Mon, 09 Jun 2008 16:31:00 +0000

I have taken some efforts to list out some social networking websites..

http://www.cssaglobal.com/demos/html/sns/

please go through this & enjoy..

new css rule we can add in next css version

noreply@blogger.com (surajnaikin) — Sun, 04 May 2008 10:23:00 +0000

Well this workout is all about creating visual containers, which we often use for creating web pages. Consider a case where in there is a web page with various visual container like above image. Now With current version of css & browser compatibility, at last what we can do is create three separate images & using them as background image or either we can even use css sprites.

But can we put it this way. I have considered a image format (may be adobe can come up with this) which can save images like above with layers & the browsers (or say other computer program) starts understanding them pretty well & if we can come up with a css version where in we can write the following code. (I have slightly offset the images in order to see the layers)

First layer for the first visual container

.myVisualContianerOne {background-image:url(../images/visual-container.gif) center top no-repeat; background-image-layer-position:top;}

Second layer for the second visual container

.myVisualContianerTwo {background-image:url(../images/visual-container.gif) center top no-repeat; background-image-layer-position:middle;}

Third layer for the third visual container

.myVisualContianerThr {background-image:url(../images/visual-container.gif) center top no-repeat; background-image-layer-position:bottom;}

How this workout will be helpful

It is beneficial in order to reduce the no of images required for visual Containers.

Reducing the HTTP requests to server.

Lesser download time