Resources & Tips

  • Home
  • »
  • Blog
  • »
  • Essential CSS Tips & Tricks
Essential CSS Tricks

Essential CSS Tips & Tricks

AWESOME & ESSENTIAL CSS TRICKS!

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:


1. 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.

position:absolute;
top:20px;
right:20px

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.


2. 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 we wanted the H2 headers in a specific section of our site to be red instead of black we'd use the following CSS:

.section h2 { color:red !important; }

The CSS above would result in all H2 tags being red in colour.


3. CONTENT CENTERING

Centering is tricky, because it depends on what you're trying to center. Let's take a look at the CSS of main content, such as a div element.

A 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 we've used 'anything under 100%' for the width is because if it was 100% wide then it'd become full-width and thus wouldn't need centering. It is therefore best to have a fixed width such as 80% or 520px etc.

Text is slightly different and is centered using the text-align:center; property instead. If you wanted the text to sit on the left or right you'd use text-align:left; or text-align:right; instead of text-align:center;. Alternatively you may want it justified in which case you'd use text-align:justify;. In Bootstrap you also have float-left, float-right, pull-left & pull-right properties as well.


4. VERTICAL ALIGNMENT (SINGLE LINE)

This is generally used when you build a CSS navigation menu. The key is to make the height of the menu and the line-height of the text the same. We use this technique a lot when we edit existing websites for our clients. Here's an example:

.nav li{
    line-height:50px;
    height:50px;
}

In essence you're setting the height at 50px throughout all navigation menu's used on the website. On our website ours are 40px but we have an additional 10px padding element to increase the effect of our menu's.


5. HOVER EFFECTS

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

.demo h2{
    font-size:36px;
    color:#000;
    font-weight:800;
}

.demo h2:hover{
    color:#f00;
}

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.


6. HOVER TRANSITION EFFECTS

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. Here's an example:

.demo h2:hover{
    color:#f00;
    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.


7. 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. Here's an example:

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

8. 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 {
    max-width:100%;
    height:auto;
}

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%.


9. CONTROL 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{
    max-width:100%;
    height:auto;
}


10. DROP CAPS

Everyone loves drop caps. It reminds us of the traditional printed book, and is a great way to start a page of content. That 1st, large letter really grabs your attention. There's an easy way to create a drop cap in css, and it's by using the pseudo element: :first letter. Here's an example :

p:first-letter{
    display:block;
    float:left;
    margin:3px;
    color:#f00;
    font-size:300%;
}

What this does is set the letter to 3x the size of the other letters. It sets 3px of space around the letter to prevent overlapping, and sets the color of the letter to red.