Lesson 3 - HTML styling using CSS

Styling of HTML can be done in a number of ways. The easiest and often the least recommended way is to use inline styling where a style is applied to a single element by adding the style attribute. The generally accepted way of styling elements is to include a CSS stylesheet which is known as external styling. Internal styles can also be used.


Inline styles

The format of applying an inline style is as follows:

<tag style="property:value;>

As an example let’s apply the colour blue to some text:

<p style="color: blue;"><span style="color: #0000ff;">This text is blue</span></p>

Our CSS lessons go into more advanced styling of HTML elements.


Internal styles

Internal styles can be included by placing the tags between the tags.

<style> .someClassName {background-color: #FFFFFF;} #someIdName {color: blue;} h1 {color: green;} p {color: rgb(0,0,255);} </style>


External styles

External stylesheets can be included by placing a link tag between the head tags

<link rel="stylesheet" href="externalStylesheet.css">

Some commonly used style attributes:

font-family - changes the font

E.g font-family:courier;

font-size - changes the font size

This can be specified in %, px, or em. E.g. font-size: 20%; or font-size: 20px; or font-size: 2em;

text-align - aligns text

E.g text-align: center; | text-align: left;

background-color - changes the background colour

E.g background-color: green or background-color: #00ff00