Network: Web Design

In the second of a three-part series, we show you how to use Cascading Style Sheets to redefine the attributes of existing HTML tags

Most word processors today include a way to make changes to text not just on a word by word basis but throughout an entire documentby using "styles". Styles work by collecting all of the different attributes - bold, italic, size, etc - that you want to apply to similar types of text - titles, body, captions, etc - and giving these groups of attributes a common name. Say you want all of the section titles in your document to be 14pt, Times and italic. You would assign all of those attributes to a style called "section title".

Whenever you type in a section title, all you have to do is use the section title style with it and all of those attributes are applied to the text in one fell swoop. No fuss, no mess. And, even better, if you decided later that you really wanted all of those titles to be 18pt instead of 14pt, you just change the definition of section title and it changes the appearance of all of the text marked with that style throughout the document.

Last week we looked at a way to use styles with HTML documents called Cascading Style Sheets (http://www.independent.co.uk/net/ 980407ne/story8.html). Rather than creating a new style name, as you would with a word processor, CSS is used to redefine the attributes of existing HTML tags. The basic syntax for setting up one of these CSS "rules" looks like this:

selector {property: value;}

The selector is the keyword part of an HTML tag (the text in the tag that lets you know what type of tag it is), property is the name of the attribute you want to change, and value is, well, the new value for that property. You can add as many different definitions {property: value} to the rule as you want as long as they are separated by semicolons within the brackets.

Instead of using an HTML tag's selector, though, we can use a class selector to set up a CSS rule with whatever name we want. A class is a "free agent" selector that can be applied to any HTML tag at your discretion. Since they can be applied to multiple HTML tags, a class selector is the most versatile type of selector, however, unlike HTML selectors, it does not automatically apply itself to the document but has to be specified where needed.

Setting up a Cascading Style Sheet rule using a class selector is pretty much like setting one up using an HTML selector. For example, if we wanted to set up a class that would make text bold, right justified, 18pt size, double spaced, and in the Times font it would look something like this:

.className {font: bold 18pt/36pt Times,serif;

text-align: right;}

Here "className" is whatever we want to call this class. Notice, though, that there is a full stop before the class name to let the browser know that this will be a class rule not an HTML rule. Add this code within your of our HTML document thus:







blah...blah...blah...







Now all of the definitions associated with className will be used with this (and only this) paragraph. You could also apply the className class to just about any other HTML tag that you wanted.

I'm sure you are wondering by now what happens if the

tag already has its own CSS rule? That's where the "Cascading" part of CSS enters into the equation. If an HTML tag has more than one definition, and if the definitions conflict, the last one that was specified - in this case the new class rule - will override the previous ones. If the definitions in the rules do not conflict, they simply combine together.

The power of CSS comes from its ability to mix and match different rules from different sources to tailor your Web page layouts to your exact needs.

In some ways this resembles computer "programming", which is not too surprising since a lot of this stuff was created by programmers and not designers. But once you get the hang of it, it will become as natural as putting together a sentence.

Jason Cranford Teague is currently working on 'The Visual Quickstart Guide: Dynamic HTML for the World Wide Web', to be published in June. You can e-mail Jason at:

indy_webdesign@mindspring.com

Suggested Topics
Arts and Entertainment
Over their 20 years, the band has built a community of dedicated followers the world over
music
Arts and Entertainment
The Wu-Tang Clan will sell only one copy of their album Once Upon A Time In Shaolin
musicWu-Tang Clan and The Sexual Objects offer fans a chance to own only copies of their latest albums
Arts and Entertainment
Bradley Cooper, Alessandro Nivola and Patricia Clarkson on stage

film
Arts and Entertainment

Grace Dent on TV

tv
Arts and Entertainment
Taylor Swift is heading to Norwich for Radio 1's Big Weekend

music
PROMOTED VIDEO
Arts and Entertainment
Reese Witherspoon starring in 'Wild'

It's hard not to warm to Reese Witherspoon's heroismfilm
Arts and Entertainment
Word up: Robbie Coltrane as dictionary guru Doctor Johnson in the classic sitcom Blackadder the Third
books

Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
Arts and Entertainment
The Oscar nominations are due to be announced today

Oscars 2015
Arts and Entertainment
Hacked off: Maisie Williams in ‘Cyberbully’

Maisie Williams single-handedly rises to the challenge

TV
Arts and Entertainment
Eddie Redmayne in The Theory of Everything and Benedict Cumberbatch in The Imitation Game are both nominated at the Bafta Film Awards
Arts and Entertainment

Academy criticised after no non-white actors nominated

Arts and Entertainment
Damian Lewis shooting a scene as Henry VIII in Wolf Hall
TV

Arts and Entertainment
A history of violence: ‘Angry, White and Proud’ looked at the rise of far-right groups

tv

An expose of hooliganism masquerading as an ideological battle

Arts and Entertainment

art

Lee Hadwin can't draw when he's awake, but by night he's an artist

Arts and Entertainment

TV

Arts and Entertainment
Michael Keaton in the 1998 Beetlejuice original

film

Arts and Entertainment

TV

Arts and Entertainment
Olivia Colman and David Tennant star in 'Broadchurch'

TV

Arts and Entertainment
Michael Kitchen plays Christopher Foyle in ITV's 'Foyle's War'

TV
Arts and Entertainment

TV
Arts and Entertainment
Downton Abbey star Joanne Froggatt will be starring in Dominic Savage's new BBC drama The Secrets

Arts and Entertainment
Vividly drawn: Timothy Spall in Mike Leigh’s ‘Mr Turner’
film
Arts and Entertainment
arts + ents
News
art

‘Remember the attackers are a cold-blooded, crazy minority’, says Blek le Rat

Latest stories from i100
Have you tried new the Independent Digital Edition apps?

ES Rentals

    Independent Dating
    and  

    By clicking 'Search' you
    are agreeing to our
    Terms of Use.

    Iraq invasion 2003: The bloody warnings six wise men gave to Tony Blair as he prepared to launch poorly planned campaign

    What the six wise men told Tony Blair

    Months before the invasion of Iraq in 2003, experts sought to warn the PM about his plans. Here, four of them recall that day
    25 years of The Independent on Sunday: The stories, the writers and the changes over the last quarter of a century

    25 years of The Independent on Sunday

    The stories, the writers and the changes over the last quarter of a century
    Homeless Veterans appeal: 'Really caring is a dangerous emotion in this kind of work'

    Homeless Veterans appeal

    As head of The Soldiers' Charity, Martin Rutledge has to temper compassion with realism. He tells Chris Green how his Army career prepared him
    Wu-Tang Clan and The Sexual Objects offer fans a chance to own the only copies of their latest albums

    Smash hit go under the hammer

    It's nice to pick up a new record once in a while, but the purchasers of two latest releases can go a step further - by buying the only copy
    Geeks who rocked the world: Documentary looks back at origins of the computer-games industry

    The geeks who rocked the world

    A new documentary looks back at origins of the computer-games industry
    Belle & Sebastian interview: Stuart Murdoch reveals how the band is taking a new direction

    Belle & Sebastian is taking a new direction

    Twenty years ago, Belle & Sebastian was a fey indie band from Glasgow. It still is – except today, as prime mover Stuart Murdoch admits, it has a global cult following, from Hollywood to South Korea
    America: Land of the free, home of the political dynasty

    America: Land of the free, home of the political dynasty

    These days in the US things are pretty much stuck where they are, both in politics and society at large, says Rupert Cornwell
    A graphic history of US civil rights – in comic book form

    A graphic history of US civil rights – in comic book form

    A veteran of the Fifties campaigns is inspiring a new generation of activists
    Winston Churchill: the enigma of a British hero

    Winston Churchill: the enigma of a British hero

    A C Benson called him 'a horrid little fellow', George Orwell would have shot him, but what a giant he seems now, says DJ Taylor
    Growing mussels: Precious freshwater shellfish are thriving in a unique green project

    Growing mussels

    Precious freshwater shellfish are thriving in a unique green project
    Diana Krall: The jazz singer on being friends with Elton John, outer space and skiing in Dubai

    Diana Krall interview

    The jazz singer on being friends with Elton John, outer space and skiing in Dubai
    Pinstriped for action: A glimpse of what the very rich man will be wearing this winter

    Pinstriped for action

    A glimpse of what the very rich man will be wearing this winter
    Russell T Davies & Ben Cook: 'Our friendship flourished online. You can share some very revelatory moments at four in the morning…'

    Russell T Davies & Ben Cook: How we met

    'Our friendship flourished online. You can share some very revelatory moments at four in the morning…'
    Bill Granger recipes: Our chef serves up his favourite Japanese dishes

    Bill Granger's Japanese recipes

    Stock up on mirin, soy and miso and you have the makings of everyday Japanese cuisine
    Michael Calvin: How we need more Eric Cantonas to knock some sense into us

    Michael Calvin's Last Word

    How we need more Eric Cantonas to knock some sense into us