Applying multiple css selectors to the same element


There can be scenarios wherein, you have a selector defining the width style like (w05,w30,w500 etc) and there is another set of selector that gives a border style like (b01, b02 etc…). You want to apply a full 2px border to an element and give it a width of 500px. In this case you can combine your css selector.

The definition of the child element css property will look something like below:

<style type=”text/css”>

.w500 {width:500px;}

.b02 { border: 2px solid #330;}

</style>

<div class=”b02 w500″>Hello World</div>

Just by providing a space between the selectors, we give the div a border of 2px and width of 500px.

Now, in case you want to access this particular element from jQuery or javascript, keeping in mind that you will have to select a div, which has its selectors as b02 and w500 (not separately), all you need to do is use the ‘.’ operator

p.bo2.w500 { height:50px;}

$(“p.b02.w500”).hide();

It’s a simple, yet powerful concept we have out here.

Center aligning div elements


Well, in most of the scenarios in a web designing art, you might come across one wherein you have to center align a div tag, without affecting the text in it. Your first thought might be text-align:center;

But if you want to center align the div alone, leaving the text alignment to be unaffected, you can use this trick css styling. Just give the margin of the div as : margin:0 auto; Lol… done.

It goes well for all browsers.

Thats all… you can now center align a div without affecting the text-alignment of the div contents.