|
| One Hour HTML -
Learn the language of the web in just 60 minutes. |
CSS and the End of Tables
by Anthony Stai
In the bad old days of the web, the only way to create even slightly
complex layouts was to use tables. Some sites featured silly numbers of
tables, one inside the other, to create relatively simple-looking
effects. With CSS, though, tables can finally be replaced.
What's So Bad About Tables?
If you've ever worked with a site that uses tables, you'll know just
how difficult it can be. Your HTML becomes a mess of confusing rows and
columns, with no clear markers of which parts of the page do what. If
you want to redesign the site, you're forced to try to extract your
content from the HTML and start building the tables all over again.
With tables, building web pages felt a lot like building a house of
cards.
What's CSS?
CSS stands for Cascading Style Sheets. CSS lets you apply styling
information to specific parts of your HTML, identified by tag name, or
by IDs and classes you specify. This is done using CSS selectors.
CSS Selectors.
The first thing you need to know about CSS is the basics of how
selectors work. There are lots of esoteric and mostly useless
selectors, but the basics aren't too hard to grasp.
CSS relies on your tags having classes and IDs – the only real
difference between an ID and a class is that an ID refers to one tag
and one only, while a class can refer to more than one.
If you just have the name of a tag on its own, then your CSS rules will
affect all of those tags. If you use a tag's name followed by a dot and
the name of a class, then you'll affect all of those tags with that
class. Using a tag, a hash and an ID name will affect only the tag with
that ID. Using the hash and ID alone will work on any tag with that ID,
while using a dot and class name along works on any tag with that
class. So:
p - all paragraphs
p.thing - all paragraphs in the 'thing' class
p#thing - the paragraph with the ID 'thing'
.thing - all tags in the 'thing' class
#thing - the tag with the ID 'thing'
To add rules to each one of these selectors, you just put curly
brackets ({}) after it, and then put the rules in that space –
that's all you need to do to create CSS.
Useful CSS Rules.
CSS rules look like this:
rule-name: setting;
Here are some of the most useful rule names and the different settings that can be applied to them.
background-color. Lets you set a page's background colour using HTML colours (they look like this: #123456).
color: Sets colours for text.
font-family: Lets you set fonts for your text – you can add more
than one font name, separated by commas, in case your first choice is
not available.
font-size: You can set the font size in px or em – it's better to
use em, as these measurements are relative rather than absolute.
width and height: Lets you specify the width and height of things. You can use px or percentages.
margin: The amount of space around the edges of some content. You can
add -left, -right, -top and -bottom to margin to specify these margins
individually.
padding: Works the same way as margin, but is for the space between the
edges of the tag's box and its content, instead of the space between
the tag's box and other boxes.
border: Puts borders around boxes. Takes three settings (width, type
and colour), so you have to put spaces between them, like this: border:
1px solid black;
text-align: Lets you align text on the left or right, or in the centre ('center').
text-decoration: Controls some text effects – mainly used to stop
links from being underlined, like this: a { text-decoration: none; }
float: Tells content to float over other content, instead of starting
underneath it on a new line. This is the tag most often used to
simulate the kind of effects that you get with tables – floating
a div and setting the main content area's margin to its width is one of
the easiest ways to create a sidebar, for example.
About
The Author:
Anthony Stai invites you to
take your
website to the next level. Get one of the best Search Engine
Optimization (SEO) books on the market for Free! Learn the techniques
that differentiate the amateurs from the pros. Get your book at http://www.makemoneyonline4you.com/seo.html
|
|
|
|
Web Information
Online