Skip navigation

So far our newly created web page is devoid of any control of the style of the page, that’s where Cascading Style Sheets come in.

There’s several ways to apply style sheets to a page, we’re going to concentrate on the most useful, external style sheets.

As the name implies these are separate files to the HTML page, the HTML page simply links to these files in the <head> tag.

Create a new style sheet by clicking File>New>Basic Page>CSS.

Save this blank CSS file in the same directory as your HTML file and call it something like style.css.

Now link your HTML page to this CSS file, click back on the HTML page and make sure the CSS Style panel is open by clicking on Window>CSS Styles. Click on the top right menu of this panel and then Attach Style sheet and browse to your CSS file.

All HTML pages can now link to this CSS file which means all your styling information is in one place.

As I mentioned previously CSS can alter HTML tags. If we would like to change the colour of the whole page we need to affect the <body> tag. Click back onto the CSS page.

To affect a tag you need to reference it in the CSS so we start off by typing body. To tell a CSS selector where to start and end we again use brackets, but this time curly ones…

So we now have body {

We want to change the background of the page so that gives us…

body { background

Next we have the value you want to change it to so we use a colon and in this case the Hexadecimal value of a colour, let’s pick black, #000000. We end each selector with a semi-colon and tell the CSS that’s the end of what we want to do to the body tag by closing the curly bracket. So we’ve ended up with…

body {
background:#000000;
}

The generic form of that is

tag {
attribute:value;
}

That may look complex but Dreamweaver does half the work for you with it’s code hints.
For example if we’d like to change all the fonts on a page to be Georgia, place your cursor return after #000000 in the body tag, hit return and a list off all the possible attributes you could affect appears. Choose font, it then goes on to show all the possible values that attribute could have, choose Georgia. Add a semi colon and you’re done.

Save the CSS file, flick back to the page and you can see all fonts are now Georgia.

If we’d like to change the colour of the font throughout the site head back into the body element in the CSS and use the colour attribute.

To change the font size throughout the site use the font-size attribute

Perhaps that Heading is looking a bit large now so let’s change it in the CSS.

Type h1 { and the rest falls into place by choosing font-size, picking a pixel size, adding a semi colon and closing the bracket.

The size of the font for h1 isn’t affected by the font size attribute of the body tag because of the cascading nature of CSS.

The links look a bit shocking in the default blue so let’s tackle them next. The language differs very slightly in the CSS but it follows the same basic rules. The link tag if you remember is <a> so the CSS looks like this:

a:link {
attribute:value;
}

Other link effects include the hover and visited states.

As well as changing tags you can affect specific areas of the HTML by using a class selector. This means adding in attributes to the HTML tag so you can identify it.

Class selectors look like this:

.class {
attribute:value;
}

The main difference is you can call classes what you like, they don’t have set names like tags. The syntax difference is they have a dot before the first element. So let’s set up a Class for the menu so we can manipulate it.

.menu {
padding-left:50px;
}

We now need to tell the HTML where to apply this class selector so flick back to the HTML. The best place to have this class affect the menu is within the cell tag <td>. Simply add in class=”menu” into the tag, again Dreamweaver does half the work for you.

This class selector method is handy for picking out unique elements on the page. Let’s visually downgrad the sub-heading by making it a bit darker. Go to the CSS page and add…

.subheading {
color:#666666;
}

Find the italic tag that the sub heading is within and add the subheading class to the tag.

Some browsers can be very picky when it comes to the syntax of CSS so if a particular attribute isn’t behaving as you’d expect firstly check you have the correct symbols .{}:; and the correct spacing.

If you swap to your file browser and duplicate the index.html file twice, renaming the files about.html and work.html, change their content slightly you can see we’re now heading towards something which could be considered a website.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: