Home / Articles / Some CSS Tricks you May not Know?

Some CSS Tricks you May not Know?

Here are some CSS techniques many people may not know, these can be very much helpful while working on CSS.

1. Vertical Alignment in DIV:

I think this is the most important thing, many are looking to align their text in a DIV vertically. You may have found a lot of procedures, but I’m going to tell you very short and it will work on almost all browsers. Just remember when you make a DIV and giving it the Height, just give the Line Height same as of DIV height. Suppose you have made a DIV with 250 px height, just give Text line height also to 250. So your text would be aligned Vertically, just check.

.box {
float: left;
height: 250px;
width: 500px;
line-height: 250px;
text-align: center;
background-color: #900;
}

vertical-align

Suppose you want to keep it align bottom Vertically, so take the double of height of box and multiply it by any number from 90% to 95% (depending upon the height of the box) and then make the height of the line by putting that number. Suppose box height is 250, so double it you will get 500 and multiply it by 95% as 500×95%=475, so put line height has 475, you will get your text Aligned Bottom vertically.

2. Fonts properties in one line:

Sometimes we use more than one Fonts property like shown below:

font-size: 12px;
line-height: 20px;
font-weight: bold;
font-style: italic;
font-variant: all-caps;
font-family: arial;

So instead of using these properties in separate lines, you can write in one line like show below:

font: 12px/20px bold italic all-caps arial;

It will save a lot of your time.

3. You can use Two Class in one DIV:

Usually when we assign one Attributes to class, but you can assign many class in one class. Here is the code you can use

<p class=”Stunning Mesh”>…</p>

means that the paragraph calls up the rules assigned to both Stunning and Mesh. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

4. What are the Default Values of Border:

When you are calling the Border property in any Class and you usually specify the color, width and style, for example: border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.

Instead of write all this if you write border: solid then the defaults for that border will be used. But how we know the default value for border is what? The default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!

5. How we can ignore some commands for only IE by using !important:

Suppose you want to give some properties and you need to change these properties for only Internet Explorer browser. Mean to say if you want to give different margin for Internet Explorer and different for all other browsers, then you use !important property, like:

margin-top: 30px !important; margin-top: 20px

So, the top margin will be set to 30px for all browsers except IE, which will have a top margin of 20px.

6. Positioning of Container anywhere in the File:

Sometime you want to put any object or text in your desire position, but you are not getting it at proper position. For this purpose you will need a Container and you can move this container anywhere in your file (whether there is a DIV there or not). Just take DIV as ID and then make a DIV in CSS, like shown below:

<div id=”container”><div id=”navigation”>Stunning Mesh</div></div>

In CSS file make Navigation DIV as:

#navigation
{
position: absolute;
left: 140px;
top: 32px;
}

You will get a Frame in your file, move this frame anywhere in the file (but don’t forget to save CSS file anytime you move this frame, because it will change Left and Top position).

anywhere1anywhere2

7. Having Fun with <HR>:

<hr> tag will give Horizontal Rule (or line), you can change its appearance by putting some parameters. Like copy this code and paste it in HTML:

<hr noshade style=”width: 200px; color: gray; height: 20px; text-align: center; border: 3px solid green;”>


8. How to hide Horizontal or Vertical Scrollbars:

If you want to hide both Horizontal and Vertical Scroll bars, just write these code inside <body> tag in HTML:

<style type="text/css">
<!--
body { overflow:hidden; }
-->
</style>

For most browsers, it will disable the scrollbar, rendering page scrolling impossible. If you would like to only disable the vertical scrollbar, then the CSS code would look like:

body { overflow-y:hidden; }

Alternative, if you would like to disable the horizontal scroll bar only, then the CSS would change and become,

body { overflow-x:hidden; }

9. Making Buttons:

You can make Submit button by using only the following codes:

<input style=”background-color: gray; color: #00ff00; font-weight: normal; font-size: 10pt;” type=”submit” value=”Stunning Mesh – Click me”>

You will get the following Button:

 

About Wijdan Rohail

A professional Web/Graphic Designer, working as Freelancer since 2000. Designing is my passion, blogging is my hobby.

Check Also

How to Earn Money with Stock Photography

4 Things You Should Do to Make Money Online with Stock Photography

Want to earn some extra cash while sharing your love of photography? There has never …

10 comments

  1. I’ve been visiting your blog for a while now and I always find a gem in your new posts. Thanks for sharing.

  2. Great learning new technics.

    Thaks

  3. I just book marked your blog on Digg and StumbleUpon.I enjoy reading your commentaries.

  4. Design Dazzling

    Excellent work.

  5. I’ve tried to hide the Scrollbars in WordPress but it did’nt work.

    I’ve pasted the following in the body part of my theme’s style.css
    { overflow:hidden; }

    Is there something special to do with wordpress?

    Thank you

  6. Here comes the real stunning stuff… best of the best.

  7. very helpful, specially the !important; one is really very important 🙂

  8. Thanks for pointing out mistake, I’ve corrected it.

  9. Awesome. You’ve made my day with this superb tips. And this: body{overflow: hidden} really helps me a lot, though overflow-x: hidden is actually to disable Horizontal Scrolling.

Leave a Reply

Your email address will not be published. Required fields are marked *