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
Art on their sleeves: before downloads and streaming, enthusiasts used to flick through racks of albums in their local record shops
musicFor Lois Pryce, working in a record shop was a dream job - until the bean counters ruined it
Arts and Entertainment
Serial suspect: the property heir charged with first-degree murder, Robert Durst
TV review
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
Arts and Entertainment
Igarashi in her

Art Megumi Igarashi criticises Japan's 'backwards' attitude to women's sexual expression

Arts and Entertainment
Could Ed Sheeran conquer the Seven Kingdoms? He could easily pass for a Greyjoy like Alfie Allen's character (right)

tv Singer could become the most unlikely star of Westeros

Arts and Entertainment
Beyonce, Boris Johnson, Putin, Nigel Farage, Russell Brand and Andy Murray all get the Spitting Image treatment from Newzoids
tvReview: The sketches need to be very short and very sharp as puppets are not intrinsically funny
Arts and Entertainment
Despite the controversy it caused, Mile Cyrus' 'Wrecking Ball' video won multiple awards
musicPoll reveals over 70% of the British public believe sexually explicit music videos should get ratings
Arts and Entertainment
Lena Headey as Cersei Lannister and Ian Beattie as Meryn Trant in the fifth season of Game of Thrones

TV
Arts and Entertainment

book review
Arts and Entertainment
It's all in the genes: John Simm working in tandem with David Threlfall in 'Code of a Killer'

TV review
Arts and Entertainment
Far Right and Proud: Reggies Yates' Extreme Russia

TV review
Arts and Entertainment
Kanye West was mobbed in Armenia after jumping into a lake

music
Arts and Entertainment
The show suffers from its own appeal, being so good as to create an appetite in its viewers that is difficult to sate in a ten episode series

Game of Thrones reviewFirst look at season five contains some spoilers
Arts and Entertainment
Judi Dench and Kevin Spacey on the Red Carpet for 2015's Olivier Awards

Ray Davies' Sunny Afternoon scoops the most awards

Theatre
Arts and Entertainment
Proving his metal: Ross Poldark (played by Aidan Turner in the BBC series) epitomises the risk-taking spirit of 18th-century mine owners

Poldark review
Arts and Entertainment
Eddie Redmayne is reportedly favourite to play Newt Scamander in Fantastic Beasts and Where to Find Them

film
Arts and Entertainment
Tom Hardy stars in dystopian action thriller Mad Max: Fury Road

film
Arts and Entertainment
Josh, 22, made his first million from the game MinoMonsters

Grace Dent

Channel 4 show proves there's no app for happiness
News
Disgraced Top Gear presenter Jeremy Clarkson
people
Arts and Entertainment
Game face: Zoë Kravitz, Bruce Greenwood and Ethan Hawke in ‘Good Kill’

film review

Arts and Entertainment
Living like there’s no tomorrow: Jon Hamm as Don Draper in the final season of ‘Mad Men’

TV review

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

    Revealed: Why Mohammed Emwazi chose the 'safe option' of fighting for Isis, rather than following his friends to al-Shabaab in Somalia

    Why Mohammed Emwazi chose Isis

    His friends were betrayed and killed by al-Shabaab
    'The solution can never be to impassively watch on while desperate people drown'
An open letter to David Cameron: Building fortress Europe has had deadly results

    Open letter to David Cameron

    Building the walls of fortress Europe has had deadly results
    Tory candidates' tweets not as 'spontaneous' as they seem - you don't say!

    You don't say!

    Tory candidates' election tweets not as 'spontaneous' as they appear
    Mubi: Netflix for people who want to stop just watching trash

    So what is Mubi?

    Netflix for people who want to stop just watching trash all the time
    The impossible job: how to follow Kevin Spacey?

    The hardest job in theatre?

    How to follow Kevin Spacey
    Armenian genocide: To continue to deny the truth of this mass human cruelty is close to a criminal lie

    Armenian genocide and the 'good Turks'

    To continue to deny the truth of this mass human cruelty is close to a criminal lie
    Lou Reed: The truth about the singer's upbringing beyond the biographers' and memoirists' myths

    'Lou needed care, but what he got was ECT'

    The truth about the singer's upbringing beyond
    Migrant boat disaster: This human tragedy has been brewing for four years and EU states can't say they were not warned

    This human tragedy has been brewing for years

    EU states can't say they were not warned
    Women's sportswear: From tackling a marathon to a jog in the park, the right kit can help

    Women's sportswear

    From tackling a marathon to a jog in the park, the right kit can help
    Hillary Clinton's outfits will be as important as her policies in her presidential bid

    Clinton's clothes

    Like it or not, her outfits will be as important as her policies
    NHS struggling to monitor the safety and efficacy of its services outsourced to private providers

    Who's monitoring the outsourced NHS services?

    A report finds that private firms are not being properly assessed for their quality of care
    Zac Goldsmith: 'I'll trigger a by-election over Heathrow'

    Zac Goldsmith: 'I'll trigger a by-election over Heathrow'

    The Tory MP said he did not want to stand again unless his party's manifesto ruled out a third runway. But he's doing so. Watch this space
    How do Greek voters feel about Syriza's backtracking on its anti-austerity pledge?

    How do Greeks feel about Syriza?

    Five voters from different backgrounds tell us what they expect from Syriza's charismatic leader Alexis Tsipras
    From Iraq to Libya and Syria: The wars that come back to haunt us

    The wars that come back to haunt us

    David Cameron should not escape blame for his role in conflicts that are still raging, argues Patrick Cockburn
    Sam Baker and Lauren Laverne: Too busy to surf? Head to The Pool

    Too busy to surf? Head to The Pool

    A new website is trying to declutter the internet to help busy women. Holly Williams meets the founders