Category: CSS Tips and Tricks


If you are new user for css and would like to make the buttons from css with hover effect. It’s very simple to make Buttons from CSS.

button

Firstly we need to make html code as shown below. I had keep button into div with anchor along span too. If you are thinking why to use span as we can do without span too. But for standard format of button better to keep span too inside anchor.If you want to keep icon on button then that makes easy in future too.But for now we will not keep icon in the button either any background image. Continue reading

Is your CSS easy for another person to deal with? If they want to add a new element to the design, would they find it easy to build on your work, or would they have to create brand new class or ID declarations for each addition?

I’m sure we can all agree that none of these outcomes are much fun, and the less painful it is to deal with someone else’s CSS, the better. So let’s see how Object Oriented CSS have benefits on your project.

Object Oriented CSS isn’t really a framework … but a way of writing scalable, sane, maintainable CSS.Object Oriented CSS (OOCSS) is making a mental shift towards easy maintenance and reuse of your styles, even if it means writing extra HTML markup.

Object Oriented CSS methodologies help you to look beyond your immediate design goals and organize your code so that adding new site content that reuses the same styles in the future becomes trivial. With OOCSS, adding a new type of page to your site should mean that there’s no need to create additional CSS styles or selectors. New page types should be able to reuse existing CSS styles as much as possible. Continue reading

CSS Short Code

If you are too boring to code long attribute here we can cut down your coding time

CSS Code :
p.razer
{
font-size: 28px;
font-weight: bold;
font-family: “Arial”, Helvetica, sans-serif;
color: #f4f4f4;
line-height: 24px;
}

Short Code:
p.razer
{
font: 900 160%/240% “Arial”, Helvetica, sans-serif;
color: #f4f4f4;

}

What’s that code?

The order of the attributes are font: weight size/line-height family;
400 = normal and 900 for bold;

CSS Buttons with icons

Here we can design the css buttons with different icons. It’s very easy to use and understood.
buttonnice

Continue reading

No one is perfect all are being to be perfect so for the beginer designer they always think about why to  validate  the CSS. Is it necessary or not. They think why to validate the webpage if they are showing correctly. But it is very necessary to validate the website because  advanced css coders can get away with validating their work less frequently during development but for beginners it is a must and should be done frequently. In this way, silly errors are avoided and the beginner is also alerted to the fact that they may be using an incorrect property or value.

It’s basically like using a spell checker which will fix your words but doesn’t mean that you can write anything sensible. You still need common sense and to have some idea of what you are doing.

If you are one of those meticulous types who like to follow rules, it
would be better that you do not use the css scrollbar properties. Decorating the scrollbar is possible only in IE browser. You can set colors for all these on a scrollbar using styles. And here are the CSS properties that govern these colors

html {scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;}

CSS Form

Buliding website with tableless design helps website to keep  web 2.0 standard. In this article I am not talking about  web 2.0 I am here to make the form completely tableless design that’s with CSS Form.
Now we donot need to keep input box into the table field.

Continue reading

Making a browser compatible website is much challeges with CSS. So while starting your web design one thing we should keep in mind about the reseting the altribute so that all the browser will have same property .

Continue reading

Thank God Internet Explorer 5 support conditinal comment So we can kick out the css browser problem in Internet Explorer. If you are confusing about how to hack the internet explorer 5 then I suggest you to hack in safe way that’s CSS Conditional Comment. So that we can track bug  in a simply way no need take headache problem. The most beneficial aspect of conditional comments is that you are not relying on browser bugs when using them. When you use CSS hacks that rely on browser bugs, you run into the possibility of those bugs being fixed at an unwanted time or other browsers showing the same bugs.

Continue reading

Internet Explore 8

Microsoft has successfully launched the Internet Explorer 8. Internet Explorer 8 has update a lot of facility and improve rather than IE7. So we are here to know about Cascading Style Sheet in Internet Explorer 8. Here are some improvement CSS in Internet Explorer 8

Continue reading