Basic CSS Syntax

CSS styles can be applied to a web page in three ways, inline styles, internal styles and external styles.

Inline Styles

Inline styles are styles that are applied to a specific HTML element, such as a heading or paragraph. These styles are only applied to the single element where they are defined. This could be used if it is required to apply a unique style to, for example, a particular paragraph on one page, but where you want all paragraphs across a number of pages to look the same, it isn't a practical solution, as the styles need to be repeated for each instance of the HTML element. The below example is a paragraph with inline styles making the text blue and the font size 20 pixels.

<p style="color: blue; font-size: 20px;">This is a paragraph.</p>

This method of applying styles is not widely used today as it could potentially involve repeating styles for similar elements, such as paragraphs, as in the above example. When the styles need to be updated they would have to be changed in multiple places.

One instance where this method of applying styles is used today is with HTML e-mails.

CSS Selectors and Their Syntax

CSS selectors provide the means to target every instance of specific content, either on a particular page with internal styles, or, on every page with external styles. They take the following format.

selector {
   property: value;
}

Internal Styles

Internal styles are those that are defined in the head section of a web page, using the 'style' tag. The advantage of this method over inline styles is that multiple HTML elements of the same type can be targeted at the same time, but only on the page that they are defined. This would mean that styles would have to be repeated on each web page where they are needed.

Below is the inline styles example re-written to target all paragraphs on a page, giving them blue text, with a font size of 20 pixels.

<style>
p {
   color: blue;
   font-size: 20px;
}
</style>

External Styles

To solve the issues of the above methods, external styles can be used. This is where the styles are placed into a separate file, known as a style sheet and linked too in the head section of each web page where they are needed.

<link rel="stylesheet" type="text/css" href="styles.css">

The contents of the style sheet giving paragraphs blue text, with a font size of 20 pixels, would be the same as with the internal styles example, but without the style tags.

p {
   color: blue;
   font-size: 20px;
}

This is the method that is predominately used in web design today and discussed further on the following pages.