vladislav

HTML / CSS basic concepts and principles

The CSS box model

CSS standard box modelThe CSS box model is a W3C standard that draws the basic principles on which a box is drawn in HTML/CSS. Since every HTML element is actually a box, this principle applies to every element. Basically it states that the screen estate a box takes up is defined by the following parameters, in this order from inside to outside:

  1. width/height
  2. padding
  3. border
  4. margin

Here the content area is defined by width/height.

Quirks mode, standards mode and almost standards mode

All these terms have to do with the issue of browser compatibility. It all started back in the dawn of browsers, where every browser laid down its own flavor of standards and tried to force it just for the sake of “I have a bigger audience and think things should happen my way”.

CSS box model - quirks modeSo, the interpretation of CSS box model was different for IE and Netscape (the big players back then). Since these differences became very inconvenient for webdevelopers it was obvious W3C standards (common standards) was the way to go. Still, many websites had already been created using the distorted rules existing so far, and if the browsers began displaying them according to standards many sites would break.

So developers had to be given a way to switch between the standards mode and quirks mode (the wild west of browsers). In quirks mode (the old way of displaying pages) different bugs are “available for public use”, the most notable difference in the box model being that the box size is defined by width/height, border and margin (no padding – padding actually is a part of with/height, and the content area is defined by width/height minus padding). This switch is the DOCTYPE definition that should be given in the start of every HTML document, which tells the browsers how to interpret the page – in standards or in quirks mode.

The “almost standards mode” is a hybrid interpretation employed by some browsers. It differs from standards mode only in the interpretation of laying out images in a table (which is in quirks mode), so that old websites using many sliced-up images laied out in a table structure are less likely to break.

Semantics

Probably you’ve heard this a bunch of times – “…using semantic code”. What does it actually say? Well, this is to say your code should be meaningful by itself. The code is not just there to accomplish the goal of presenting a certain piece of content on the screen in a specific way, but should be universally describing the content. Thus it would be a matter of CSS changes to make the content look in an entirely new way. Also, each content entity will be readable, described by its role – address, content, header, box, username, etc.

Let’s give a small example. What’s wrong with the following piece of code?

<span class="red">A message goes here.</span>

Technically – nothing. Semantically, however, the coder binds the class name to a specific website theme/look/skin, instead of keeping the code semantically meaningful. An important rule of web programming is to keep the three layers (action, design, content) separate. It would be better to use a class name like “emphasized”, for example. If we use .red we’re facing two major issues:

  • when changing the site theme at a certain stage of development to one with green elements, for example, the .red class would look weird if it displays as green;
  • semantically the code is richer when using meaningful class names (like “emphasized”, “date”, “section”), and thus the webpage will be more delicious a bite for search engines.

Classes vs. IDs

You can assign both attributes to an element, but which one should you use?

  • From a CSS perspective IDs have higher priority. So, if you have both a class and an ID assigned to an element, the ID definition will take precedence:
<style>
#header { color:green; }
.myStyle { color:red; }
</style>
...
<div id="header" class="myStyle">Lorem Ipsum</div>

The text will show as green, despite the fact that .myStyle was defined on a later stage in the CSS.

  • From HTML/JS perspective, you should only use unique IDs in a document, so it is appropriate to use IDs for major document elements like #header, #footer, #content, and classes for elements that are found repeating in a document (.box, .column, .emphasized).

The advantages of writing standard-based DIV based HTML

CSS-based layouts have been around for over 10 years now, so it is a sin not to use them. It has multiple advantages before the table-based layouts, and some of them are:

  • you get everything done with a smaller amount of code, thus achieving a better code-to-text ratio, which affects SEO ranking, too;
  • you get better control over separate elements (e.g. moving the logo around is much easier and does not require re-slicing the whole site layout); this is much like the ease of editing a layered Photoshop/GIMP file vs. editing a flattened JPG;
  • you get better separation of content, design and behaviour; thus different team members can work separately and independently on different aspects of a site (design, development), without interfering; also, you get a much easier time at debugging issues and making changes;
  • you get an easy way to make any design changes (effectively switch between themes) by not changing a single line of content code; all you have to edit is your CSS file;
  • you get a thing to brag about in front of your friends – writing compact and standards-compatible code is certainly an accomplishment 🙂
  • by writing standard code you make sure your site will work and look properly in a vast amount of browsers – even in future browsers, ones that will come out 2 years from now.

One Response to “HTML / CSS basic concepts and principles”

  1. bhupesh Says:

    fantastic article…great

Leave a Reply