|
Convenient web based access to our favorite web design Usenet groups
|
 |
This is Interesting: Free Magazines for Graphics designers and webmasters
| Author |
| Thread |
 |
|
|
|
|
|
|
|
|
|
|
 |
Re: New to css, trouble understanding cascading |
 |
|
 |
|
|
|
 01-15-05 - 12:17 PM 
|
On Sat, 15 Jan 2005 00:05:25 -0500, CheGueVerra <chegueverra@hotmail.com> wr
ote:
> First of all Hello all you css freak. geeks and gurus. I just started usi
ng
> 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;}
>
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 t
o
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 ev
ery
page you can have only one of them. What you want to use are classes. A sele
ctor
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 wh
at
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 t
hat
in your stylesheet.
> #noLine td#titles{
> font-weight:bold;
> text-align:left;}
>
> #topLine td#totalTitles{
> font-weight:bold;
> text-align:left;}
>
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 }
> Now, in my html file, yes the link worked no trouble, but when I put this
in
> my test html code
>
> <table align=center>
Don't use old fashioned attributes for visual rendering if you are already u
sing
stylesheets. Put all of your styles in that stylesheet for ease of maintenan
ce
and avoiding conflicting situations between the inline styling with attribut
es
on the elements themselve and the stylesheet, which you might run in to late
r
and then do not understand.
> <td id=totalTitles>Total Titles with noLine id in tr</td>
> <td id=totalTitles>Total Titles with topLine id in tr</td>
>
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 rethin
g
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 specifie
d
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 [coursesOv
erview].
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 fut
ure,
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 wron
g.
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="deptOvervi
ew"
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 structur
e, 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 p
ages
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 purpos
es.
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, unle
ss
the previous style has 'more rank', 'more weight'.
> ---
> Outgoing mail is certified Virus Free.
A sig separator should be [-- ] or 'dash dash space'. If you use that, s
omeone
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 |
`-------------------------------------------------- --<--@ ------------'
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Re: New to css, trouble understanding cascading |
|
|
|
|
|
|
|
01-18-05 - 12:18 AM
|
I have started slowly to create a css file with classes instead of Ids, I
carefully read your response and have put it in my archives for later
references, now I want to address a different problem, How do I arrange code
that works in Mozilla or Opera and not in IE, I have read in some other post
that:
>[Mozilla rendering incorrect while IE is Correct thread]
>You've gotten very good responses, so I'll simply state this rule of thumb:
>whenever IE does something different than Mozilla or Opera regarding CSS,
>there's a very high probability - close to certainty - that IE is the one
>that's wrong.
While I agree with that principle, it does not explain what I have to do to
get the same results in the different UA.
in my tests .css file i have
table.reportHeader {
border-collapse:collapse;
width:50%;
margin:1em auto;}
td.underLinedTitles{
border-bottom:3px solid black;}
td.overLinedTitles{
border-top:3px solid black;}
in the html file this
<table class="reportHeader">
<tr>
<td class="underLinedTitles">Date</td>
<td class="underLinedTitles">Prenom</td>
<td class="underLinedTitles">Nom</td>
<td class="underLinedTitles">Phone</td>
<td class="underLinedTitles">Balance</td>
</tr>
<tr>
<td>yourBirthDay</td>
<td>yourName</td>
<td>yourLastName</td>
<td>yourNumber</td>
<td>yourBalance</td>
</tr>
<tr>
<td>yourBirthDay</td>
<td>yourName</td>
<td>yourLastName</td>
<td>yourNumber</td>
<td>yourBalance</td>
</tr>
<tr>
<td>yourBirthDay</td>
<td>yourName</td>
<td>yourLastName</td>
<td>yourNumber</td>
<td>yourBalance</td>
</tr>
<tr>
<td class="overLinedTitles">Totals</td>
<td class="overLinedTitles"></td>
<td class="overLinedTitles"></td>
<td class="overLinedTitles"></td>
<td class="overLinedTitles">1,475.36</td>
</tr>
This doesnèt produce the same result in IE and Moz, so what to do .....
TIA
CheGueVerra
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Re: New to css, trouble understanding cascading |
|
|
|
|
|
|
|
01-18-05 - 04:18 AM
|
On Sat, 15 Jan 2005 00:05:25 -0500, CheGueVerra <chegueverra@hotmail.com> wr
ote:
> First of all Hello all you css freak. geeks and gurus. I just started usi
ng
> 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;}
>
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 t
o
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 ev
ery
page you can have only one of them. What you want to use are classes. A sele
ctor
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 wh
at
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 t
hat
in your stylesheet.
> #noLine td#titles{
> font-weight:bold;
> text-align:left;}
>
> #topLine td#totalTitles{
> font-weight:bold;
> text-align:left;}
>
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 }
> Now, in my html file, yes the link worked no trouble, but when I put this
in
> my test html code
>
> <table align=center>
Don't use old fashioned attributes for visual rendering if you are already u
sing
stylesheets. Put all of your styles in that stylesheet for ease of maintenan
ce
and avoiding conflicting situations between the inline styling with attribut
es
on the elements themselve and the stylesheet, which you might run in to late
r
and then do not understand.
> <td id=totalTitles>Total Titles with noLine id in tr</td>
> <td id=totalTitles>Total Titles with topLine id in tr</td>
>
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 rethin
g
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 specifie
d
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 [coursesOv
erview].
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 fut
ure,
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 wron
g.
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="deptOvervi
ew"
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 structur
e, 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 p
ages
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 purpos
es.
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, unle
ss
the previous style has 'more rank', 'more weight'.
> ---
> Outgoing mail is certified Virus Free.
A sig separator should be [-- ] or 'dash dash space'. If you use that, s
omeone
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 |
`-------------------------------------------------- --<--@ ------------'
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
|
|
|
|
|
Re: New to css, trouble understanding cascading |
|
|
|
|
|
|
|
01-20-05 - 05:22 PM
|
On Sat, 15 Jan 2005 00:05:25 -0500, CheGueVerra <chegueverra@hotmail.com> wr
ote:
> First of all Hello all you css freak. geeks and gurus. I just started usi
ng
> 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;}
>
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 t
o
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 ev
ery
page you can have only one of them. What you want to use are classes. A sele
ctor
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 wh
at
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 t
hat
in your stylesheet.
> #noLine td#titles{
> font-weight:bold;
> text-align:left;}
>
> #topLine td#totalTitles{
> font-weight:bold;
> text-align:left;}
>
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 }
> Now, in my html file, yes the link worked no trouble, but when I put this
in
> my test html code
>
> <table align=center>
Don't use old fashioned attributes for visual rendering if you are already u
sing
stylesheets. Put all of your styles in that stylesheet for ease of maintenan
ce
and avoiding conflicting situations between the inline styling with attribut
es
on the elements themselve and the stylesheet, which you might run in to late
r
and then do not understand.
> <td id=totalTitles>Total Titles with noLine id in tr</td>
> <td id=totalTitles>Total Titles with topLine id in tr</td>
>
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 rethin
g
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 specifie
d
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 [coursesOv
erview].
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 fut
ure,
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 wron
g.
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="deptOvervi
ew"
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 structur
e, 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 p
ages
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 purpos
es.
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, unle
ss
the previous style has 'more rank', 'more weight'.
> ---
> Outgoing mail is certified Virus Free.
A sig separator should be [-- ] or 'dash dash space'. If you use that, s
omeone
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 |
`-------------------------------------------------- --<--@ ------------'
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
|
|
|
| All times are GMT. The time now is 10:04 AM. |
|
|
|
|
|
| |
|
