»Dotnet Ads
»Message Boards
Message Boards
Dotnet Books
»Member Details
Register
Login
LogOut
Submit Code
Submit Jobs
Submit Projects
»Competition
Community
Winners
Prizes
Write For Us
Members
»Other Resources
Links
Dotnet Resources
|
CSS and the End of TablesIn 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
th
|