10 Very Useful CSS Tips for Beginners

By -

Thanks to CSS, the style can be created independently of HTML code that defines the structure of the website. Today with a little knowledge of CSS, even a person without programming experience can give style to your website.

Whether you’re interested in learning CSS to create your own website, and if you want to just tweak a little the look of your blog, it is worth bearing in mind some basic principles to create a good CSS code. Let’s look for some CSS tips that may be useful for beginners.


1. Use reset.css

When it comes to displaying CSS styles, each of the different browsers have a different way of interpreting them. To avoid differences in the presentation of our websites, we use what is called a reset, which is a collection of parameters that return values of the styles to the same value for all browsers and from here, we define the parameters according to our needs.

We can do well with a separate file called reset.css , either by specification above all of our style sheet. Here is a collection of the best CSS resets.

2. Understand the difference between id andclass

This is one of the points that confuse most beginners, why use an ID and what use class? Well, we will use an ID when it is an item that appears once and only once on a website. In CSS define an id starting with the hash sign ” # “. On the other hand, we use a class when we will make it serve more than once in a given web document. To refer to a class in CSS the dot ” . “

3. Add comments to your CSS

Although when you’re creating the CSS you think that it is unnecessary to add comments, believe me you’ll thank. When you spend a few months and have been in between working on other projects and the CSS you wrote back then, you can lose a lot of time if you have not included comments. Best to put comments like / * - contact form - * / or / * - Main Menu - * / , it can greatly facilitate the work of revision and maintenance.

4. Discover the power ! important

! Important when you want to overwrite using a selector comes next, so you skip the CSS hierarchy. Here’s an example:

1 . Style {
2    background-color blue ! important ;  
3    background-color network ;

We see that override the color from blue to red, but the style will be blue, because we have it ! important . This is very useful when for example we are trying to override the WordPress CSS plugin and does not leave us, if we use ! important we put the values we want without problems.

5. Avoid using table

Previously it was used long table in HTML, if you are someone programming in the 90’s, sure you still think in the use table in the layout of your website, forget it! Tables should only use in case you want to tabular data in a table, nothing more. Discover the power of the div and forget about the use of tables.

6. Hides text behind an image

Sometimes we hide text behind an image. Clearly labeled alt can put the alternative text to the image, but if it is a type label h1 we may want to put the text on the label SEO issues. And here’s the catch: if you use text-indent: -9999 text go behind the image, despite being in the HTML document, which will be hidden from the user’s eyes, but not in the eyes of Google .

2    text-indent -9999px 
3    background url "titulo.jpg" no-repeat 
4    width 200px 
5    height 50px 
6 }

7. Use Firebug and improve your CSS

Many times when I teach web design and WordPress students ask me how I can make your writing is like this or page get a very cool effect that appears in the Easter page.Well, there are two ways, one, break the horns to the test over and over or two, settle Firebug and spy code page you like. Firebug is an excellent plugin for Firefox and Chrome, among other things, a single click lets you view the HTML and CSS of a particular element of a website. With this plugin not only learn a lot through the designs of other websites, but you save much time when you want to implement something you do not know how to do.

8. Use a CSS editor

If you work with Windows Notepad or something, be prepared to let your eyes on the screen. Better use an editor that uses different colors for labels, as this will greatly facilitate life. Here is a list of the best text editors for web design.

9. Do not use hacks for IE

We all know the problems that gives Internet Explorer, which interprets things as he pleases. Instead of using hacks or * main _main style, it is best to create a document IE7.Cara CSS IE6, I am of the opinion that should no longer support you, as a very outdated browser. To do this you can use a script that blocks content in IE6.

1 <! - [If lte IE 7]>
2    <link rel="stylesheet" type="text/css" href="css/ie7.css">
3    <! [Endif] ->

10. It uses an optimized code (shorthand).

Using a shorthand code optimizes charging time and code maintenance. The CSS shorthand means that instead of using:

1 p { margin-top 10px ;
2 margin-right 20px ;
3 margin-bottom :  30px ;
4 margin-left 40px ;}

is used:

1 p { margin 10px 20px 30px 40px ;}

Here are 4 ways to specify the margins:

He has over 5 years of experience as Online Media and Marketing Consultant, which allow him to enable companies to enhance and meet their Digital marketing goals. He has experience as both in-house and Agency Digital Marketing Experts. Ha has spent the most recent 4 years of his career focusing building Strong terms of Digital Marketing for his clients. In addition to his strengths on Building Brands and Serving Online Marketing strategy for his clients.

Comments are closed.