Step 3: Style the body element
The purpose of a selector is to match an element in the HTML document and list the
properties and values that will declare how it will be presented in the browser.
The body selector matches all the elements nested within the <body>
tags. In this rule you will declare some properties for the whole of index.html (although you
will over-ride some of these in the next steps with more specific rules.) Type the following rule into your style sheet -
body {
background-color: #F0F0F0;
font-family: Verdana, Geneva, sans-serif;
color: #333;
font-size: 16px;
line-height: 20px;
}
Save the file and then view the web page in the browser: the background colour
of the page will be light grey; the font will be Verdana (a sans serif font that was designed
for text readability on screen); the colour of the text will be dark grey and the font size
will be 16 pixels high. Colour is specified using a 3-character hexadecimal code (the shorthand way of writing hex code #333333), prefixed by a
hash # character.
In this tutorial I am using pixels - px - as the unit of measurement, to simplify the
examples. In the next few weeks you will learn about other units of measurement - percentage, em
and rem - which are often preferable, but less straight-forward to use.
Step 4: Style the other elements
The <table> element
You have some table css in your index page, giving the table a border. This causes a validation error. We are going to move it to the css sheet. Find the table entry (in grouping) in your styleshetand and the following style rule.
table {
border: 1px solid black;
}
Now remove the css from the index page. You will no longer see a validation error.
The <h1, h2...h6> elements
The <h> elements can be styled by changing the font,
font size, font colour, line height etc. Follow the processes described in Step 3
to write a rule for the <h1> tag.
Here is the CSS rule that I created for the h1 selector in my style sheet -
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #F60;
font-size: 36px;
line-height: 50px;
}
The <paragraph> element
The paragraph elements will inherit the styles defined in the body rule - unless a specific rule is made
for paragraph text. Experiment with changing the font properties for the p selector to see which solution is the most readable.
Go to top of page
<div id="wrapper"
<div id="wrapper" nests all the page elements and has been put there for the purpose
of styling the page. The following code will give the wrapper a background colour of white and puts some padding inside the wrapper between the content and the margin; it defines a maximum pixel width for the content and centres it in the viewport
(browser window) by setting the right and left margins to 'auto'-
#wrapper {
max-width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
padding-right: 10px;
padding-left: 10px;
}
Save index.html and view it in your browser: resize the page to see how the wrapper centres the
page content within the viewport.
Anchor pseudo-classes
It is important that users should be able to recognise a link in order to be able to interact with it easily.
Users are now quite experienced at navigating websites and designers may feel that there is no need to use such obvious
link styles as the browser default, where links are always underlined and coloured blue (link), mauve (visited link), red (active link). It is often desirable
to change the colour of links, or to make them bigger for small touch screens. To style anchor elements, properties
should be defined for each of tis four states of behaviour - the normal link, visited
link, link when the cursor hovers over it (not relevant for touch screen devices) and active link (i.e. when it is clicked).
CSS rules for links are always written in this order using the following pseudo-class selectors
- a:link, a:visited, a:hover,
a:active.
As you style the links preview them frequently in a browser to see what the effect will be when viewed online.
Remember that once the link has been visited it will be presented with the a:visited style rule -
unless you clear the history in your browser.
If you do not want your links to be underlined you can turn this feature off with the declaration
text decoration: none;
To create a link with a dotted underline (as opposed to a solid underline) you can give the link a 1px dotted bottom border.
Here are the CSS rules that I wrote the for anchors in my my Learning Journal example -
a:link, a:visited, a:active {
color: #0090D2;
}
a:hover {
color: #0063A6;
text-decoration: none;
}
Go to top of page
Style the main menu
You might want to use more than one kind of link style on a page or site. By making use of a range of CSS
properties it is possible to make links for a menu that behave like rollover button - as I have done in
the example Learning Journal. if you have got on OK with
the rest of the tutorial, and have styled the links on your page, have a go at making another link style for
the menu. To do this we will use compound selectors that will specifically target the menu elements.
I have edited index.html and given the <nav> element (with the main
navigation content - Home / Tutorial / Contact) the class of 'menu'. This is so that
I can target this specific nav element and style it differently from other elements marked up with <nav> tags.
The HTML is -
<nav class="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Guide</a></li>
<li><a href="">Contact me</a></li>
</ul>
</nav>
The <nav>, <li>and <a> elements have been styled to create a menu that changes colour when the cursor hovers over the link.
.menu li {
list-style-type: none;
font-size: 18px;
margin-left: 0px;
margin-bottom: 20px;
}
.menu a {
color: #000;
padding: 5px;
margin-right: 4px;
text-decoration: none;
border: 2px solid #0090D2;
border-radius: 3px;
}
.menu a:hover {
background-color: #0090D2;
color: #FFF;
}
Take a look at my example Learning Journal and the
attached style sheet.
Go to top of page
Style the <article> headings
Finally I want to use a class selector to style all the headers for the articles - i.e.
the weekly posts in my Learning Journal. I am using a class selector because there are several instances of article
headers in index.html.
I have marked up all the article headers in index.html with the following code -
<article>
<header class="post">
<h3><a id="week1"></a>Week 1 - Getting started</h3>
The CSS rule to style the article headers is -
.post {
margin-top: 2px;
margin-bottom: 2px;
background-color: #CCC;
}
If you have not had time to complete the tutorial please carry on and finish it in your own time. If you have any questions email Jennie Harding.
