Web Design Notes
What is a web page?
In this section, you're going to learn just what a web page is and how it can be read by a browser
like Internet Explorer or Firefox. You'll also construct your very first web page. Let's make a start.
Files on your computer come with extensions. If you wrote a letter using Microsoft Word and saved
it with the name 'MyLetter', the software would add four letters to the file name (three in older
versions). Because it was typed using Word, the four letters that get added to your filename
are .docx. So your file name will be 'MyLetter.docx' and not just 'MyLetter'. If you created a
spreadsheet in Microsoft Excel and called it 'Accounts' the Excel software will add its own four
letter extension to your file name. It will add .xlsx. So you file name will be 'Accounts.xlsx' and not
just 'Accounts'. So you get a different four letter extension depending on the software you used.
These extensions are very important to computers. They are used to identify the type of file it is.
With a file extension, Word can recognise its own documents. It sees the letters docx and says 'Ah
yes, that's one of mine. I can open it.' If it sees a different extension, xlsx for example, it says 'What
the heck is that?' You may then get an error message telling you that the file type is not recognised.
Web pages have their own file extensions. Oddly there are two different extensions, a three letter
file extension and a four letter extension. Web pages come with the extension .htm or .html. A
browser can recognise either extension.
When you open up a web page with your browser, Internet Explorer for example, the browser
software checks the file extension, the same check that Word and Excel make. If it sees
the .htm or .html extension it knows it's a web page and then tries to open it. (Modern browsers,
though, can open up other types of files. Internet Explorer can open up your Word documents and
PDF files.)
Behind the scenes, however, the thing that Internet Explorer is trying to open is really a text file
that has had its extension changed from .txt to .htm. The text file though will have special symbols
and words, called Tags. When the browser sees these Tags it goes to work, displaying whatever you
typed and hiding the Tags from your viewers.
Most web pages on the internet are written in code called HTML. HTML stands for HyperText
Markup Language, and is fairly easy to get the hang of. That's because HTML is not a programming
language: it is a language designed to improve the presentation of text. For example, in Microsoft
Word, if you want a nice big heading, you can select a font size from a menu. HTML has an easy way
to change the size of text of headings, too, which you'll see in a moment. But that's basically all you
are doing with HTML ' presenting text and images on a page. The way you do this is with things
called TAGS.
What is HTML 5?
HTML comes in different versions. When people talk about HTML 5 they are talking about the
updates to the mark up language. These updates were agreed (mostly) by a whole host of different
parties, all members of an organisation called W3C. W3C was founded in 1994 by Tim Berners-Lee,
who also created the first version of HTML and invented the World Wide Web. They now oversee
the defining of new Web technologies. Comapnies who make browser like Microsoft (Internet
Explorer), Mozilla (FireFox), and Apple (Safari) can then decide which of the new Web technoligies
they wish to implement.
Most of the big names in browser technology decided to implement quite a lot of the new suggested
updates (specifications) put forward by the W3C. These specifications are commonly known as
HTML 5. In practice, this means implementing features like HTML Video and audio directly into the
browser, as opposed to needing a 3rd party plugin like Adobe's Flash. Another exciting update is
something called the Canvas tag. This allows you to create quite sophisticated animations and
graphics using Javascipt, again without needing a 3rd-party plugin.
There are a whole lot of new HTML tags that take browser technology forward into the 21st
century. Throughout this course, we'll introduce you to the essential HTML 5 tags that you need in
order to create a modern web page.
<< Web Design software | HTML tags >>
HTML Tags
HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The
first pair of tags we'll write are the HTML tags themselves. You put one HTML tag at the top, and
one at the bottom:
<HTML>
</HTML>
This tells a browser like Internet Explorer or Firefox that the code is HyperText Markup Language.
Two things to notice here. One, that the word HTML is surrounded by angle brackets (the Less Than
and Greater Than keys on your keyboard); and two that the second Tag has a forward slash before
the HTML.
All your tags must be surrounded by the angle brackets < >. This tells the browser that there is
some HTML code that needs executing, and that it is not to be shown on the web page. Miss an angle
bracket out and it can really mess up your web page.
So add those two tags to your text editor and it will look like this:
The first Tag tells the browser to start doing something; the second tag tells the browser to stop
doing it. The stop symbol is that forward slash. So miss that out and, again, your web page can really
be messed up.
The next pair of tags are the HEAD tags: They go between the two HTML ones:
<HTML>
<HEAD>
</HEAD>
</HTML>
Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward
slash before the final one </HEAD>.
The HEAD section of HTML page is where you put special instructions for the browser. Your
browser will not print directly to a web page when things are inserted into the HEAD section. For
example, if you wanted to display the words 'Hello World' on your page, and you typed them in
between the two HEAD tags, then the Browser would just ignore them. That's because 'Hello World'
is direct text, and not a special instruction that the browser can understand.
A special instruction your browser can understand is the TITLE tag:
<TITLE> </TITLE>
The Title tag always goes in the HEAD section of the HTML skeleton.
The TITLE tag doesn't do very much. And it definitely should not be confused with the name of your
web page. If you saved your web page as MyFamily.html then that would have no bearing on or
relationship with the TITLE tag. Whatever you type between the two TITLE tags is what appears at
the very top of your browser window. And that's it, that's all it does. (You'll see what it looks like in
a moment.)
The final, and most important part, of the HTML skeleton is the BODY section.
In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY
as the white page in Word Processing. When you type something in your word processing software,
it is immediately displayed. Similarly, when you type something between the two BODY tags and
then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag,
your browser will try to display it for you. So remember: if you want people to see it, put it between
the BODY tags.
In your text editor, then, add the following:
Notice that we've added some text between the two TITLE tags: My First Page. We've also used
indenting, but this is only for readability: the indenting doesn't have any effect on the results.
DOCTYPE
One special tag is DOCTYPE. It's not really a HTML tag, but an instruction to the browser about
which version of HTML is allowed. In version of HTML prior to HTML 5 the DOCTYPE could be very
messy. In HTML 5, however, it's just this:
<!DOCTYPE HTML>
DOCTYPE needs to go at the very top of the page. There is no end tag for DOCTYPE. Note the
exclamation mark after the first angle bracket, and the space between DOCTYPE and HTML.
So add a DOCTYPE to the top of your page. Your text editor will look something like this:
Coming up next, we'll take a look at how to save your web pages.
<< What is web page? | How to save your web pages >>
Back to the Home Page
Saving Web Pages
To save your code as a web page, click the File menu at the top of Notepad (or whatever Text Editor
you are using.) From the File menu, select Save As. The Save As dialogue box appears (We created a
new folder to store all our web pages in, and called the folder HTML)..
Note the default extension at the bottom, under 'Save as type' It says, Text Documents (*.txt). If
you leave it on that then you won't have web page, you'll have a text file. Click on the drop down list
and change it to 'All files'. (You don't need to do this if you're using TextEdit on a Mac. Just
type firstwebpage.html in the Save As box.)
In the File Name box, type firstwebpage.html
Note that we've used all lowercase letters. This is not strictly necessary, but is recommended. Also,
try not to add spaces to web page names as this can cause problems. You can use underscores or
hyphens, though. So these two are OK:
first_web_page.html
first-web-page.html
But these two should be avoided:
first web page.html
FirstWebPage.html
Click on Save and you'll have a HTML page that can be displayed in a browser.
In the next lesson, you'll see how to view your web pages.
<< HTML Tags | Viewing your web pages >>
Back to the Home Page
Viewing your web pages in a browser
To view the results, open up an explorer window. In Windows, this is done by holding down the
Windows keys and then pressing the letter E on your keyboard. Or click your Start menu in the
bottom left, and then click on Computer. On a Mac, click the Finder icon in the Dock.
Navigate to where you saved your HTML page. In our case, this was a folder we created called
HTML, which is on our network:
In the image above we have a file called firstwebpage.html. If yours has .txt on the end instead
of .html then try again because it's not a web page but a text document.
Double click your HTML file and it will launch in your default browser. For us, this is Firefox. Yours
might be Internet Explorer or Safari. You should see a blank white page with your TITLE at the top.
Here's the Firefox version:
And here's the same page in Internet Explorer:
Notice that in both versions the TITLE we added is at the very top of the screen ' 'My First Page'.
The same TITLE can be seen further down, at the top of each browser tab.
Exercise
Change the TITLE tag to something other than 'My First Page'. Click File > Save in your text editor.
Switch back to your browser and press F5 to refresh the page. Your new TITLE should appear at the
top of the screen and at the top of the browser tab.
In the next section, you'll learn how to create a HTML template.
<< Saving web pages | The basic HTML template >>
Create a Basic HTML Template
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:
How to Create a HTML Template
While you have the Windows Explorer or Finder screen open, you can save your current HTML
skeleton as a template. That way, you don't have to type it all out every time you want a new
web page.
In your text editor, delete any text between your two TITLE tags. Now click File > Save As. From
the Save As dialogue box change the name of your web page to template.txt:
Click Save to save the code as a text file. You will be returned to your text editor. Click File >
Save As again. Now change the name of the file to newpage.html. In the Save As Type box in
Windows, change it to All Files:
Save the file and switch to Windows Explorer or Finder. You should now see three pages:
One of these, the template is a text file rather than a HTML file. From now on, you can open the
template text file, and repeat the process above: Click File > Save As, change the Save As
Type box to All Files, then type a new name for your web page, not forgetting the html ending.
There is a problem, however. If you were to double click your newpage.html file it would open
up in your browser. But you will want to open it up in Notepad so that you can edit the file and
make changes.
To solve the problem, you can add an item to the Send to menu in Windows (Macs will have
an Open With right-click menu. Your text editor should be on there). This appears when your
right-click the file:
In the image above, we have Notepad on the Send to menu. Selecting this item means that we
can quickly open up the code in Notepad.
To add an item to the Send to menu, switch back to your Explorer window. In the address bar at
the top, enter the following:
%APPDATA%\Microsoft\Windows\SendTo
Press the Enter key on your keyboard and you will be taken to the Send to folder:
You can now drag and drop items from your Start menu to this folder. (Make sure Windows
Explorer doesn't fill the whole of your screen by clicking the Restore Down icon just to the left of
the Red X.)
Click your Windows Start button. From the All Programs > Accessories menu, locate Notepad
again. Hold down your left mouse button on Notepad. Keep it held down and drag across to
your Windows Explorer and your Send To folder:/
Let go of your left mouse button and Notepad will be on your Send To menu when you rightclick a file in Windows Explorer.
Now you can quickly open up your HTML code in Notepad and makes changes to it.
To recap this section, here are the important points again:
•
The HTML skeleton is the foundation on which most internet pages are based
•
HTML is written in Tags
•
Tags usually come in pairs
•
A Tag is a word surrounded by angle brackets, e.g.: <HTML> </HTML>, <HEAD> </HEAD>,
<TITLE> </TITLE>
•
A pair of tags has as a starting Tag and an end Tag. The end Tag is preceded by a forward
slash
•
Add <!DOCTYPE HTML> to the top of all your HTML pages.
In the next section, you'll see some more basic tags.
<< Viewing web pages | Heading tags >>
Back to the Home Page
Create a Basic HTML Template
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:
How to Create a HTML Template
While you have the Windows Explorer or Finder screen open, you can save your current HTML
skeleton as a template. That way, you don't have to type it all out every time you want a new web
page.
In your text editor, delete any text between your two TITLE tags. Now click File > Save As. From
the Save As dialogue box change the name of your web page to template.txt:
Click Save to save the code as a text file. You will be returned to your text editor. Click File > Save
As again. Now change the name of the file to newpage.html. In the Save As Type box in Windows,
change it to All Files:
Save the file and switch to Windows Explorer or Finder. You should now see three pages:
One of these, the template is a text file rather than a HTML file. From now on, you can open the
template text file, and repeat the process above: Click File > Save As, change the Save As Type box
to All Files, then type a new name for your web page, not forgetting the html ending.
There is a problem, however. If you were to double click your newpage.html file it would open up
in your browser. But you will want to open it up in Notepad so that you can edit the file and make
changes.
To solve the problem, you can add an item to the Send to menu in Windows (Macs will have
an Open With right-click menu. Your text editor should be on there). This appears when your rightclick the file:
In the image above, we have Notepad on the Send to menu. Selecting this item means that we can
quickly open up the code in Notepad.
To add an item to the Send to menu, switch back to your Explorer window. In the address bar at the
top, enter the following:
%APPDATA%\Microsoft\Windows\SendTo
Press the Enter key on your keyboard and you will be taken to the Send to folder:
You can now drag and drop items from your Start menu to this folder. (Make sure Windows
Explorer doesn't fill the whole of your screen by clicking the Restore Down icon just to the left of
the Red X.)
Click your Windows Start button. From the All Programs > Accessories menu, locate Notepad
again. Hold down your left mouse button on Notepad. Keep it held down and drag across to your
Windows Explorer and your Send To folder:/
Let go of your left mouse button and Notepad will be on your Send To menu when you right-click a
file in Windows Explorer.
Now you can quickly open up your HTML code in Notepad and makes changes to it.
To recap this section, here are the important points again:
•
•
•
•
•
•
The HTML skeleton is the foundation on which most internet pages are based
HTML is written in Tags
Tags usually come in pairs
A Tag is a word surrounded by angle brackets, e.g.: <HTML> </HTML>, <HEAD> </HEAD>,
<TITLE> </TITLE>
A pair of tags has as a starting Tag and an end Tag. The end Tag is preceded by a forward slash
Add <!DOCTYPE HTML> to the top of all your HTML pages.
In the next section, you'll see some more basic tags.
<< Viewing web pages | Heading tags >>
Back to the Home Page
Basic HTML - Heading Tags
You can have a nice big heading on your web page quite easily. This is done with the H tags.
The biggest size heading you can have is H1. If you want smaller sized headings then you
change the number after the H. You can have up to 6 different sizes. All headings need to go
between the two BODY tags.
Try it out for yourself. Open up the code for your firstwebpage.html file, if it's not already open.
(If it's not, you can now right-click and Send To > Notepad. If you didn't get this working then
simply click File > Open from the menu at the top of your text editor.)
Add the following just below your first BODY tag:
<H1>A Size 1 Heading</H1>
Incidentally, tags are not case sensitive. So you can have this:
<h1>A Size 1 Heading</h1>
Or even this:
<h1>A Size 1 Heading</H1>
But using all capital letters makes your code more readable.
Once you've added the H1 tags, though, your HTML should look like this:
To see what it looks like, open Windows Explorer or Finder on the Mac, if it's not already open.
Navigate to where you saved your web page to, and then double click to open it up. (If you
already have the page open, simply press F5 to refresh the page.) You should see this in your
browser:
Switch back to your code and change the 1's into 3's. So your HTML heading should now be
this:
<H3>A Size 3 Heading</H3>
Save the changes. Go back to your browser and press F5 to refresh the page. You should see
this:
Notice how much smaller the H3 heading is compared to the H1 heading. (If your headings
don't look right, make sure you haven't missed any angle brackets out, or any forward-slash
closing tags.)
Exercise
Try the other H numbers to see how they compare. You can only go as far as H6.
In the next lesson, we'll take a look at paragraph breaks
<< Basic HTML template | Paragraph and Break tags >>
Back to the Home Page
Paragraph and BR breaks
If you've ever used a word processor like Microsoft Word then you know that to start a new
paragraph all you need to do is to hit the Enter key on your keyboard. The cursor will then move
down, ready for you to start typing. In HTML, however, you can't do this. If you want to start a
new paragraph, you have to use the P tags.
To try it out, add the following just below your Heading (You can use your own text, though,
rather than type out the Hamlet soliloquy):
<P>To be, or not to be: that is the question: Whether 'tis nobler in the
mind to suffer the slings and arrows of outrageous fortune, or to take
arms against a sea of troubles, and by opposing end them? </P>
<P>To die: to sleep; no more; and by a sleep to say we end the heart-ache
and the thousand natural shocks that flesh is heir to, 'tis a consummation
devoutly to be wish'd.</P>
When you've finished, your HTML code should look like this: (Don't worry about the indenting,
though. We did ours just so it would look nice in this book. Only one press of the spacebar is
recognised in HTML, everything else is ignored, including indents and carriage returns.)
Note the P tags:
<P></P>
You have to use the P tags whenever you want to start a new paragraph.
Strictly speaking, though, you don't need the closing P tag. You can just do this to start a new
paragraph:
<P>
To be, or not to be: that is the question: Whether 'tis nobler in the mind to
suffer the slings and arrows of outrageous fortune, or to take arms
against a sea of troubles, and by opposing end them?
<P>
To die: to sleep; no more; and by a sleep to say we end the heart-ache and
the thousand natural shocks that flesh is heir to, 'tis a consummation
devoutly to be wish'd.
The result is the same. But in modern web coding, it's best to use the closing tag for
paragraphs, so that you can add Styling rules. (You'll learn how to do this a little later.)
Save your work and view the results in your browser. You should see this:
Notice the paragraphs breaks in the text. Notice, too, that although our code was indented, this
doesn't show up in the browser. The browser will ignore all those indents we had, and any extra
white space. If you want white space you have 'tell' the browser. You do this with the break tags,
like P and BR (which you'll see soon).
As an exercise, try deleting the P tags in your code. Save and refresh your browser. Watch what
happens:
Without the P tags the text just runs on.
There is still, however, a paragraph break after the heading, even though we deleted all the P
tags. This is because the H heading tags insert their own paragraph breaks.
The BR tag
The BR tag is used when you don't want a full paragraph break. The space between lines of text
is then reduced. The BR tag doesn't need a closing tag, and can be just by itself.
As an example, add the following to the end of your text (the BR part).
<P>To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand
natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd.
<BR>
... Rest of Hamlet's Soliloquy goes here
</BODY>
</HTML>
Notice that we've deleted the end P tag for the second paragraph. If you leave it in, you'll get a
double line break from the two <P> tags, as well as a single line break from the <BR> tag.
Save your changes and switch to your browser. Press F5 to refresh the page and the results
should look like this:
So if you don't want a full, double-line break then remember to use the BR tag. And careful of
the end P tags or you'll end up more line breaks than you expected.
In the next lesson, we'll take a look at bold and italic text.
<< Heading tags | Bold and Italic >>
Back to the Home Page
Bold and Italics
Two more tags that come in useful are the Bold and Italic tags. They are quite easy to use. Here
are the Bold tags:
<B> </B>
And here are the Italic tags:
<i> </i>
The text you want to change goes between the two tags:
<B> ... Rest of Hamlet's Soliloquy goes here</B>
<i> ... Rest of Hamlet's Soliloquy goes here</i>
If you want Bold and Italic text then you can nest the two:
<B><i> ... Rest of Hamlet's Soliloquy goes here</i></B>
The two I tags go between the two B tags. You can have it the other way around, though, with
the I tags first:
<i><B> ... Rest of Hamlet's Soliloquy goes here</B></i>
Be careful of this, however:
<i><B> ... Rest of Hamlet's Soliloquy goes here</i></B>
This is a mismatched pair of tags. The two tags on the inside are B and I, and the ones on the
outside are I and B. A modern browser will probably correct the mismatch, but older ones may
not.
Try it in your HTML code:
Save and view the results in your browser:
There is also an underline tag you can use:
<U> ... Rest of Hamlet's Soliloquy goes here</U>
You can nest all three tags: bold, italics, and underline:
<U><B><i> ... Rest of Hamlet's Soliloquy goes here</i></B></U>
All this nested HTML code can be a bit messy, however. The modern solution is to use
something called a Cascading Stylesheet. Using a Stylesheet allows you to do all your text
formatting in the HEAD section, or better yet in an external file. (You'll see how to do all this
shortly.)
In the next lesson, we'll take a look at HTML lists.
<< P and BR tags | HTML lists >>
Back to the Home Page
Bold and Italics
Two more tags that come in useful are the Bold and Italic tags. They are quite
easy to use. Here are the Bold tags:
<B> </B>
And here are the Italic tags:
<i> </i>
The text you want to change goes between the two tags:
<B> ... Rest of Hamlet's Soliloquy goes here</B>
<i> ... Rest of Hamlet's Soliloquy goes here</i>
If you want Bold and Italic text then you can nest the two:
<B><i> ... Rest of Hamlet's Soliloquy goes here</i></B>
The two I tags go between the two B tags. You can have it the other way
around, though, with the I tags first:
<i><B> ... Rest of Hamlet's Soliloquy goes here</B></i>
Be careful of this, however:
<i><B> ... Rest of Hamlet's Soliloquy goes here</i></B>
This is a mismatched pair of tags. The two tags on the inside are B and I, and
the ones on the outside are I and B. A modern browser will probably correct
the mismatch, but older ones may not.
Try it in your HTML code:
Save and view the results in your browser:
There is also an underline tag you can use:
<U> ... Rest of Hamlet's Soliloquy goes here</U>
You can nest all three tags: bold, italics, and underline:
<U><B><i> ... Rest of Hamlet's Soliloquy goes here</i></B></U>
All this nested HTML code can be a bit messy, however. The modern solution
is to use something called a Cascading Stylesheet. Using a Stylesheet allows
you to do all your text formatting in the HEAD section, or better yet in an
external file. (You'll see how to do all this shortly.)
In the next lesson, we'll take a look at HTML lists.
<< P and BR tags | HTML lists >>
Back to the Home Page
HTML Lists
You can insert a bulleted list onto your page with HTML. There are two types of lists to choose
from: Ordered List and Unordered. An Ordered list is one that uses number, letters, roman
numerals, or a combination. Like this:
An Unordered List is one that uses bullets. Like this:
To get a list with numbers or letters, this tag is used:
<OL>
</OL>
The OL stands for Ordered List, of course. But those two tags won't get you a list. You need to
include another tag, the LI tag. LI stands for List Item. You need one pair of LI tags for every
item in your list. So for three items, the code is this:
(Strictly speaking, you don't need the end LI tags.)
To get the bulleted list, the UL tag is used. UL stands for Unordered List. It's used in exactly the
same way. Just substitute the OL tags for UL tags.
For both the Ordered and Unordered list, you can specify which type you want to use for the
bullets or numbers. The types are these:
You use the Types like this:
You can specify a start, as well. But the start has to be a number:
So that List will be uppercase letters, starting at the 7th letter, or 'G'.
There are three types of bullets you can use for unordered lists: Disc, Circle, and Square. You
use them like this:
The default is Disc. So if you want round black circles for your bullets, you can miss the TYPE
attribute off:
And here are the results in a browser:
Try out the various lists in your HTML code, and add the different types to the code. That way
you will get a feel for how they are used, and what they look like.
In the next section, you'll get an introduction to Cascading Stylesheets.
<< Bold and Italic | Introduction to CSS >>
Back to the Home Page
HTML Lists
You can insert a bulleted list onto your page with HTML. There are two types of lists to choose
from: Ordered List and Unordered. An Ordered list is one that uses number, letters, roman
numerals, or a combination. Like this:
An Unordered List is one that uses bullets. Like this:
To get a list with numbers or letters, this tag is used:
<OL>
</OL>
The OL stands for Ordered List, of course. But those two tags won't get you a list. You need to
include another tag, the LI tag. LI stands for List Item. You need one pair of LI tags for every
item in your list. So for three items, the code is this:
(Strictly speaking, you don't need the end LI tags.)
To get the bulleted list, the UL tag is used. UL stands for Unordered List. It's used in exactly the
same way. Just substitute the OL tags for UL tags.
For both the Ordered and Unordered list, you can specify which type you want to use for the
bullets or numbers. The types are th
<< Bold and Italic | Introduction to CSS >>
Back to the Home Page
An Introduction to Cascading Style Sheets
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.
<< HTML Lists | CSS Rules >>
Back to the Home Page
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.
<< Introduction to CSS | Where to put your styles >>
Back to the Home Page
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.
<< CSS rules | Using CSS Selectors >>
Back to the Home Page
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.
<< Where to put styles | Inline and embedded styles >>
Back to the Home Page
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.
<< Where to put styles | Inline and embedded styles >>
Back to the Home Page
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.
<< Using CSS Selectors | CSS and Fonts >>
Back to the Home Page