Styling HTML

In the previous section, we added the Style attribute to alter the appearance of some of the HTML elements. The Style attribute is one of the ways we can add CSS properties and values to HTML.

CSS (Cascading Style Sheets) defines how an HTML element should be displayed and can be applied in three different ways:

Inline CSS styles – using the style attribute
Internal CSS styles – defining CSS styles in the <head> of the HTML document
External CSS stylesheet -linking an external CSS file to the HTML document

Inline CSS styles

For the examples in the previous article, we used the style attribute to add inline styles to a short piece of HTML code.

The style attribute is used to set the CSS property and value.

The syntax for style attribute includes the attribute, property : and the value of the property followed by a closing semi colon ;.

<h1 style=”property: value;”>Headline</h1>

For example, to change the colour of a headline we add the style attribute to the headline tag (h1), set the property to color: and the value to red;

<h1 style=”color: red;“>Red Headline</h1>

Result

Headline

Additional CSS properties and values are added by adding more CSS property:value; Remember to include : to each property and ; to the end of each value.

<h1 style=”color: red; text-align:center;“>Red Headline</h1>

Result

Headline

Internal CSS styles

Internal styles are used to define CSS properties and values for a single HTML document (page).

Internal styles are added to the <head> section of the HTML document using the <style> tag.

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Blue Headline</h1>
<p>This is a simple paragraph</p>
</body>
</html>

Inside the <style> tag we add the CSS selector (element, class or id) and CSS properties and values for each element to be adjusted from its default or inherited state. Each selector is followed by the property and value placed between { } curly brackets (braces). Additional properties and values can be added after each semicolon (;).

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue;}
h2 {color:grey;}
</style>
</head>
<body>
<h1>Blue Headline</h1>
<p>This is a simple paragraph</p>
</body>
</html>

Internal styles apply styles only to a single document (page), to add styles to multiple pages without having to repeat the CSS styles on each page we should use external style sheets.

External CSS

An external CSS is a document which contains only CSS syntax and includes all styling information to format the HTML content.

To link the external CSS to the HTML we use the self closing link tag <link> with path to the CSS file href="filename.css", followed by the rel (relationship) rel="stylesheet" and the type of file (MIME) type="text/css".

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

This link is added to the <head> section of the HTML document.

<!DOCTYPE html>
<html>
<head>
<link href="styles.css "rel="stylesheet" type="text/css">
</head>
<body>
<h1>Blue Headline</h1>
<p>This is a simple paragraph</p>
</body>
</html>

An external CSS document includes the properties and values for each of the HTML elements. In the CSS document, each element is named using its selector followed by its CSS properties and values written between { curly brackets (braces) }.

body {
background-color: lightgrey;
h1{
color: blue;
}
p {
color: grey;
}

It is nearly always best to link to an external CSS file, rather than use inline styles or internal styles, as this makes HTML and CSS easier to maintain and update. However, for small single uses it may be helpful to use inline or internal style to reduce the number of server request for the external CSS document.

As a general rule, HTML document should be used only for content and an external CSS document should be used for presentation.

Next step
HTML – 9 – Semantics