Here are a few CSS tricks very useful for Front End programmers:
Convert an element from inline to block and viceversa
Some tags are thought to be inline and some others to act as a block. That is why some tags have some default style like margins or paddings and also, some of them will not act as others when you apply some style.
For example, an anchor (inline tag) with a with=200px; will not use that space because its an inline element, but you can change its behavior with the property display:block, display:inline, display:inline-block, display:table, etc.
With display:inline-block; it will maintain most of its inline behaviour but use the width or height you place, unfortunately this value has some problems in IE, so I recommend you to focus on block, inline, table or none;
Align horitzontally
We can align the text inside a block with text-align:center; or we can make that box to be aligned inside its parent with margin:auto for its sides. Here you have some examples:
.centerText {text-align:center;}
.aligncenter {margin:0 auto;}
.aligncenter2{margin-left:auto;margin-right:auto;}
.aligncenter3{margin:5px auto;}
.aligncenter4{margin:10px auto 5px auto;}
You can align only blocks using margin:auto, so if you want to align an inline element using that you will need to use display:block on it.
Aligning an element vertically
For doing this we should use the property vertical-align:middle, but it only works in table cells, so, or you make the parent be shown as a display:table-cell or you can use the line-height, which centers automatically your text inside it. The problem is that you have to make the line height as big as the box containing the element.
So you may prefer to use the table-cell on the parent which seems easier, or the line-height, which gives you more independency from the rest of the objects.
Hide and show an object
We can play a lot with our elements with the property display:none; since it will make the styled element to disappear, then, we can make it appear again with display:block or inline just using javascript. Lots of JS effects are based in this trick.
Moving the background of an object
We can set an image as a background as you sure know, but what makes this more interesting is the possibility of placing that background in different positions and using this as a trick.
You can set the position at 0px 0px, so it will be shown as a simple top left, or you can use -30px 0px, that starts to be interesting, since you are moving the background image to the left making the background to be shown differently than expected.
With this trick you can use sprite images or make nice transition effects using javascript: imagine a background that has a degradation, if you move it from left to the right you can make a visual effect of darkening or lightening. You can also make a simple moving background effect using javascript ans CSS instead than a gif.
Positioning inside another object
You can use position:absolute and then the properties top, left, right and bottom to set an element in an exact position on the screen, but, you may want that object to be positioned in a precise position depending on a parent object. For example, a Table inside a div positioned in the bottom right.
For doing that, you need to use the position:relative on the parent, and then, position:absolute on the child. If you do not set position:relative on the parent the child will positionate using the main screen (body) as the reference, while with its parent having position:relative it will take its parent as reference.
