4 Simple but Effective CSS Tips for Web Design

By | May 1, 2013
While learning CSS I’ve gone through many declarations and rules for designing a webpage. Here are some CSS Tips or Declaration that you should keep in mind while designing a website or a blog. These tips were originally posted on Line25. I’ve added some more details and information after a good research on those points.

Background-size

body {
background: url(image.jpg) no-repeat;
background-size: 100%;
}

With the use of background-size property, we can now set any image or element to spread full-size of the page. Setting background to any scale or size. This declaration is simple but a useful one. Get more details.

Using “margin: 0 auto” declaration

#final-element {
margin: 0 auto;
}
margin: 0 auto property has always been useful to center element or container you want. May it be the header, navbar or the footer, its always used to wrap these containers within main containers with 100% width and giving the content margin: 0 auto property to center it. In short, making any element centred with respect to its parent element.

Overflow: hidden

.container {
overflow: hidden;
}
You would have encountered some floating errors for some containers in your design and you would have probably used this declaration overflow: hidden. It’s the most useful trick. It’s always been helpful for making different shapes in CSS and completing some beautiful tasks like creating the ribbons.

.clearfix

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Well, if the overflow doesn’t work then you can use this bunch of code. If you want to learn more about floating and solutions to problems caused by them, then read this awesome article from CSS-Tricks.


One thought on “4 Simple but Effective CSS Tips for Web Design

  1. Emma Jones

    these are indeed very useful tips, i am designer i do a lot of work with CSS and html. i know importance of these tips, thanks for sharing.

    Reply

Leave a Reply

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