10 essential css tricks every designer should know

This one’s for the absolute beginners. Once you’ve learned how the box model works, and how to float those boxes, it’s time to get serious about your CSS. To that end, we’ve compiled a massive list of tips, tricks, techniques, and the occasional dirty hack to help you build the design you want.

CSS can get tricky, and you should too. And now, in no particular order, (almost) everything you’ll need to know:

Absolute positioning

If you want control over where an element lives on our website at all times, absolute positioning is the key to making this happen. If you think of your browser as one big bounding box, absolute positioning allows you to control exactly where in that box an element will stay. Use top, right, bottom and left, accompanied by a pixel value to control where an element stays.


The CSS above sets the position of an element to stay 20px from the top and right edges of your browser. You can also use absolute positioning inside of a div.

* + selector

The * enables you to select all elements of a particular selector. For example, if you used *p and then added CSS styles to that, it would do it to all elements in your document with a <p> tag. This makes it easy to target parts of your website globally.

Overriding all styles

This should be used sparingly, because if you do this for everything, you’re going to find yourself in trouble in the long run. However, if you want to override another CSS style for a specific element, use !important after the style in your css. For example, if I wanted the H2 headers in a specific section of my site to be red instead of blue, I would use the following CSS:

.section h2 { color:red !important; }


Centering is tricky, because it depends on what you’re trying to center. Let’s take a look at the CSS of items to be centered, based on content.


Text is centered using the text-align:center;. If you want it to either side, use left or right instead of center.


div (or any other element) can be centered by adding the block property to it, and then using auto margins. The CSS would look like this:

#div1 {
    display: block;
    margin: auto;
    width: anything under 100% 

The reason I put “anything under 100%” for width is because if it was 100% wide, then if would be full-width and wouldn’t need centering. It is best to have a fixed width, like 60% or 550px, etc.

Vertical alignment (for one line of text)

You will use this in a CSS navigation menu, I can almost guarantee that. The key is to make the height of the menu and the line-height of the text the same. I see this technique a lot when I go back and edit existing websites for clients. Here’s an example:

.nav li{

Hover effects

This is used for buttons, text links, bock sections of your site, icons, and more. If you want something to change colors when someone hovers their mouse over it, use the same CSS, but add :hover to it and change the styling. Here’s an example:

.entry h2{

.entry h2:hover{

What this does is it changes the color of your h2 tag from black to red when someone hovers over it. The great thing about using :hover is that you don’t have to declare the font-size or weight again, if it isn’t changing. It only changes what you specify.


For hover effects, like with menus or on images in your website, you don’t want colors snapping too quickly to the end result. You ideally want to ease the change in gradually, which is where the transition property comes into play.

.entry h2:hover{
    transition: all 0.3s ease;

This makes the change happen over .3 seconds, instead of just instantly snapping to red. This makes the hover effect more pleasing to the eye and less jarring.

Link states

These styles are missed by a lot of designers, and it really causes usability issues with your visitors. The :link pseudo-class controls all links that haven’t been clicked on yet. The :visited pseudo class handles the styling of all of the links you’ve already visited. This tells website visitors where they have already been on your site, and where they have yet to explore.

a:link { color: blue; }
a:visited { color: purple; }

Easily resize images to fit

Sometimes you get in a pinch where images need to fit a certain width, while scaling proportionally. An easy way to do this is to use max width to handle this. Here is an example:

 img {

This means that the largest the image could ever be is 100%, and the height is automatically calculated, based on the image width. In some cases, you might have to also have to specify the width at 100%.

Control the elements of a section

Using the image example above, if you only want to target the images of a certain section, like your blog, use a class for the blog section, and combine it with the actual selector. This will enable you to select only the images of the blog section, and not other images, such as your logo, or social meia icons, or images in any other sections of your site, like the sidebar. Here’s how the CSS would look:

.blog img{

Direct children

I wish I’d known this when I first started out using CSS. This would have saved me so much time! Use > to select the direct children of an element. For example:

#nav > a

This will select and style all of the active link elements that are immediately under the Footer ID. It won’t select anything past the active element, or anything else contained in the footer, like plain text. This works great with top level navigation elements, too.


Believe me, this is handy when you are styling lists. You just need to count how many items down the element is that you want to style and then apply that style.

li:nth-child(2) {
    color: blue;

The CSS above targets the second item in the list and makes it bold, underlined, and blue. Add an “n” after the number in parenthesis and you can target every 2nd list item. Imagine being able to style every other line in a table-style layout for easy reading. The CSS would be:


Originally Published By www.webdesignerdepot.com


Leave a Reply

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