Adding Style to your HTML
advertisement
Adding Style to your HTML
We have created a basic web site using HTML, and added a few different elements to the web site,
including headings, lists, tables, images and links. There is a lot more that you can do in HTML, but in
many cases it is better to accomplish this using “Cascading Style Sheets” or CSS. CSS allows you to
change the appearance of the elements on your web page, such as the font, the size, the colour,
borders, backgrounds, and even position. It is better to do this using CSS than directly in the HTML
because it is easier to change the appearance of your web site at a later date. In many cases a complete
redesign of the web site can be accomplished without any changes to the web pages – by changing only
the Style Sheet.
Inline Styles
We will start looking at CSS by using “inline styles,” to quickly get an idea of what is possible with CSS.
Let’s start by changing the colour of a paragraph. Take the first paragraph tag in your page and add the
bolded parts to it:
<p style="color:red;">
Save your HTML file and reload it in the browser. The result should not be surprising. Let’s make it bold
as well. Try:
<p style="color:red; font-weight:bold;">
Check it out again. You can change the font itself, for example:
<p style="color:red; font-weight:bold; font-family:Trebuchet MS;">
The problem with this is that the Trebuchet font may not exist on everyone’s computer. To help with
this problem you can specify a list of fonts to try … it will use the first one it finds. For example:
<p style="color:red; font-weight:bold;font-family:Trebuchet MS, Calibri, Arial, sans-serif;">
This says “try Trebuchet MS first; if it is not installed try Calibri; if it is not installed either just use Arial; if
even Arial isn’t there then use any sans-serif font.”
What if you only want part of a paragraph in colour, not the whole paragraph? You can surround the
part you want to change in a <span> element, and style the span. Take another paragraph, such as:
<p>This is the first paragraph.</p>
And add a span to style just one or two words:
<p>This is the <span style="color:blue;">first</span> paragraph.</p>
Embedded Styles
As implied, inline styles are not the best way to go (but are the simplest way to see results quickly). A
better (but still not the best) way to do it is to use embedded styles. Embedded styles allow you to
define all the styles for you page at the top (in the head). Add the following to the head of your html as
shown:
<html>
<head>
<title>Your Page Title</title>
<style type="text/css">
p {
font-weight: bold;
color: green;
}
</style>
</head>
<body>
Save and reload the page. All the paragraphs should now be green (except any that you left the inline
styles on – inline styles override embedded styles). The headings are still black since they are not
paragraphs.
Try this one instead:
<html>
<head>
<title>Your Page Title</title>
<style type="text/css">
body {
font-weight: bold;
color: green;
}
</style>
</head>
<body>
Now all the text (except with inline styles) should be green.
To see how you can dramatically change the look of your whole page, try:
<html>
<head>
<title>Your Page Title</title>
<style type="text/css">
body {
background-color: black;
color: white;
}
</style>
</head>
<body>
External Style Sheets
Now this is much easier to change than trying to track down a whole load of inline styles, but what if you
had a website consisting of dozens or even hundreds of pages? It would still be a lot of work to change
all of these in order to re-design your web site.
Fortunately, you can take the styles out of the HTML file and store them in a separate file called an
“external style sheet”. Each web page in your site then only needs a reference to the external style
sheet. Any changes you make to the external style sheet immediately affect all the pages in your site.
Creating and External Style Sheet
You need to create a new Notepad file for your external style sheet. Start with something like:
/* CSS for basic website */
basic.css
body {
background-color: blue;
color: white;
}
Save this as basic.css (in the same folder as your web page).
Now get rid of the embedded styles you added above and add a link to the external style sheet instead:
basic.html
<html>
<head>
<title>Your Page Title</title>
<link href="basic.css" rel="stylesheet" type="text/css"/>
</head>
<body>
Save this and reload your page to see the results.
Dividing your Page into Sections
When you create a web page, you will generally have several different sections of the page. This
structure should be consistent throughout all (or at least most) of the pages in your web site. You will
likely want to style each of the sections differently to make them distinct from each other. For example,
usually there is a header section with your web site name, some graphics and maybe a tagline; a main
body area; maybe a footer; and maybe a navigation area.
You can use the <div> tag to mark the different divisions in your web page. Each division has to be given
a unique name, so that you can add styles to it. For now add <div> tags as shown: (notice that I have
taken out the inline styles)
basic.html
<body>
<div id="header">
<div id="branding">
<h1>My First Web Page</h1>
</div>
<div id="tagline">
<p>Welcome to my first web page.</p>
</div>
</div>
<div id="content">
<h2>Some paragraphs</h2>
…
</div>
</body>
</html>
Notice also that there are two divisions inside the “header” division: branding and tagline. You can
“nest” divs in this way as much as you want, but you should try to keep the structure as simple as
possible.
Styling the Whole Document
For the sake of this example, let’s start with some generic styles for the whole document. Change the
body style to:
basic.css
body {
font-family: Calibri, Arial, sans-serif;
color: navy;
background-color: #e2edff;
line-height: 110%;
padding: 15px;
}
This sets the default font family options, the font colour and background colour, as well as spacing out
the lines a little and adding some extra space all around the document.
Next let’s create some different heading styles. The sizes will gradually decrease (h4 uses a size inbetween large and medium by specifying a percentage size of 105%) and the colours gradually fade. h1
is spaced out more (110%) and has 2 pixel thick lines above and below it. h2 has a line below it only. h4
and h5 have reduced line spacing.
basic.css
h1 {
font-family: "Trebuchet MS", Calibri,
font-size: xx-large;
line-height: 110%;
border-top:2px solid #8ba6c6;
border-bottom:2px solid #8ba6c6;
color: #1a4f91;
}
h2 {
font-family: "Trebuchet MS", Calibri,
font-size: x-large;
border-bottom:1px solid #8ba6c6;
color: #275791;
}
h3 {
font-family: "Trebuchet MS", Calibri,
font-size: large;
color: #365f91;
}
h4 {
font-family: "Trebuchet MS", Calibri,
font-size: 105%;
color: #4a6a91;
}
h5 {
Arial, sans-serif;
Arial, sans-serif;
Arial, sans-serif;
Arial, sans-serif;
font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
font-size: medium;
line-height: 95%;
color: #546f91;
}
h6 {
font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
font-size: small;
line-height: 90%;
color: #657291;
}
After adding these to the bottom of your style sheet, save it and reload the page in your browser … it
should look very different now!
To make the look more consistent, let’s change the colour of the table borders and give the table cells a
subtle background colour:
table {
border-color: navy;
}
basic.css
td {
border-color: navy;
background-color: #cbdfff;
}
The default link colours aren’t too attractive, so let’s change them as well. Links, however, have several
different states, depending on when the user is clicking on them:
Link:
the normal appearance of the link (default: underlined blue)
Visited:
a link that has already been visited (default: underlined purple)
Hover:
as the user’s mouse hovers over the link (default: no change)
Active:
as the user clicks on the link (default: underlined red)
Notice how they are styled differently:
a:link {
color: black;
}
a:visited {
color: gray;
}
basic.css
a:hover {
color: white;
background-color: #1a4f91;
}
a:active {
color: aqua;
background-color: #1a4f91;
}
Styling the Different Sections
Since we have divided the page up into sections using the <div> tag, we can style each section
differently. Let’s add different styles for the branding and tagline sections.
Most of the styles used here are familiar or self-explanatory. Letter-spacing allows you to space out all
the letters on the line – in this case they are spaced by 10% of the normal letter spacing (1em is the
normal letter spacing, hence 0.1em). The padding of 10 pixels will move the branding section 10 pixels
in, beyond the 15 pixels that the whole body was already indented. The top and bottom borders
previously specified for h1 are over-ridden (for this section only!) by setting them to zero. Finally the
margin of 0 ensures that this section will butt right up against the next section.
basic.css
#branding h1 {
font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
font-size: x-large;
line-height: 125%;
letter-spacing: 0.1em;
background-color: #1a4f91;
color: #e2edff;
padding-left: 10px;
border-top:0;
border-bottom:0;
margin:0;
}
For the tagline, a different font is used, and thick borders are placed above and below it. It is padded
the same as the branding section so that the left edges of the text will line up, and the margin is set to
zero so that it will butt right up against the branding section with no gap.
basic.css
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-left: 10px;
margin:0;
}
Create a Navigation Section
Add the following to your HTML: (just above <div id="content">)
basic.html
<div id="navigation">
<ul>
<li><a href="basic.htm">Home</a></li>
<li><a href="http://www.google.ca">Google</a></li>
<li><a href="http://www.yahoo.ca">Yahoo</a></li>
<li><a href="http://www.ask.com">Ask.com</a></li>
</ul>
</div>
Now add the following to your CSS:
basic.css
#navigation {
background-color: #7da5d8;
width: 160px;
}
Positioning Sections using CSS
We will use absolute positioning for this site, which allows us to specify the exact location of each
section relative to the top-left corner of the web browser window. Add the following to the bottom of
your style sheet:
basic.css
#navigation, #content, #header {
position: absolute;
}
Check out the results … yuck! What happened? Since we haven’t given the sections positions yet, they
are all at (0,0) – i.e. the top-left corner. Let’s specify some positions. Add:
#navigation, #content {
top: 77px;
}
basic.css
That’s better, but the navigation and content are still overlapping. Let’s move the content over:
#content {
left: 200px;
}
basic.css
Finally, it will look better if the header goes all the way across. Add:
basic.css
#header {
width: 100%;
}
Wait! It still looks terrible in Internet Explorer!
Well, it looks fine in Firefox, why would it look different in Internet Explorer?
It turns out that old versions of Internet Explorer had some bugs. In order to make web sites that were
designed to cope with the bugs still work in the new Internet Explorer, Microsoft invented what they call
“Quirks Mode.” If you don’t tell it otherwise, it goes into Quirks Mode to bring back the bugs that it
thinks your web site is already coping with.
To get it out of Quirks Mode, you need to specify an up-to-date document type using the <!DOCTYPE>
tag. This tag MUST be the first line in your HTML code! Add:
basic.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
k
You should probably cut and paste it to make sure you get it exactly right! Refresh the view in Internet
Explorer and it should now look fine. Weird, eh?
A Few Explanations (not done yet!)
Pixels vs % vs ems (p 143)
Different ways of writing (shortcuts), e.g.:
Border: 1px solid red;
Vs
Border-left: 1px solid red;
Vs
Border-left-width: 1px;
Border-left-style: solid;
Border-left-color: red;
Hex colour codes
