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
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
Arts and Entertainment
Israeli-born actress Gal Gadot has been cast to play Wonder Woman
film
News
Top Gear presenter James May appears to be struggling with his new-found free time
people
Arts and Entertainment
Kendrick Lamar at the Made in America Festival in Los Angeles last summer
music
Arts and Entertainment
'Marley & Me' with Jennifer Aniston and Owen Wilson
film
Arts and Entertainment
Jon Hamm (right) and John Slattery in the final series of Mad Men
tv
Arts and Entertainment
theatre
Arts and Entertainment
Place Blanche, Paris, 1961, shot by Christer Strömholm
photographyHow the famous camera transformed photography for ever
Arts and Entertainment
The ‘Westmacott Athlete’
art
Arts and Entertainment
‘The Royals’ – a ‘twisted, soapy take on England’s first family’
tv Some of the characters appear to have clear real-life counterparts
News
Brooks is among a dozen show-business professionals ever to have achieved Egot status
people
Arts and Entertainment
A cut above: Sean Penn is outclassed by Mark Rylance in The Gunman
film review
Arts and Entertainment
arts + ents
Arts and Entertainment
James Franco and Zachary Quinto in I Am Michael

Film review Michael Glatze biopic isn't about a self-hating gay man gone straight

Arts and Entertainment
A scene from the movie 'Get Hard'
tvWill Ferrell’s new film Get Hard receives its first reviews
Arts and Entertainment
Left to right: David Cameron (Mark Dexter), Nick Clegg (Bertie Carvel) and Gordon Brown (Ian Grieve)
tvReview: Ian Grieve gets another chance to play Gordon Brown... this is the kinder version
Arts and Entertainment
Benedict Cumberbatch and Martin Freeman in the first look picture from next year's Sherlock special

TV
Arts and Entertainment
Because it wouldn’t be Glastonbury without people kicking off about the headline acts, a petition has already been launched to stop Kanye West performing on the Saturday night

music
Arts and Entertainment
Molly Risker, Helen Monks, Caden-Ellis Wall, Rebekah Staton, Erin Freeman, Philip Jackson and Alexa Davies in ‘Raised by Wolves’

TV review
Arts and Entertainment

TV
Arts and Entertainment
James May, Jeremy Clarkson and Richard Hammond in the Top Gear Patagonia Special

TV
  • Get to the point
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.

    No postcode? No vote

    Floating voters

    How living on a houseboat meant I didn't officially 'exist'
    Louis Theroux's affable Englishman routine begins to wear thin

    By Reason of Insanity

    Louis Theroux's affable Englishman routine begins to wear thin
    Power dressing is back – but no shoulderpads!

    Power dressing is back

    But banish all thoughts of Eighties shoulderpads
    Spanish stone-age cave paintings 'under threat' after being re-opened to the public

    Spanish stone-age cave paintings in Altamira 'under threat'

    Caves were re-opened to the public
    'I was the bookies’ favourite to be first to leave the Cabinet'

    Vince Cable interview

    'I was the bookies’ favourite to be first to leave the Cabinet'
    Election 2015: How many of the Government's coalition agreement promises have been kept?

    Promises, promises

    But how many coalition agreement pledges have been kept?
    The Gaza fisherman who built his own reef - and was shot dead there by an Israeli gunboat

    The death of a Gaza fisherman

    He built his own reef, and was fatally shot there by an Israeli gunboat
    Saudi Arabia's airstrikes in Yemen are fuelling the Gulf's fire

    Saudi airstrikes are fuelling the Gulf's fire

    Arab intervention in Yemen risks entrenching Sunni-Shia divide and handing a victory to Isis, says Patrick Cockburn
    Zayn Malik's departure from One Direction shows the perils of fame in the age of social media

    The only direction Zayn could go

    We wince at the anguish of One Direction's fans, but Malik's departure shows the perils of fame in the age of social media
    Young Magician of the Year 2015: Meet the schoolgirl from Newcastle who has her heart set on being the competition's first female winner

    Spells like teen spirit

    A 16-year-old from Newcastle has set her heart on being the first female to win Young Magician of the Year. Jonathan Owen meets her
    Jonathan Anderson: If fashion is a cycle, this young man knows just how to ride it

    If fashion is a cycle, this young man knows just how to ride it

    British designer Jonathan Anderson is putting his stamp on venerable house Loewe
    Number plates scheme could provide a licence to offend in the land of the free

    Licence to offend in the land of the free

    Cash-strapped states have hit on a way of making money out of drivers that may be in collision with the First Amendment, says Rupert Cornwell
    From farm to fork: Meet the Cornish fishermen, vegetable-growers and butchers causing a stir in London's top restaurants

    From farm to fork in Cornwall

    One man is bringing together Cornwall's most accomplished growers, fishermen and butchers with London's best chefs to put the finest, freshest produce on the plates of some of the country’s best restaurants
    Robert Parker interview: The world's top wine critic on tasting 10,000 bottles a year, absurd drinking notes and New World wannabes

    Robert Parker interview

    The world's top wine critic on tasting 10,000 bottles a year, absurd drinking notes and New World wannabes
    Don't believe the stereotype - or should you?

    Don't believe the stereotype - or should you?

    We exaggerate regional traits and turn them into jokes - and those on the receiving end are in on it too, says DJ Taylor