OpenSourceVarsity

5 Simple CSS Tricks You Can Be Using Today

If you have started into the world of coding web pages then you are most likely familiar with HTML and CSS. These two languages are what the user interprets as text, images, and overall layout. For the most part they are pretty simple and you can pick them up pretty fast.

Although any time you are taking on a new challenge there are setbacks and frustrations along the way. CSS can be particularly frustrating without any teaching or direction. Often times people will be making things more complicated then they have to just because they don’t know proper techniques. Here are 5 useful simple tricks to help you along the way.

Easy Image Hover

Contrary to popular belief you do not need two images to produce quality hover affects. Simply by changing the opacity, your image will appear as if it is changing color. This works particularly well with social icons, especially if you got them from a free example and you only have one image to work with.

Here is some sample code you can use. Obviously you want to source your own images, and reference the right link. The image does NOT have to be within a link. You can do this anywhere on your page with any image.

First Some HTML

<div id=”imageHover”>

<a href=”YOURLINKHERE”><img src=”YOUR IMAGE SOURCE HERE”/></a>

</div><!–imageHover–>

Now Simple CSS

#imageHover img
{
	opacity:0.8;
}

#imageHover img:hover
{
	opacity:1.0;
}

Doing this successfully will give your image the appearance that it is glowing when you hover over the image.

Centering Your Website

This example is very easy! It is all in the way you wrap your containing divs and set the margin in that wrapper.

First Some HTML

<div id="wrapper">
	<!-- ALL Your HTML code goes between <div id=wrapper> and </div> -->
</div><!--wrapper-->

Now Simple CSS

#wrapper
{
    width:900px;
    margin: 0 auto;
}

The important thing to note is the margin and the width in your CSS. Without the width your wrapper will simply take up the whole page and without the margin auto your content will default to the left side of the browser.

Give Your List Styles an Image

There are a few things you can do with the bullet points that a list creates. You can make them an ordered list or an unordered list. An ordered list will display the content in numerical order. An unordered list will simply provide the content in bullets. However these bullets can come as a circle, a square, or even an image.

Having an image as your list item is really quite simple. Just apply the proper ID or class to any list you wish to use images on. Then use the following CSS code:

Now Simple CSS

#yourDivID ul 
{
	list-style-image:url('imagelink');
}

You can apply this to a particular ID or use a class and add this to any ul(unordered list) that you please!

Remove Link Color/Style

Links come blue and underlined. However some of us do not want that. This is especially true when an SEO Company wants to format their links the best way possible.

Removing link style is very simple and can be done throughout the entire page, or only for a certain div.

Now Simple CSS

Applied to the entire page:

a
{
	text-decoration:none;
}

Applied to a particular div:

#particularDiv a
{
	text-decoration:none;
}

It is as simple as that. You can even add an underline with a hover effect.

The Notorious Clear Fix

You may or may not have noticed that sometimes when floating various divs, a parent div may seem to no longer contain them. This can be very frustrating and trust me I remember my first issues with this. I used to use an open paragraph tag when needed and simply applied a class that would clear:both floats. It worked great, but I would recommend the following clearfix for your CSS.

Now Simple CSS

.clearfix:after
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: "";
    clear: both;
    height: 0;
}

* html .clearfix { zoom: 1; } /* For IE6 */

*:first-child+html .clearfix { zoom: 1; } /* For IE7 */

This is necessary when you start floating child divs within the parent div. All you have to do is simply apply the clearfix class to any parent div that may need it.

Here is what is what a sample page might look like before you start floating divs.

Here is the code block

<head>
    <style>
        #wrapper
        {
            margin: 0 auto;
            width:400px;
            background:#573823;
        }
        
        #parent
        {
            width:400px;
            background:#333;
        }
        
        #leftChild
        {
            background:#475373;
            width:100px;
        }
        
        #rightChild
        {
            background:#d34292;
            width:100px;
        }
        
        .clearfix:after 
        {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: "";
            clear: both;
            height: 0;
        }
        
        * html .clearfix { zoom: 1; } /* IE6 */
        
        *:first-child+html .clearfix { zoom: 1; } /* IE7 */
    </style>

</head>

<body>

    <div id="wrapper">

        <div id="parent">

            <div id="leftChild">
                <h1>Left Child Div</h1>
            </div><!--leftChild-->

            <div id="rightChild">
                <h1>Right Child Div</h1>
            </div><!--rightChild-->

        </div><!--parent-->

    </div><!--wrapper-->
</body>

</html>

Now what this code will produce:

Output of HTML and CSS code

Now once I start floating the child divs you will see what happens to the parent div. I recommend giving divs different background colors so you can see this when you are testing for yourself. (NOTE: Since I am I running these examples on the same page I am going to simply change the names of the ID’s with each example I use – this will ensure my examples stay consistent. Better safe than sorry. You do not have to do this whatsoever when you are trying this out for yourself. I can keep the clearfix class as is since it can be used more than once on the same page. You should brush up on the differences between classes and ID’s if this is confusing. A general explanation is that ID’s can be used once per page and classes can be used many times.)

Here is the code for when I start floating the divs:

<head>

    <style>
    
        #wrapperOne{
            margin: 0 auto;
            width:400px;
            background:#573823;
        }
        
        #parentOne{
            width:400px;
            background:#333;
        }
        
        #leftChildOne{
            background:#475373;
            width:100px;
        }
        
        #rightChildOne{
            background:#d34292;
            width:100px;
        }
        
        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: "";
            clear: both;
            height: 0;
        }
    
        * html .clearfix { zoom: 1; } /* IE6 */
    
        *:first-child+html .clearfix { zoom: 1; } /* IE7 */
    
    </style>

</head>

<body>
    <div id="wrapperOne">
        <div id="parentOne">
        
            <div id="leftChildOne">
                <h1>Left Child Div</h1>
            </div><!--leftChildOne-->
            
            <div id="rightChildOne">
                <h1>Right Child Div</h1>
            </div><!--rightChildOne-->
        
        </div><!--parentOne-->
    
    </div><!--wrapperOne-->
</body>
</html>

This is what it will look like:

Output of HTML and CSS code part 2

Notice it appears as though the parent div has disappeared. The HTML is still in tact, but you can no longer see the color. This is because once you start floating child divs within parents divs, the parent div seems to no longer be able to latch on to where those child divs may be floating to. This is where the clearfix “hack” becomes so useful. All you have to do is add the clearfix class to any parent div that may need it.

So lets fix this problem with the clearfix “hack.” Again I am going to change the name of the ID’s – you won’t have to.

HTML Code

<html>
<head>
    <style>
    
    #wrapperTwo{
        margin: 0 auto;
        width:400px;
        background:#573823;
    }
    
    #parentTwo{
        width:400px;
        background:#333;
    }
    
    #leftChildTwo{
        background:#475373;
        width:100px;
        float:left;
    }
    
    #rightChildTwo{
        background:#d34292;
        width:100px;
        float:right;
    }
    
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: "";
        clear: both;
        height: 0;
    }
    * html .clearfix { zoom: 1; } /* IE6 */
    
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */
    
    </style>

</head>

<body>
    <div id="wrapperTwo">
    
        <div id="parentTwo" class="clearfix">
        
            <div id="leftChildTwo">
                <h1>Left Child Div</h1>
            </div><!--leftChildTwo-->
            
            <div id="rightChildTwo">
                <h1>Right Child Div</h1>
            </div><!--rightChildTwo-->
        
        </div><!--parentTwo-->
    
    </div><!--wrapperTwo-->
</body>
</html>

Just by simply adding the clearfix class to the parent div the problem is solved. Your document should now look like this:

Output of HTML and CSS part 3

Armed with these CSS tricks you should be able to build some pretty good looking layouts. Okay, so maybe the last one wasn’t that simple. Just remember, when you float Child divs, their Parents might not know where they are.

A good clearfix will take care of that problem. One more thing that I would like to add… Make sure you link to an external CSS it is much better practice.


Authors Bio

Thomas Benjamin This article was written by Thomas Benjamin. Thomas is a tech blogger whose knowledge ranges from SEO to web design. He believes that every successful website starts with a great Web Development Service.


Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved
X