Anatomy of a website part 1 - HTML / CSS

The 'e' logo

HTML

HTML is the language that defines the building blocks of a web page so that your browser (Internet Explorer, Firefox, Safari etc...) knows what is a picture, what is a link, where it links to and all the rest of the information that it needs.

CSS

CSS contains all the style information of a web page document such as the font colour, the background images, the borders and margins and much more.

Keeping it separate

A well structured website should keep the presentation, in the form of the CSS, completely separate from the content, in the form of the HTML.

Consider the following example of a product catalogue. If you click the switch button at the top it will change it's CSS. This different layout only requires the change of one line in the HTML.

Switch the CSS layout
Sample catalogue item one

Bella Helena Tank Top

  • Racer back style.
  • Low scooped neckline.
  • Banded hemline.

From £9.08

Sample catalogue item two

Wombat Tobi Top

  • Raglan style with contrast stitching.
  • Rib panels down raglan and side seams.
  • Raw edge neck, cuffs and bottom hem.
  • Locker patch with button hole label.

From £11.87

Sample catalogue item three

B&C Women-Only T-Shirt

  • Narrow 1x1 rib neck.
  • Twin needle sleeves and hem.
  • Suitable for sublimation printing.

From £6.39

Sample catalogue item four

Fruit of the Loom Slim Fit T-Shirt

  • Narrow self fabric bound neckline.
  • Twin needle sleeves and hem.

From £7.41