Ebenezer Obasi

~ Web Dev & Designer ~

3 Key Questions Newbies Ask on CSS
Posted On Saturday, November 2, 2013

Cascading Style Sheet (CSS) is arguably the easiest language in web development; most of it has to do with the normal English language we speak and write everyday, e.g. font, transition, display, color etc. Are regular words we use in our everyday life. Despite the simple nature of  CSS, one cannot deny a newbie the right to make some *relevant mistake that more often than not, influence the entire outcome of the style sheet.

To commemorate my 20th birthday today, we shall take a look at the compilation of the top 3 possible newbie CSS mistake that leaves its mark on the entire style sheet.

Centralizing an Element

It is no longer a secret the  float:center; is not a valid CSS property. As a newbie, it is a forgivable mistake if you try to position a particular element to the center by specifying a margin (either left or right) against the other in a calculated manner. Here is the correct way of centralizing an object.
.main_container {  width: 400px;
 margin: 0 auto;
 border: 0;
 padding: 5px;
}
Your margin must be set to: 0 auto. Note: This method is not applicable to aligning text to center. In the case of text, use :text-align:center;
.content{
float:left;
text-align:center;
}
So that your HTML code should look like this:
<div class='main_container'>
<div class='contents'>
<p>Some Contents Goese Here</p>
<img src='http://4.bp.blogspot.com/-1FuGEi-VHac/UnTz_pqql2I/AAAAAAAADq0/zu0e6Rj9pLg/s1600/center-img.png' />
</div></div>

Clearing Float

Have you ever been in a situation where your floated boxes are placed outside a box when you actually wanted them inside the box? Do not panic about this. The actual reason for this, is that floated element do not apply to the height of the elements they reside in properly. You might have created a CSS property like the ones  below, 

#main_container { margin: 0 auto; padding: 5px; width: 100%; } .floated_box { float: left; width: 100px; height: 100px; display:inline block; overflow:hidden; }

<div id="main_container"> <p>Some content.</p> <div class="floated_box"></div> <div class="floated_box"></div> <div class="floated_box"></div> <div class="floated_box"></div> <div class="floated_box"></div> </div>
these divs with the class "floated_box" are within the div "main_container", yet on the page they are outside that container div. You can correct this bug by simply adding
<div style="clear: both;"></div>

at the end of your HTML codes. But the most appropriate way to achieve this, is by including overflow:auto; property to CSS. So that your CSS code for the main_container should look like this:
#main_container { margin: 0 auto; padding: 5px; width: 100%; overflow:auto; }
This will fix the problem without any further modification.
The Correct Display

Hide an Object with CSS

Sometimes you might want to hide an object from displaying in a particular page and not the other or in a particular screen size, in the case of responsive designs. In order to archive this, you need to obtain id or class of the object you want to hide and do the following:
- For Pages: Goto to the page you don't want the object to display and paste the following code:

<style> #object-id, .object-class{ display:none !important } </style>
object-id and object-class is the id and class of the object you want to hide. Note: Adding display:none !important; to any object CSS will prevent that object from rendering on the main page.
To get the object id or class of an element, simply right click on the element and click inspect element from a web browser.

- On a particular screen or print size: You can hide an object on a defined screen size by using a code similar to this:

@media only screen and (max-width: 460px) { #object-id, .object-class{ display:none !important } }

This will hide the specified object on any screen size less than 460 pixel. In a case when you where you want an object to be hidden in printout, just use similar code to the one below:

@media print { #object-id, .object-class{ display:none !important } }

The same is applicable for other properties aside the display property.

Indeed this should be 20 Key Questions Newbies Ask on CSS, but I can promise you that more is coming, for now, I have got a birthday party to attend. Subscribe to my newsletter to an email alert when new updates are published. For now, have fun!

Email Newsletter

Like what you read here in this blog post?
Get more like it delivered to your inbox daily.


Contact Form

Name

Email *

Message *