On Sat, 15 Jan 2005 00:05:25 -0500, CheGueVerra <chegueverra@hotmail.com> wrote:
[color=blue]
> First of all Hello all you css freak. geeks and gurus. I just started using
> css for some web pages I had to do at work and I'im testing some stuff at
> home to understand more. Now, I wanted to understand better of how
> cascading works.
>
> in my .css file I created this
>
> tr#noLine{
> border-top-width:0;
> border-left-width:0;
> border-bottom-width:0;
> border-right-width:0;
> border-style:none;}
>[/color]
First, don't style table rows. Style the elements that are actually visible, the
table itself, the data or header cells for the header and footer part of the
table, the datacells in the table body.
Second, I do hope you use table for presenting tabular data. If you intend to
use tables for lay-out: don't do that. Google for tableless design.
Third, you use an id selector. An id is like a social security number. In every
page you can have only one of them. What you want to use are classes. A selector
might than look like element.semanticClassName.
Fourth, there are easier ways to write the code you wanted: { border:0; } will
do the trick in this case. Besides, you don't have to describe styles for what
is already the standard way things get presented. A table doesn't have any
borders, unless you styled them elsewhere, so there is no need to describe that
in your stylesheet.
[color=blue]
> #noLine td#titles{
> font-weight:bold;
> text-align:left;}
>
> #topLine td#totalTitles{
> font-weight:bold;
> text-align:left;}
>[/color]
If styles are shared among various selectors, it is usually safe to list the
selectors and describe the styles only once:
selector1,
selector2,
selector3 {
styles }
[color=blue]
> Now, in my html file, yes the link worked no trouble, but when I put this in
> my test html code
>
> <table align=center>[/color]
Don't use old fashioned attributes for visual rendering if you are already using
stylesheets. Put all of your styles in that stylesheet for ease of maintenance
and avoiding conflicting situations between the inline styling with attributes
on the elements themselve and the stylesheet, which you might run in to later
and then do not understand.
[color=blue]
> <td id=totalTitles>Total Titles with noLine id in tr</td>
> <td id=totalTitles>Total Titles with topLine id in tr</td>
>[/color]
This is where you go wrong with the use of id's. Don't use a unique id more than
once in a page.
What you want is not all that complicated. A table that renderes without
specific styling and one that has specific styling. You might want to rething
you scheme for creating names for the classes you need (use classes for this,
not id's, remember). A name that comminicates back to you _why_ you specified
the class, that has a meaning, will help you maintaining your styles in the
future.
For example, you as a service deliver education to the public. The page is a
general page with some overview data. Perhaps you want the first table to
contain an overview of courses, so you give the table a class [coursesOverview].
The second table contains an overview of departments in your organisation,
course related. The class for that table might then be [deptOverview].
These classes have meaning and will still be understood some time in the future,
whereas 'topLine' doesn't say anything as to _why_ you wanted a topLine, why you
wanted that table to stand out.
Now, start at your markup. Always first create good structured and fairly
semantic markup. Don't bother to think about styling yet:
<table class="coursesOverview" summary="describe the structure and contents of
this table">
<!-- the structure and contents of this table -->
</table>
<table class="deptOverview" summary="structure and contents description">
<!-- the structure et cetera -->
</table>
Once you created the page, validate it to see if nothing seriously went wrong.
Then start the styling.
You want the tables to be centered:
table.coursesOverview,
table.deptOverview {
width: 80%; /*or what you need them to be*/
margin:1em auto; }
You want the headers in the tables to be bold:
coursesOverview th,
deptOverview th, {
font-weight:bold;
text-align:left; } /* besides: if using correct markup
a header cell in a table will usually render bold,
so there won't be a need to write this style; same
goes for the text-align:left, which is also a
default */
Then you want the row with table headers of the table with class="deptOverview"
to have a border at its top:
deptOverview th {
border-top:3px solid black; } /* all the rest can be
skipped as no border is the default; you don't have to
describe that style */
So, it isn't as much the cascade that is your problem. It is a basic
understanding of what you are doing.
Again, start with the markup. Properly markup the pages with a good structure, a
semantic use of the available elements. Don't worry about it's looks, yet.
Then style the elements that are there. If you want all the tables in your pages
to have a border around them, use:
table {
border:2px outset red; }
If you want all the headers in your pages to have a line both underneath and
above the text, use:
h1,h2,h3,h4,h5,h6 {
text-decoration:underline overline; }
Use what is there, before you start specifying classes and id's as selecors in
your stylesheets.
Don't use id's where not necessary and don't use them more than once in an
individual page. Most importantly: Don't ever abuse tables for layout purposes.
Use proper markup.
The way things get renderred on your screen with a grafical browser are
influenced mostly by (last has least influence):
inline styles,
styles described with id's,
styles described with classes,
styles described with the elements.
The cascade is (roughly) 'top-down'. What the browser meets first as a
description for a style will be overruled by a style it reads later on, unless
the previous style has 'more rank', 'more weight'.
[color=blue]
> ---
> Outgoing mail is certified Virus Free.[/color]
A sig separator should be [-- ] or 'dash dash space'. If you use that, someone
replying won't have to delete your sig by hand, as there news client will do
that for them. Please fix.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog |
http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp |
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen |
http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
