Useful Tips for Writing Better CSS and HTML

CSS and HTML are key languages to begin with, when you decide to invest your time in web design and development. They are powerful languages and most of the time may seem simple to work with.

However, every single one of us, beginners, or advanced developers, have committed basic or major mistakes working with both these languages. With this in mind, I believe it is extremely important and always welcome to learn some good tips and practices which I hope will help you improve your skills and experience.

Some of you may be thinking that since you don’t see anything out of place when viewing your web page, you have your HTML and CSS documents built correctly, but you may be wrong. The truth is that you should not trust everything you code. Using the same ID more than once on the same page won’t result in wrong alignments or retrieve any error (unless you try to validate), but it is in fact bad markup and a major flaw in your code.

Doctype

Not so long ago, we had to use those really long Doctypes that were almost impossible to remember. Now, since you just need to use <!DOCTYPE html> on the top of your document, we have a much cleaner and better solution. Nevertheless, some people still forgets to specify it. This is mandatory for a validated and organized HTML document.

How you should do it

Never forget your DOCTYPE.

ID vs Classes

An ID is a unique identifier which allows us to target a specific element on the page and, since it is unique, it can only be used once in a page. On the other hand, we have classes which allow us to do exactly the opposite. Classes are used when you have the same element more than once on a page.

How not to do it:

<div id="block">
   <div id="btn"></div>
   <div id="btn"></div>
</div>

How you should do it:

<div id="block">
   <div></div>
   <div></div>
</div>

Say no to inline styling

Inline styling is unfortunately a pretty common practice and at the same time a bad one. It has nothing to do with invalid code or bad markup, but with organized code and structure. Imagine you have 30 pages and you need to remove an inline style you have applied to the same div on every single page, it would take you forever and steal precious time.

How not to do it:

<div style="width: 100%; background: #fff;"></div>

How you should do it:

<div id="wrap"></div>

Ove use of divs and CSS Classes

So you started your own project, you know how to use divs, ids, and classes. Inline styling is not your thing (fortunately), and you love to create styles and apply them everywhere. That’s great, but don’t write more than you have to. Having a div with an unordered list inside and a class applied to each li element is unnecessary.

How not to do it:

<div id="navigation">
   <ul>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</div>

How you should do it

<ul id="navigation">
   <li></li>
   <li></li>
   <li></li>
</ul>

And in your stylesheet

#navigation li { float: left; }

Browser Resolution

According to the W3c’s latest statistics (January 2011), 13.8% of internet users have a 1024×768 screen resolution, and 85.1% use a bigger screen resolution. So the question is “What resolution I should design for?” I personally use a maximum width of 960 or 980 pixels for a vertical layout and between 550 and 640 pixels in case of a horizontal layout. Besides, though 13.8% seems to be a fairly low number, it still represents millions of internet users.

How you should do it

Consider everyone’s needs, and especially your target audience.

Block vs Inline elements

Differentiating block from inline elements can be a a delicate matter for beginners. A block element is displayed on a new line taking by default 100% width of the containing element, like divs (<div>) or paragraphs (<p>). An inline element is displayed with no line breaks meaning that it starts on the same line, taking only his own width, like span (<span>) or image (<img>). You can also change the way an element is displayed, this means that you can change an inline element to be display as a block and vice versa.

How you should do it

span { display: block; }

Use comments to organize your code

When I start a project, I try to organize it through commenting as much as possible and you should do the same. This is something purely optional but I highly recommend its use. It not only helps you find the section or element your are looking for, but also makes your life easier when you need to know which div your </div> is closing.

How you should do it

<!-- Begin #header -->
<div id="header">
<!-- End #header -->
</div>

Stylesheet

/* --------------------------------------------------------------
Header
-------------------------------------------------------------- */
#header { background: #fff; }

Cross-Browser Compatibility

When you decide to make something, you should place yourself in the role of the end-user, and imagine that, even today, some of them still use browsers like IE6. A page in renders differently in Firefox than in Chrome or Internet Explorer. There are some useful tools you can use to check how your page renders in different browsers.

How you should do it

Do not forget to pay attention to your layout in different browsers, systematically.

Keep it short – Generic classes, properties and CSS files


When you are coding you should always have one thing in mind, plan for the future. You are already using comments and keeping your code organized, so why stop here? The first thing I do when I’m coding CSS is to specify a section of generic classes, then on my HTML I simply use them alongside with other elements.

How not to do it:

Stylesheet

#firstblock { background: #000; float: left; }
.genblock { background: #006699; float: left; }

HTML

<div id="firstblock"</div>
<div></div>

How you should do it

Stylesheet

.left { float: left; }
#firstblock { background: #000; }
.genblock { background: #006699; }

HTML

<div id="firstblock"></div>

<div></div>

This is a simple way of declaring two classes. I like to find the most efficient way to do things, and as you can already guess, I really like keeping things organized, so when it comes down to properties, it’s the same thing. Why should we write the same property over and over again when we just need to write it once?

How not to do it:

#content { margin-top: 10px; margin-right: 12px; margin-bottom: 0; margin-left: 15px; background-color: #000; background-repeat: no-repeat; }

How you should do it:

#content { margin: 10px 12px 0 15px; background: #000 no-repeat; }

The ideal number of CSS files you should have in your project depends entirely on you and the way you work. I have been involved in projects where there was a “generic.css”, “main.css”, “global.css” among others, it took me forever to understand the purpose of each file. I usually have just two CSS files on my projects – style.css and reset.css.

How you should do it

You should make it simple and efficient to edit later on.

Don’t use heading tags randomly

Heading tags are not just there to make it pretty, they establish the importance of your content which makes them valuable for SEO. There are six Heading tags: h1, h2, h3, h4, h5, and h6. H1 is the most important, so you should use it for your web page or business name only. The rest of the tags should be used according to title or content importance. Also, you don’t need to have heading tags everywhere on your document.

How not to do it:

<h6>Post title</h6>

<h1>Text content</h1>

How you should do it

<h2>Post title</h2>
<p>Text content</p>

Use absolute position only when you have to

When you’re starting out, you can easily become addicted to the use of absolute positioning. This is because it is an easy way of placing elements, however, this property should not be used excessively. Since elements with absolute position lose their normal flow, it is almost impossible to align them with other sections on the page. You simply can’t tell a normal element to be on the left side of an element with absolute position.

How you should do it:

Use absolute position only when you need to, and not because it is easier.

Type fonts

So is there a font you really like and you would love to use it on your page, is it a standard font? What if not? These are are questions you need to ask before you choose your typography. When you choose a font you must always have a backup plan, this means that in case the user does not have the chosen font, the second choice (or third, etc) will appear. Examples of standard fonts are Arial, Georgia, Lucida Sans Code, Times New Roman, Verdana, Tahoma, and some more. Now let’s say you would like to use a font that is non-standard, what would you do? The most obvious answer is @font-face.

How not to do it:

p { font-family: AurulentSansRegular, Arial, Helvetica, sans-serif; }

How you should do it:

@font-face {

font-family: 'AurulentSansRegular';

src: url('AurulentSans-Regular-webfont.ttf') format('truetype');

}

p { font-family: 'AurulentSansRegular', Arial, Helvetica, sans-serif; }

Always validate


The title is pretty self-explanatory, you should always validate your CSS and HTML documents. Why? The answer is why not? You have a way to know if your code has errors and it gives you solutions to fix them, so really, why not? Add CSS Validator and HTML Validator to your favourites.

How you should do it

Validate your CSS, and after that do the same for your HTML.

Conclusion

Some may consider these tips and techniques common sense and simple to understand, others not so much, but the important thing is that every coder make mistakes, and practice makes perfect.

Hope you enjoyed the article and have some fun experimenting, but keep it organized!

16 Comments

  1. Paris Muncher 8 years ago

    There may be noticeably a bundle to find out about this. I assume you made certain good factors in options also.

  2. Shyama 8 years ago

    Whats up very nice site!! Guy .. Beautiful .. Wonderful .. I will bookmark your site and take the feeds also?I’m glad to find so many useful information right here in the submit, we want develop more strategies in this regard, thank you for sharing. . . . . .

  3. Delaine Veenstra 8 years ago

    This is the precise blog for anyone who needs to find out about this topic. You notice a lot its virtually hard to argue with you (not that I really would need…HaHa). You undoubtedly put a new spin on a topic thats been written about for years. Nice stuff, just great!

    • Trish 8 years ago

      You’re the one with the brains here. I’m wtacnhig for your posts.

  4. Tawny 8 years ago

    This forum neeedd shaking up and you’ve just done that. Great post!

  5. neethu 8 years ago

    Hey very cool blog!! Guy .. Excellent .. Superb .. I will bookmark your web site and take the feeds also?I’m happy to find so many helpful info right here within the publish, we need work out extra techniques on this regard, thanks for sharing. . . . . .

  6. kompozer tutorial 8 years ago

    Thank you for the good writeup. It in fact was once a leisure account it. Look complex to more added agreeable from you! However, how can we keep in touch?

  7. hi!,I love your writing so so much! percentage we communicate more about your article on AOL? I need an expert in this house to solve my problem. May be that’s you! Taking a look forward to see you.

  8. Hi there, I found your site by means of Google even as looking for a related subject, your website got here up, it looks great. I have added to my favourites|added to my bookmarks.

  9. I do consider all of the ideas you’ve introduced for your post. They’re really convincing and will certainly work. Still, the posts are too brief for novices. May just you please lengthen them a bit from next time? Thank you for the post.

  10. Thanks for some other excellent article. Where else may anyone get that type of info in such an ideal means of writing? I have a presentation next week, and I’m at the search for such information.

  11. Generally I don’t read post on blogs, however I would like to say that this write-up very pressured me to take a look at and do it! Your writing taste has been amazed me. Thank you, very great post.

  12. I have fun with, result in I discovered just what I was looking for. You’ve ended my 4 day long hunt! God Bless you man. Have a nice day. Bye

  13. Somebody necessarily help to make seriously posts I might state. That is the first time I frequented your website page and so far? I surprised with the research you made to make this particular put up extraordinary. Great process!

  14. Jenaya 8 years ago

    That’s 2 cleevr by half and 2×2 clever 4 me. Thanks!

Trackbacks

  1. Google 7 years ago

    Google…

    Wonderful story, reckoned we could combine a couple of unrelated information, nevertheless actually really worth taking a look, whoa did one particular find out about Mid East has got far more problerms too…

Leave a reply to Trish Click here to cancel the reply

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

*