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
Matthew Healy of The 1975 performing on the Pyramid Stage at the Glastonbury Festival, at Worthy Farm in Somerset

music
Arts and Entertainment
booksThe Withnail and I creator, has a new theory about killer's identity
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
Arts and Entertainment
tvDick Clement and Ian La Frenais are back for the first time in a decade
Arts and Entertainment
The Clangers: 1969-1974
tv
Arts and Entertainment
Rocky road: Dwayne Johnson and Carla Gugino play an estranged husband and wife in 'San Andreas'
film review
Arts and Entertainment
Nicole Kidman plays Grace Kelly in the film, which was criticised by Monaco’s royal family

film
Arts and Entertainment
Emilia Clarke could have been Anastasia Steele in Fifty Shades of Grey but passed it up because of the nude scenes

film
Arts and Entertainment
A$AP Rocky and Rita Ora pictured together in 2012

music
Arts and Entertainment
A case for Mulder and Scully? David Duchovny and Gillian Anderson in ‘The X-Files’

TV
Arts and Entertainment
Impressions of the Creative Community Courtyard within d3. The development is designed to 'inspire emerging designers and artists, and attract visitors'

architecture
Arts and Entertainment
Performers drink tea at the Glastonbury festival in 2010

GlastonburyWI to make debut appearance at Somerset festival

Arts and Entertainment
Lena Headey as Cersei Lannister

TV reviewIt has taken seven episodes for Game of Thrones season five to hit its stride

Arts and Entertainment
Jesuthasan Antonythasan as Dheepan

FilmPalme d'Or goes to radical and astonishing film that turns conventional thinking about immigrants on its head

Arts and Entertainment
Måns Zelmerlöw performing

Eurovision
Arts and Entertainment
Graham Norton was back in the commentating seat for Eurovision 2015

Eurovision
Arts and Entertainment
Richard Hammond, Jeremy Clarkson and James May on stage

TV
Arts and Entertainment
The light stuff: Britt Robertson and George Clooney in ‘Tomorrowland: a World Beyond’
film review
Arts and Entertainment
Reawakening: can Jon Hamm’s Don Draper find enlightenment in the final ‘Mad Men’?
tv reviewNot quite, but it's an enlightening finale for Don Draper spoiler alert
Arts and Entertainment
Breakfast Show’s Nick Grimshaw

Radio
Arts and Entertainment

Eurovision
Arts and Entertainment
'Youth' cast members Paul Dano, Jane Fonda, Harvey Keitel, Rachel Weisz, and Michael Caine pose for photographers at Cannes Film Festival
film
Arts and Entertainment
Adam West as Batman and Burt Ward and Robin in the 1960s Batman TV show

Comics
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.

    On your feet! Spending at least two hours a day standing reduces the risk of heart attacks, cancer and diabetes, according to new research

    On your feet!

    Spending half the day standing 'reduces risk of heart attacks and cancer'
    Liverpool close in on Milner signing

    Liverpool close in on Milner signing

    Reds baulk at Christian Benteke £32.5m release clause
    With scores of surgeries closing, what hope is there for the David Cameron's promise of 5,000 more GPs and a 24/7 NHS?

    The big NHS question

    Why are there so few new GPs when so many want to study medicine?
    Big knickers are back: Thongs ain't what they used to be

    Thongs ain't what they used to be

    Big knickers are back
    Thurston Moore interview

    Thurston Moore interview

    On living in London, Sonic Youth and musical memoirs
    In full bloom

    In full bloom

    Floral print womenswear
    From leading man to Elephant Man, Bradley Cooper is terrific

    From leading man to Elephant Man

    Bradley Cooper is terrific
    In this the person to restore our trust in the banks?

    In this the person to restore our trust in the banks?

    Dame Colette Bowe - interview
    When do the creative juices dry up?

    When do the creative juices dry up?

    David Lodge thinks he knows
    The 'Cher moment' happening across fashion just now

    Fashion's Cher moment

    Ageing beauty will always be more classy than all that booty
    Thousands of teenage girls enduring debilitating illnesses after routine school cancer vaccination

    Health fears over school cancer jab

    Shock new Freedom of Information figures show how thousands of girls have suffered serious symptoms after routine HPV injection
    Fifa President Sepp Blatter warns his opponents: 'I forgive everyone, but I don't forget'

    'I forgive everyone, but I don't forget'

    Fifa president Sepp Blatter issues defiant warning to opponents
    Extreme summer temperatures will soon cause deaths of up to 1,700 more Britons a year, says government report

    Weather warning

    Extreme summer temperatures will soon cause deaths of up to 1,700 more Britons a year, says government report
    LSD: Speaking to volunteer users of the drug as trials get underway to see if it cures depression and addiction

    High hopes for LSD

    Meet the volunteer users helping to see if it cures depression and addiction
    German soldier who died fighting for UK in Battle of Waterloo should be removed from museum display and given dignified funeral, say historians

    Saving Private Brandt

    A Belgian museum's display of the skeleton of a soldier killed at Waterloo prompts calls for him to be given a dignified funeral