Guide To CSS — Part 2

In the last part of this starters guide, we discussed talked about what CSS was, how it affected browsers and briefly looked at how CSS looks. Today we will be discussing the different placement types of CSS. CSS can be placed inside a document using three methods: internal, external and inline. Each method has its own advantages and disadvantages. Some designers often do use all three methods in their codes where as most choose to keep the styling codes in one separate location to ‘beautify’ their front-end code.

Inline CSS

In CSS it is possible to place styling in your HTML code. Inline CSS has the highest priority out of the three methods. However, as Tizagon.com explains it, inline CSS detracts from the true purpose of CSS.

Believe it or not, CSS is built into every HTML tag. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute. Let’s see this in action with defining a paragraph tag:

<p style=”background-color: #000000; color: white;”>
This is inline CSS with a brown background and white font color.
</p>

The output of this is:

Common Mistakes

When using inline CSS you must make sure that you do not use quotations with your CSS. If you use quotations…