Now-a-days, CSS is very necessary for every type of website; where either it is gaming website or government website. If you don’t write CSS in the correct manner; then it can make your web page load slowly. White spaces are common in beginners, CSS files, but they usually ignore them. Let’s start with some basic steps:

Write CSS In Correct Way!

Beginners [not all], don’t take it seriously, they just make all the attributes in single line, just because pressing enter after each attribute is annoying them? Come on, you should write CSS in the correct way, it will help your website to load faster. But if you have to define only in a single property, then you don’t need to make three lines instead of one. Alright, here is an example of perfect CSS structure:

Simple, readable and perfect. Making a long line is bad example of writing CSS. Also, you should avoid white spaces while writing CSS, it can also affect your page load time.

Comments:

Comments are your best friend in CSS. Like programming languages, commenting help you to find the specific value easily, but do not over-comment. You can comment using /* and end the comment with a */ Best example of commenting in CSS is:

Above is a perfect example of commenting in your CSS document, unlike comment each value one by one. There are many features of commenting, you’ll find them if you get into a complex css file. Not only comments, make your classes, ids easy to understand. Name them properly.

Define Multiple Attributes Together

Sometime, we have to describe same properties of multiple attributes and here beginners make lots of lines to describe a single property for multiple attributes, which can be done in on a definition. For example, if you want to change the text decoration of id nav, footer and sponsor. Then, instead of writing

You can write this all in a single line by using comma (,). Look below:

Simple

100% Website Width Tips

While creating a 100% width page, you should keep a word in your mind and that is ‘Mobile’. Yeah, some css beginners make their website 100% wider, which means it’ll go wider until it touches the left and right side of the browser. But beginners should use min-width with 100% width, so mobile users can get a perfect view of your website. Min-width property is help for web page view, if someone (of course web designer or something) pressed CTRL + – while visiting your website, it will give him very bad impression on your website, as every will be messed up with each other, if you’re using 100% width. Just use min-width with it and define the minimum width for the user.

Use Linked Css File

There is nothing bad in using internal style in your webpage, but if you think your website design can be stolen with the help of css, then you should use to link css files! Linked files aren’t visible for visitors. You can simply link the css file using <link> tag.

Style Some Tags In Cool Way

Design tags in a cool way help you to make your website great! Um.. wait.. not great…  AWESOME! Here are basic tags, you should globally style [Most people do not style these tags]. Like <hr/> which makes a horizontal line, you can style it using css! Different the paragraphs, posts or anything in stylish way

Reset The CSS Document:

Before styling anything, you should reset your CSS document, because some browsers have default css settings for all web pages. To avoid this, simply reset your CSS. But instead of putting padding:0 or margin:0 on top you should use Eric’s reseting technique. Because margin and padding is not only properties, that should reset. Good luck!

Do You Know Something Else?

Some readers are more familiar with CSS than me, so if you have some tips or tricks please feel free to reply to comments. Hope, you enjoyed these tips and tricks, don’t forget to provide feedback on this so I can make my tutorials more better.