Basic styling with CSS
Lets add a bit of colour using CSS. CSS is written completely differently to HTML and is best written in a separate file. What it does is apply look and feel to the structure of your webpage, without polluting that structure with unnecessary code.
Create a blank CSS file
We need to create a new text file. Creating the CSS file is the same as creating the HTML file, call it screen.css and then open it in Notepad.
(Open a blank text file in Notepad and Save as... screen.css.)
Link from the HTML file to the CSS file
Before we start writing anything in the CSS file we need to add a link in the HTML file. This link is one way from the HTML to the CSS we are about to write. In the HTML add this line in between the Head tags:
<head> <link href="screen.css" rel="stylesheet" type="text/css" /> </head>
The link is in the Head because it is used by the file but isn't seen on the page.
The link ends within itself with the forward slash before the end angle bracket.
The relationship and type attributes are to help the browser understand the CSS files content.
(Linking in this way is different to Anchor Links, which are the ones on a webpage)
Start Styling your page
In your blank CSS document write the following:
body {
font-size: 80%;
font-family: Verdana, Arial, San-serif;
}
h2 {
color: fuchsia;
}
ul {
list-style-type: square;
}
body and h2 refer to the HTML tag you wish to change the appearance of (body changes the whole page). All the styling is written in between the curly brackets in the following format: attribute, colon, value then semi-colon. Save the file and take a look at your new styling.
The font-family attribute uses the first available font on the list. So if Verdana isn't installed on the person's computer it will then try Arial and so on.
Here List Style Type changes a list's bullets from circles to squares.
There are loads of various CSS attributes, you'll learn them as you need them.
Styling related items using Classes
You can add Classes to html tags so you can style them individually in CSS. Classes refer to a type of thing, everything with the same Class will look the same. In our list of fruit we are going to highlight the green fruit by giving it a Class. In the HTML add the following class attribute to the List Item tags:
<ul> <li class="greenfruit">Apple</li> <li class="greenfruit">Pear</li> <li>Orange</li> <li>Banana</li> </ul>
And in the CSS we'll add the following class syle:
.greenfruit {
color: lightgreen;
}
All Class styles in CSS are preceded by a full stop. 'greenfruit' matches the value given to the Class in the HTML.
Dividing the HTML page into sections
Changing the text is one thing next we'll layout the page. First we need to divide the page into different areas in the HTML giving each area an ID:
<html> <head> <link href="screen.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <h1>Build This Site</h1> <p>HTML & CSS for absolute beginners</p> </div> <div id="content"> <h2>Introduction</h2> <p>This is my first webpage</p> <p>A second paragraph</p> <h3>A list of fruit</h3> <p>Below is a list of fruit<p> <ul> <li class=”greenfruit”>Apple</li> <li class=”greenfruit”>Pear</li> <li>Orange</li> <li>Banana</li> </ul> <h3>Favourite fruit</h3> <p>Here is the same list in order of preference</p> <ol> <li>Banana</li> <li>Apple</li> <li>Orange</li> <li>Pear</li> </ol> </div> <div id="footer"> <h2>Footer</h2> <p>© Copyright 2007 Your name here.</p> </div> </div> </body> </html>
There is a Divide around the whole page which will allow us to set a width and a border later. Within that there is a Divide around our header, content and footer. These could be named anything we choose. As best practice they should always describe their content.
You should never have more than one ID with the same name on the page. An ID is unique, a Class is not.
Styling individual page sections using CSS
Back to the CSS file, we can now style the page:
body {
font-size: 80%;
font-family: Verdana, Arial, San-serif;
background-color: silver;
}
h2 {
color: fuchsia;
}
ul {
list-style-type: square;
}
#container {
width: 760px;
background-color: white;
border-width: 1px;
border-style: solid;
border-color: gray; /* with an a not an e */
margin-top: 10px;
margin-bottom: 10px;
}
#header {
background-color: yellow;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: fuchsia;
}
#content {
/* not styled yet */
}
#footer {
background-color: yellow;
}
The hash sign (#) means ID and they correspond with the ones we used in the HTML document. Most of the above should be self explanatory. Play with the values if you want to see what effect they have.
px means pixels.
Margins are the clear space outside the Divide, seen here creating a gap between the Container and the top of the page.
/* not styled yet */ is a comment. Anything that follows forward-slash star in a CSS file is ignored by the computer until it's ended with star forward-slash. This is useful for writing notes explaining anything unusual and should be encouraged.
Styling tags within tags
You can also specifically style elements within another element. For example we can change the appearence of Paragraphs within the Header with the following CSS:
#header p {
text-transform: uppercase;
}
Centring the page
Centring the page often looks more attractive. The proper way to do it is to set the Container Divide's left and right margins to auto. Except Internet Explorer doesn't follow the same rules as everyone else. To centre the page in Internet Explorer in the body set the text-align to center, this effects the whole page so you need to set it back to left in the Container as follows:
body {
font-size: 80%;
font-family: Verdana, Arial, San-serif;
background-color: silver;
text-align: center;
}
h2 {
color: fuchsia;
}
ul {
list-style-type: square;
}
#container {
width: 760px;
background-color: white;
border-width: 1px;
border-style: solid;
border-color: gray;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
Shorthand
Writing out all the margins, padding and border attributes is quite long winded. There are shorthand versions, reducing the code to this:
body {
font-size: 80%;
font-family: Verdana, Arial, San-serif;
background-color: silver;
text-align: center;
}
h2 {
color: fuchsia;
}
ul {
list-style-type: square;
}
#container {
width: 760px;
background-color: white;
border: 1px solid gray;
margin: 10px auto 10px auto;
text-align: left;
}
#header {
background-color: yellow;
border-bottom: 4px solid fuchsia;
}
#header p {
text-transform: uppercase;
}
#content {
/* not styled yet */
}
#footer {
background-color: yellow;
}
The border attributes must be set in that order: width, style, colour. Note there are no commas.
The margin sizes are set in the order a clock turns: top, right, bottom then left. A single value would be set across all 4 four sides.
Tidying it up
Now lets tweak the CSS to improve the appearance of the page.
You may have noticed there is white space above the header and below the footer. This is because Headers and Paragraphs automatically have a top margin and bottom margin set by the browser.
body {
font-size: 80%;
font-family: Verdana, Arial, San-serif;
background-color: silver;
text-align: center;
}
h1 {
margin: 0px;
}
h2 {
color: fuchsia;
margin: 0px;
}
#container {
width: 760px;
background-color: white;
border: 1px solid gray;
margin: 10px auto 10px auto;
text-align: left;
}
#header {
background-color: yellow;
padding: 20px 10px 5px 10px;
border-bottom: 4px solid fuchsia;
}
#header p {
text-transform: uppercase;
}
#content {
padding: 10px;
}
#footer {
background-color: yellow;
padding: 10px;
border-top: 1px solid gray;
font-size: 90%;
}
The font-size in the footer is also affected by the font-size in the body. Normal size is 100% then the body reduces it to 80%. The footer then reduces it from 80% by 90%. This means the font-size in the footer is 72% normal size.