Understanding Cascading Style Sheets (CSS)

Folks who are just setting out on their web design journey often overlook how the code that styles their web pages works, especially the differences between inline styles, embedded style sheets and external style sheets.

Beginners in the field of web design tend to use inline styles or embedded style sheets rather than external style sheets.  This is often due to the use of WYSIWYG (What You See Is What You Get) editors such as Dreamweaver or Microsoft FrontPage as they allow beginners to create web pages using a drag and drop interface.

These types of applications don't encourage beginners to learn how to code by hand, which is something I highly recommend.

In this guide, I will show you why you shouldn't use inline styles and embedded style sheets and why external style sheets are your best option.

WHAT'S THE DIFFERENCE

So what's the difference between inline styles, embedded style sheets and external style sheets?

Well, quite simply, inline styles and embedded style sheets are contained within the body and head sections of XHTML documents, while external style sheets are separate documents all together.

External style sheets contain styling and presentation instructions which perform the same functions as inline styles and embedded style sheets do, though these external styles are linked to from an XHTML document rather than the instructions being contained within the body and head sections of the document itself.

Embedded style sheets are essentially inline styles that are contained within the head section of XHTML documents. This creates a middle ground between inline styles and external style sheets.

WHY SO MANY VARIATIONS?

Variety is the spice of life, and it's no different in the web design world.

Having three options to choose from when it comes to styling web pages gives web designers a lot of flexibility, although one technique has predominately become the standard for a number of reasons.

WHICH VARIATION SHOULD I USE?

Well, there is a simple answer to this question. You should use external style sheets.

Why?

BEST PRACTICE

Inline styles and embedded style sheets go against a major rule in best practice web design, separating style from content.

Separating style from content is important for a number of reasons.

Semantic Coding

Separating style from content makes your code more semantically correct.

Semantic code is important in web design because it allows your website to be accessible to a wider variety of devices, users and platforms.

Furthermore, semantic coding is important for SEO (search engine optimisation), something which I will discuss in a future article.