Messy Style in HTML & CSS

It looks like we’ll be spending some time on learning the rope of HTML and CSS styling. I do admit that I have some prior knowledge of it–but it is a messy one. The best way to put it is that I never learned the etiquette of how to write/code web pages. What’s even worse is that I never really knew that there are some HTML and CSS codes that are phased out or simply do not work in some browsers (whether they are new or old). What are some of the things I used to do? I used to:

  • leave a lot of whitespaces in the code file
  • multiple class, id and types that are identical to each other (meaning they overlap one another)
  • never left comments inside any HTML and CSS files for clear explanation of what I was attempting to do
  • never truly understood the concept behind selectors, box models, etc

What I struggled with the most in today’s learning is the CSS Precedence and their general rules. While I knew that CSS reads from top and bottom–but it really means that the most recent code in CSS format generally sets the priority in how the text, images, etc will be displayed on the web browser. Plus, if a selector is more specific than the other similar selector, it will also set precedence. Any CSS applied directly into the HTML file will take precedence over the external CSS file.

Come to think of it–there was another concept that I also struggled with.


I admit. Tables are not my favorite coding, especially when it come to coding them in CSS. It seems that they have their own rules to follow that generally does not applied to the content of the web browser. I hope I made sense as I write this out–this is my brain processing, trying to figure out how this works.

Perhaps reading a few chapters from HTML and CSS: Design and Build Websites written by Jon Duckett clear things up a bit. I highly recommend reading this book. Let’s admit it, every HTML books we read are usually dull and very manual-like. This book is nothing like that. It is full of visuals and clear, concise explanation that actually makes it fun to read through the pages.