CSS Introduction
CSS stands for Cascading Style Sheets. Whilst HTML defines the content of the website pages CSS defines how the content
should be displayed. CSS was developed to separate the content from the presentation of a website.
The styles contained in the CSS code are applied to a particular HTML element or multiple elements and the combination of structural HTML and presentational
CSS is displayed in the browser.
CSS styles can be included in the HTML code of a page or contained in a separate file which is then linked to any HTML pages to which it applies. The three ways of applying CSS to HTML elements are:
- Inline using the HTML style attribute.
- In the
<head>section of a page with the HTML<style>element. - Linking to an external style sheet.
The style attribute.
This is one of the core attributes which can be used with the majority of HTML elements and takes
the following form:
<element style="css property: value; css property: value"
>content</closing tag>
As you can see the CSS property and it's value are separated by a colon and if you define more than one property the "property/value" pairs are
separated by a semi-colon.
For example:
Will give you:
This paragraph will contain text that is twice the size of the current text and purple.
The HTML <style> element.
If you want to apply styles to one particular page you can use the <style> element in the <head>
section of that page. When using the <style> element the type attribute is required to tell the
browser the style sheet language of the element's contents which for CSS is "text/css".
So to use our example above to change all paragraph elements on the page to double sized purple text we would put the
following code in the <head> section:
<style type="text/css">
p {font-size: 2em; color: purple}
</style>
</head>
This will affect all paragraph elements on a page but used in conjunction with the class or id
attributes the styles can be applied to only a particular class of elements or a unique element.
The <head> section of a page can contain any number of <style> elements.
Please note that, when used inline CSS is surrounded by double quotation marks "" because style is an attribute,
whereas CSS contained in the <style> element is enclosed by curly brackets { }.
External Style Sheet
Inline styles and <style> elements can be useful for applying styles to individual pages but this is also their
main limitation. An external style sheet gives you the ability to apply the CSS to any number of pages on a site with only one page of code.
The CSS styles are written in whichever text editor you use, saved with the ‘.css’ file extension e.g. ‘sitestyles.css’, and this file can
then be used on any page of the site using the link element in the <head> section of the page
to which the styles are to be applied.
When linking to an external style sheet the <link /> element has to include the href
, type and rel attributes and takes the following form:
<link href="sitestyles.css" type="
text/css" rel="stylesheet" />
External style sheets give you two huge advantages over using the other two methods, firstly one style sheet does the same work as
many, or potentially thousands on a large site, of <style> elements or inline styles, giving a significant saving in time, space
(download time) and cost across a large website.
Secondly when the site needs revising or one of the CSS styles needs to be changed it is far easier and quicker to change one style sheet than to have to
go through every page of the site changing <style> elements or inline styles.
A further benefit of external style sheets is the ability to tailor the style sheet to the user agent or output required by using the media attribute. Please see the link element for more details.
The Cascade
As you can see from these three methods it is possible to have three different style rules for the same element defined in different locations.
In order to avoid problems with conflicting CSS there is an order of precedence which decides which CSS to apply. Inline styles take priority and then
styles contained in the <head> section of a page and the lowest priority is given to styles in external stylesheets.
This order of priority is referred to as the cascade and gives CSS its name.