Some CSS Tricks You May Not Know? You Should Learn

Here are some CSS Tricks and Techniques many people may not know, these can be very much helpful while working on CSS. Lets find out these.

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;
}

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:

Another CSS Tricks is, 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).

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:

Last but not least, another CSS Tricks is, 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 The Author