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:
Original Source:
Eclipse-Articles.com
Information supplied and written by Lee Asher of Eclipse Domain
Services
Domain Names, Hosting, Traffic and Email Solutions.
