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.
margin: 0 auto;
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;
So that your HTML code should look like this:
<p>Some Contents Goese Here</p>
<img src=’http://4.bp.blogspot.com/-1FuGEi-VHac/UnTz_pqql2I/AAAAAAAADq0/zu0e6Rj9pLg/s1600/center-img.png’ />
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
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:
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:
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:
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:
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!