Understanding
CSS:
Do I Still Need To Create Tables in HTML?
SolveYourProblem.com Article Series: Web Site Design
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.
#
# # # #
SolveYourProblem.com : 2007
> Home > Website Design Articles: Main Page
|
