A basic CSS syntax question

[Guest]

I know this is FP and it is my authoring tool, however, I've been learning
CSS (I think I've seen all the online tutorials) and have been studying
examples and have a basic syntax question.

In the style sheet I understand that to group selectors you separate them by
commas (e.g. h1, h2, h3 {....}), but I see sheets that have multiple
selectors that are not separated by commas (e.g. #id1 #id2 #id3 h3 {....} or
..p1 a,.p2 a,.p3 a {....} or #id1 .p2 {....}) Are these formats basically
setting up an "AND" condition. For example, in the last example does it mean
to apply the style specifications to items that have the ID of #id1 AND the
class of p2?

To keep this at least a little related to FP (2003), beyond the color
display, the quick pop ups during tag insertion, and indenting the styles
what other cool features does FP2003 have to work with the style sheets?

Thanks

Tom

 

[Murray]

It defines a 'lineage', for example -

#container #sidebar ul { .... }

would apply to any <ul> that is a child of #sidebar that is a child of
#container, e.g.,

<div id="container">...<div id="sidebar">...<ul><!-- This
one -->...</ul></div></div>

 

[p c]

My understanding.
Commas are used for grouping. This:
h1, h2, h3 {....}
assigns same properties to h1, h2, h3

When commas are not included, the assignment is contextual or
descendants selector

This
H1 EM { .... }
assigns properties to EM when it is inside of H1.

For your example,
#id1 #id2 #id3 h3 { ....}
it assigns properties to h3 when it is of ID: id1, id2 or id3.

For this example
..p1 a,.p2 a,.p3 a {....}
it assigns properties to a when it is of class p1, p2 or p3

in CSS class and ID assignment function the same except that ID must be
accessed bu Javascrpit and therefore manipulated (change properties)

Regards.
...PC
PS, I think is wok to ask CSS question in the FP NG.

 

[clintonG]

A "lineage" you say? There is no such thing as CSS lineage.

CSS does have grouping, inheritance, cascading order/specificity and other
constructs however.

// grouping example

(e.g. h1, h2, h3 {....}), selectors that are not separated by commas (e.g.
#id1 #id2 #id3 h3 {....}

The facts are best learned by reading the actual specifications [1] and
asking "specific" questions in the newsgroups using correct terminology when
something is not understood.

The best CSS editor is TopStyle [2].

<%= Clinton Gallagher
NET csgallagher AT metromilwaukee.com
URL http://clintongallagher.metromilwaukee.com/

[1] http://www.w3.org/Style/CSS/
[2] http://www.bradsoft.com/topstyle/

 

[Guest]

Thanks so much. I'll do some more homework, but let me ask a question to
confirm. I'll still be a little inaccurate in terminology, but I assume
that's ok once or twice.

So, a style like: ul li a{....} means to apply the style to an "a" tag if
it's inside an "li" tag that's inside a "ul" tag. So there's a hierarchy to
the order the selectors are specified.
Is there a difference between" h3.select and h3 .select (added space between
h3 and the class)?

As Murray suggested, I'll do some more work to get all the terms correct
before another post, but this gets me freed up from a learning stop.

CSS is just blowing me away. I've started to convert one of my sites
already (which was heavily table oriented) and it's so much fun. I'm very
much a novice at html and css and even less educated on java, etc., but this
stuff really helpful.

Thanks

Tom

 

[Guest]

Oops, I meant the suggestion that clintonG made about accuracy.

 

[Murray]

So, a style like: ul li a{....} means to apply the style to an "a" tag if

it's inside an "li" tag that's inside a "ul" tag. So there's a hierarchy
to
the order the selectors are specified.

Yes - that's correct.

Is there a difference between" h3.select and h3 .select (added space
between
h3 and the class)?

Yes. The former would apply only to <h3 class="select"> (and its contents
most likely), while the latter would apply only to <h3><span class="select">
(for example).

Good luck. When the light bulb really goes on, you'll be blown away by the
power of this tool.

 

[Guest]

Thank you (and this is already blowing me away). I haven't been so
interested in a topic like this for a long time. And talk about getting
creative with instant feedback.... Just doesn't get any better.

Thanks

Tom

 

[clintonG]

Thank you. Its a learning experience for all of us.

<%= Clinton Gallagher