HTML was not intended to be a graphic design tool.

It was set up as a
simple way to display text in a browser, rather like a word processor
displays text on a page. Tags were added over the years in order to
add a bit of colour and life into the basic white page (actually, grey at
first). So along came things like images, tables, frames, and forms.
These could all be presented on the page using straight HTML code.

Web designers clamoured for a better way to present their work on a

web page. Plain HTML just wasn't enough. After all, with HTML, in
order to get text or an image exactly where you want it, you have to
resort to complicated tables to force the alignment. And suppose you
want colour behind a single paragraph of text, and not have to colour
the entire page? Very tricky with straight HTML. And what about
hyperlinks? Is there any way, with HTML, that we can turn the
underline on and off?

These questions, and many more, were finally addressed by the

introduction of Cascading Stylesheets. A Style is, basically, just
another way to manipulate elements on a page, in order to bring a
spark of life into your web design.

What is a Stylesheet?

If you were using a word processor like Microsoft Word, you could tell
the word processor how you want blocks of text to be formatted. For
example, all of your page Headings could be in 28 point Times, bold,
and coloured red. If you wanted the same Heading again, you can just
click a drop down list and select the Heading style you set up.

Using straight HTML, you can't do that. There's no way to apply the
same formatting with a single Tag. Cascading Stylesheets, however,
let you do precisely that ' change whole blocks of text with a single
tag. This not only makes your code easier to read, it is also very
simple to change all the formatted blocks of text to say a different font
size or font colour.

For example, in HTML, if you want to set the first paragraph of every
page to bold and italics, you'd have to do this for every single
paragraph that needs it:

<P>
<B><i>This is the first paragraph on page One. The same font styles
are needed for each page on my web site.</i></B>
</P>

With Stylesheets, you can get rid of all that code, and place it in the
HEAD section of your page. You would then just apply the Style to any
paragraph that needs it. Like this:

<P Class = "FirstParagraph">

This is the first paragraph on page one. The same font styles are
needed for each page on my web site.
</P>

The new code, I'm sure you'll agree, looks much cleaner. And if you
decided that the text colour should be blue, you can just make one
change to your Stylesheet code and all the first paragraphs of your
pages would change.
A stylesheet is set up by using the word STYLE in between two angle
brackets. An end STYLE tag is needed to tell the browser to stop
formatting the style:

<STYLE>

</STYLE>

Your stylesheet code then goes between the two Style tags. Here's a
style that can change text blue:

<STYLE>

.Font1 { Color: Blue }

</STYLE>

<P Class =" Font1">

This is my text.

</P>

Although you may not understand the code layout yet, the point is that
you can add other styles to the one above that we have called Font1.
We can add a bold style and a size style:

<STYLE>

.Font1 {
Color: Blue;
Font-size: 24pt;
Font-weight: Bold;
}
 </STYLE>

Now the part of the code where we applied the style (P Class = Font1)
will have its text updated. We don't have to make any changes at all to
the P part of the code.

So a style is way to change blocks of code (or even individual words)

and apply formatting to the block as a whole. You don't need individual
HTML tags in the BODY of your page; just using the style name once
will ensure that your formatting is applied to the whole block.

In the next lesson, you'll learn about CSS Rules.

Cascading Style Sheet Rules

We've produced a video to go with this lesson. It's recommended that you read the text below
as well, though. The video is here:

Cascading Stylesheet Rules

A Cascading Stylesheet rule tells the browser what the HTML looks like, and what it should do.
A rule can dictate what just one HTML tag should look like, or you can construct your own rule
to be applied as and where you want it.

For example, a rule can be set up that tells the browser to format every <P> tag so that its first
line is indented. Or you could construct your own paragraph rule, and just apply the style to
certain paragraphs, not all paragraphs.

There are three parts to a Rule: The Selector, the Property, and the Value.

The Selector

There are three different kinds of CSS Selector: An HTML selector, a Class selector, and an ID
selector.

An HTML Selector is the text part of an HTML tag. The complete paragraph tag is
<P>. So its Selector is just P ' in other words, strip the angle brackets off and you get
the HTML Selector.
 A Class Selector is one you set up yourself, to be used anywhere on your page. The
Font1 from our STYLE example above was a Class Selector. We picked the name
ourselves and then applied the style to some text on the page.

An ID Selector is similar to a Class selector, but you use them to identify a particular
element, a text box element on a form, for example.

Here's an example of what all three selectors look in a STYLE tag.

The first one, H1, is the HTML Selector. Notice that it has had its angle brackets removed. With
an HTML selector, all the HTML tags on the page will be formatted in the style you have set. So
for H1 above, all the text between the <H1></H1> tags on the page will now be in Red.

The second one, .NewFont, is the Class selector. Note that a class selector must start with a full
stop (period). Then you type the name for your selector (anything you want). No space is added
between the full stop and the name of your selector.

The third one, #NewTextboxColour, is the ID selector. An ID selector starts with the
hash/pound (#) symbol. You then type the name you want to use for your ID selector. Again, no
space is added between the symbol and the name of your selector.

Property and Value

Once you have set up your Selector, you then define the Properties and Values for that selector.

The Property for the selector is the thing you're trying to change. Examples are: Font, Color,
Background, Margin, Text.
The Value for the selector is the new setting for the property. For example, for our COLOR
property, we can set it to a value of an actual colour (red, blue, yellow), or a colour code
(#FFFF00, #000000).

The property and the value are enclosed in curly brackets { }. The syntax for the whole thing
would then be:

Selector {Property: Value}

An example is:

H1 {Color: Red}

H1 is the selector, Color is the property, and Red is the value of the property. Note the colon ( : )
after the Property. This is used to separate a Property from a Value, so that the browser knows
which one is which.

If you want to add more than one property and value, there are two way to do it: all on one line,
with each pair of properties and values separated by a semi-colon ( ; ). Or you can put each pair
of properties and values on multiple lines separated by a semi-colon ( ; ). Like this:

H1 {Color: Red; Font-weight: Bold; Font-Size: 16pt;}

The multiple lines version is this:

The multiple lines version is easier to read.

So, to sum up:

​ A CSS rule has three parts, a Selector, a Property, and a Value

​ The Selector can be a HTML selector, a Class selector, or an ID selector
​ You separate the Property and Value from the Selector by enclosing them in curly
brackets, a left curly bracket first { and a right curly bracket to close the rule }
 ​ A Property is separated from a Value by a colon ( : )
​ If you're using more than one pair of properties and values for the same selector,
separate them with semi-colons ( ; )
​ In the next lesson, you'll see where to put your styles.

Where to put your styles

STYLES can be inserted into three locations: Inline, Embedded, and External.

Inline Style Sheets

You can place a style tag directly in a HTML Tag. This is called Inline. Inline styles will override
ones placed elsewhere. Here's an example of an Inline style:

<H1 STYLE = 'Color: Red'>My Heading</H1>

To place a style in a HTML tag, do the following:

​ Type the Tag you want to change

​ Next, type a space and then the word STYLE
​ Type an equals sign ( = ) after the word STYLE
​ Type a double quote mark
​ Type the Property followed by a colon
​ Type the Value
​ Type the another double quote mark
​ Type the right angle bracket ( > ) of the HTML tag

​
​ Embedded Style Sheets
Embedded styles go in the HEAD section of your HTML page.
When you embed a style in the HEAD section, you use the two
tags to tell the browser where the style starts and ends. You can
add a TYPE attribute, if you want. But modern browsers don't
need it.
Then in between the two STYLE tags, you would type your CSS
Rules.
External Style Sheets
Instead of typing the <STYLE> tags and the code for all your
CSS rules in the HEAD section, you can type it all in a separate
text file. You then 'tell' the browser where the text file is. The text
file (along with its code) is then treated as though it were in the
HEAD section. You set up an External stylesheet like this:

To embed a stylesheet the LINK tag is used. The REL attribute

tells the browser that you want to link to a stylesheet; the TYPE
tells the browser what sort of file is being used; the HREF
attribute tells the browser the name of the file, and where the file
is. (You haven't done file referencing yet, so don't worry about
HREF for the moment.)
External stylesheets have a big advantage over embedded ones
because they can be used for all the pages in your web site. All
you need do is insert the LINK tag in the HEAD section of your
website's pages. With Embedded stylesheets, you would have to
have the same STYLE code in the HEAD section of every page.
External Stylesheets can save you a heck of a lot of typing (or
copying and pasting).
External stylesheets are just text files, so you can write them in
any text editor. Something like Windows Notepad is ideal. Here's
a screenshot of an external stylesheet written with Notepad:

Note that no TAGS are used in the external stylesheet. There are
no <STYLE> tags or HTML tags, just the Selectors and their
Properties and Values.
Note, too, that three styles have been set up. You can do this
with embedded STYLE tags as well. You can have as many
different styles as you want between one pair of <STYLE>
</STYLE> tags.
If you are using external stylesheets, you are not limited to only
one. You can use as many external stylesheets as you need. All
that is required is a different LINK tag for each stylesheet.
When saving your external stylesheets, you don't have to save it
with the extension .css. You can save it with the extension .txt. In
 the HREF part of your LINK tag, you would then have this:
HREF = style1.txt
instead of
HREF = style1.css
In the next part, you'll learn how to use your CSS selectors.

How to use CSS Class and ID Selectors

You have seen how to set up a stylesheet. And you know that if you
set up a HTML selector, then all the HTML tags will have their values
reset with the new values you specified. For example if you had this:

Then all the H1 headings you used between the two BODY tags would
have the text between the two <H1> tags coloured red.

In other words, to use your new HTML selector, you don't have to add
anything else to your HTML code. Just use the tag in the normal way.

However, Class and ID selectors are slightly different.

Using Class Selectors

To set up a Class Selector, the code was this:

 .ClassSelector {Property: Value}

First, you type a full stop (period). Then you type the name of your
Class Selector (which can be anything you want). The Property and
Value are then as normal. An example is this:

The .FontOne is the Class Selector, a name we made up ourselves.

In between the curly brackets, we're then saying 'Every time this Rule
is applied, the colour of the text will be red".

You can use this new Rule inside a normal HTML tag. Like this:

<H1 Class = "FontOne">My Heading</H1>

When applying your new Class Selector Rule, the word 'Class' is
used. You then type an equals sign ( = ), followed by the name you
gave your Class Selector. In our case, this was FontOne. But note
that the full stop (period) is now missing from the start of the selector
name. If you put the full stop in, your Rule won't work. Note that
although we've used quote marks around the Class name, this is not
strictly necessary. It is recommended, though.

Using ID Selectors
You use an ID selector in exactly the same way that you use the Class
selectors. The only difference is in the word used when applying the
Rule. Instead of Class you use ID:

This is what the above code would look like in a web page:
But that's enough of the theory for now. Let's get some practical work
done. We'll go through the various ways you can add a STYLE to your
web pages using your text editor. The first code we're going to write
will centre a heading on a page. You can then use the same code to
centre anything on your page. Click below to get started.

Inline and Embedded Styles

Inline Styles

Open up the HTML template text file you created at the start of the
course. Click File > Save As in Notepad. Save the file with the name
newpage.html. Don't forget to change the Save as type box to All
Files before clicking the Save button, if you're using Windows.
Add some text for the TITLE tag. Add an H1 heading, with some text
between the two H1 tags. Now add a paragraph of text below the H1
heading. To create an Inline Style, click after the first H1. Tap the
space bar on your keyboard. Type the following:

<H1 style=text-align:center>

Make sure there is no space after the colon and before the word
'center'.

Your HTML code should look something like ours below:

(One thing British English users should note is the two different
spelling of the word 'centre'. American English is used in HTML, so it's
'er' rather than 're'.)

When you have finished typing the code, view the results in your
browser. You should see that the heading is centred on your page:
So if you want to centre things on a page, you need to use the
text-align property. After a colon, you add the value. In this case
center.

(In previous versions of HTML you could use the HTML tags
<CENTER> to centre things on a page. However, in the new version
of HTML, version 5, this tag is now withdrawn (deprecated).

Exercise
As well as using center after the text-align: property you can use the
following: left, right. Try them out for yourself. Simply replace the word
center with one of the other text-align options.

Embedded Styles
As was mentioned, Embedded Styles go in the HEAD section of your
code. To try them out, add the following highlighted CSS to your code:

So the text alignment we've added is to align right. However, the Inline
Style is for centre alignment. So which one gets executed?

Save your work and refresh your browser page. You won't see any
changes. That's because the Inline Style will override the embedded
one in the HEAD section.

Delete the Inline Style for the H1 heading. You should then just have
this for the H1 heading:

<H1>Centred Heading</H1>

Save your work and refresh the web page in your browser. It should
look like this, now:
The heading is right-aligned.

Exercise
Change the value of the text-align property to Center. Save your work
and Refresh the page in your browser.

In the next lesson, you'll learn about how to handle fonts with CSS.

CSS and Fonts

In HTML versions prior to the new version, which is HTML 5, you
could specify a Font with HTML tags. If you wanted Arial, for example,
you could do this:

<FONT face="Arial, Helvetica, san-serif">Some text here</FONT>

However, In HTML 5 the FONT tag is deprecated. That doesn't mean
you can't use it anymore, as browsers are backward compatible,
meaning that older code will work with all browsers. But if you want to
go with the modern way of doing things then fonts, font sizes, and font
colours should be done with a Stylesheet.

To change the font on your page, the font-family CSS property is used:

font-family: arial, helvetica, sans-serif;

You specify the family because the person viewing your page might
not have the first font on your list. In which case, the second font is
tried, then the third. (You can have more than three, if you want. Or
less than three.)

You can specify a single font instead, but not everybody has that fancy
font you like so much. In which case, they would get the default, which
is usually a serif font.

NOTE: A serif is mark or embellishment on the vertical or horizontal

line of text. Here's an example of the serif font Times New Roman:

A sans-serif font is one without marks or embellishment. Just straight

lines, in other words. Here's the sans-serif font Arial:

And here are some default font families you can use quite safely:
 Times New Roman, Times, Serif
Courier New, Courier, Mono
Georgia, Times New Roman, Times, Serif
Verdana, Arial, Helvetica, Sans-Serif
Geneva, Arial, Helvetica, San-Serif

Try them out for yourself with the following font-family style added to
your H1 code:

Save and refresh your browser. The heading should change from a
default serif font to one of the sans-serif fonts: Arial, Helvetica,
sans-serif.

But your browser should look like this:

Now try one of the other font-families on the list. Here's what your
browser will look like if your try Courier New, Courier, Mono:

In the next lesson, you'll learn about font colours.

Font Colors
We've produced a video to go with this lesson. It's recommended that
you read the text below as well, though. The video is here:

Web Color Values

There are quite a lot of other font styles you can use in your CSS.
We'll start with font colours. (Strictly speaking, though, COLOR is not
a font style - it can be used just about anywhere to colour lots of
different things.):

You can have just about any font colour you want for your text (British
English users, note the missing "u" after the second "o". The American
spelling is used in HTML and CSS). To specify a colour, you can use
one of three formats:

​ The name of a colour spelled out

​ The name of a colour as a Hexadecimal value
​ The name of a colour as a RGB value
​ There is a rather long and exotic list of colour names you can
use, things like Cadet Blue, Ghost White, Lemon Chiffon. But
you can also use a simple colour name like red or blue. The CSS
code is this:
H1 {
text-align: center;
font-family: Courier New, Courier, Mono;
color: red;

}
So you type the word "color" followed by a colon. You then type
the name of your colour.
There are 17 common colours, and 130 not so common. The
common colours you can use are: aqua, black, blue, fuchsia,
gray, grey, green, lime, maroon, navy, olive, purple, red, silver,
teal, white, and yellow.
For a full list of all the colour names you can use, see this
Wikipedia page:
Wikipedia - Web Colors

​
​ Hexadecimal values
Hexadecimal values are used quite a lot in web design. If you've
never heard of them before they use the number 0 to 9, and the
letters A to F (Base 16). In Base 16, the letters are used instead
of the numbers 10, 11, 12, 13, 14 and 15. So A = 10, B=11,
C=12, etc. If you want to represent the number 256 in
Hexadecimal then it's FF.
Three colour values are used, one for Red, one for Green, and
one for Blue. Each colour value has two Hexadecimal
place-holders. For example, here's the colour Red:
#FF0000
Here's the colour Green:
#00FF00
And here's the colour Blue:
#0000FF
So red has two letter F's in the Red position, two zeros in the
green position, and two zeros in the blue position. In other
words, switch the red value full on, and switch the green and
blue values off.
Green has two zeros, two F's, then two zeros again. Blue has
four zeros then two F's.
Black just has 6 zeros, meaning switch Red, Green and Blue off.
Note that you need to use the hash/pound symbol ( # ) before
the six place-holder values.
You can combine the Hexadecimal number and letter values:
#2F0B99
Try them out for yourself in your code:
H1 {
text-align: center;
font-family: Courier New, Courier, Mono;
color: #2F0B99;

}
Exercise
Change the values in the six positions, using the numbers 0 to 9,
and the letters A to F. What are the following colours?
color: #1BAA12;
color: #1087AC;
color: #451DE2;
 ​

RGB values
You can use RGB values in your CSS, if you prefer. (RGB stands for
Red, Green, Blue.) Again, place-holders are used for the different
colour values. This time, you use the number 0 to 255. You use them
like this:

color: RGB(255, 0, 0);

Note that the number are typed between a pair of round brackets, and
are separated by comas.

Exercise
Play around with the RGB values. What are the following colours?
color: RGB(0, 255, 0);
color: RGB(125, 125, 0);
color: RGB(255, 255, 10);

Instead of experimenting to get the colour you want, an easy way to

get the correct Hexadecimal or RGB colour is to type the words "color
picker" into a search engine like Google. You'll then have plenty of
web sites that give you're the correct values to type simply by playing
around with colour sliders.
In the next lesson, you'll learn about font sizes.

Font Size with CSS

There are plenty of ways to change the font size with CCS.
You can change the size of your page fonts with the font-size property.
The values for the property, however, can be a bit tricky. Take a look at
these values for font-size:

font-size: 200%;
font-size: 32px;
font-size: 2em;
font-size: xx-large;

They are actually the same size! Try them out in your code. Add the
following highlighted CSS Style:

Save your changes and refresh the page in your browser. You should
see the paragraph of text change size.

Now try the other three sizes: 200%, 32px, and 2em. You should find
that they are all the same size (or near enough).
Which one you use is up to you. In older browsers, however, using the
fixed sizes values of px and em means your users may not be able to
increase the size of your fonts. This matters to those whose eyesight
may not be perfect, and therefore need a bigger font when reading
your text. But browsers allow you to zoom in and out by holding down
the CTRL key and pressing + or -. (You reset by pressing CTRL then
0.) So font-size values are not that important. A lot of professionals,
though, will set the BODY tag's font-size to 100%, then use em as the
value. Like this:

This means that all the font sizes between the two BODY tags are set
to the browser's default size of 100%. In pixels, the default size in
browsers is 16px. This is equal to 1em. The P tag above is setting the
font-size to one and half times the default, while the class
ChangeFontSize is setting the font-size to two times the default.

The other sizes are seldom used. But here they are:

xx-small
x-small
small
medium
large
x-large
 xx-large
smaller
larger

Try them out and see what happens.

In the next part, you'll learn about styling fonts.

Font Style, Font Weight, Font Variant

Font-Style

There are only three font styles to choose from: normal, italic, and
oblique. Of course, the default is normal, so you don't have to use
font-style unless you want italic or oblique text. You use them like this:

There's not a great deal of difference between italic and oblique,

though. If you want to see the difference, use a sans-serif font, with a
large font size.

Font-Variant

Font-Variant is used when you want small caps for text:

And here's what it looks like in a browser:

Font-Weight

The weight of a font is how thick it is. There are lots of values you can
use here. The most common one is Bold. But you can also have
Bolder and Lighter. As well as the named weight you can also use a
number from 100 to 900. It's better to stick with round numbers,
though, as the difference between 100 and 150 is practically
impossible to see. Here's how to use font-weight:

Add a second paragraph of text between your BODY tags and try it
out:
Here, we've set all paragraph tags to have bold text. Then we've
added a Class Selector called Change_Font_Weight, which we've
set to lighter. We've then used this class on the second paragraph.

Save your work and refresh your browser to see what effect it has.

Exercise
Try some of the number font weights to see how they work. How
different is 100 from 900?

We'll take a break from CSS, now, but come back to it later. In the next
section, you'll learn how to insert images into a web page.