Dreamweaver - * Newbie-level CSS question...

Author

* Newbie-level CSS question...

2006-02-07, 10:37 pm

I want to apply certain basic style variables to ALL form elements, and then
I want to specify certain variables for certain form elements.

For instance, I want all form elements to be RED. But the size of the text
will vary depending on whether it's a button or field area text.

I will have a different style for each form element, but how would I write
this in the stylesheet without redefining the RED on all the aforementioned
elements?

Joe Makowiec

2006-02-07, 10:37 pm

On Thu 26 Jan 2006 05:46:26p, MS wrote in macromedia.dreamweaver:

> I want to apply certain basic style variables to ALL form elements,
> and then I want to specify certain variables for certain form
> elements.
>
> For instance, I want all form elements to be RED. But the size of the
> text will vary depending on whether it's a button or field area text.
>
> I will have a different style for each form element, but how would I
> write this in the stylesheet without redefining the RED on all the
> aforementioned elements?

input {
color: red ;
font-size: 22px;
}
input.smaller {
font-size: 11px;
}

<input name="regular" id="regular" value="22px text">
<input name="small" id="small" class="smaller" value="11px text">

Michael Fesser

2006-02-07, 10:37 pm

..oO(MS)

>.group.subgroup1 {
>font-size: 11px;
>}
>
>And if so, how do I call "group.subgroup1"? I mean, syntax-wise?

Not really sure what you mean. The selector above applies to all
elements that belong to the classes 'group' and 'subgroup1', e.g.

<p class="group subgroup1">...</p>

Not sure if this is what you want.

Micha

2006-02-07, 10:37 pm

"Joe Makowiec" <webmaster@munged.brunswicklibrary.invalid> wrote in message
news:Xns9757B6945D684makowiecatnycapdotrE@216.104.212.96...
>
> input {
> color: red ;
> font-size: 22px;
> }
> input.smaller {
> font-size: 11px;
> }
>
> <input name="regular" id="regular" value="22px text">
> <input name="small" id="small" class="smaller" value="11px text">

Now let's say I want to apply the same principle to another group of
elements which aren't universal tags. Just a group of fonts I don't want to
repeat redundant elements in.

Would this work?

..group {
color: red ;
font-size: 22px;
}
..group.subgroup1 {
font-size: 11px;
}

And if so, how do I call "group.subgroup1"? I mean, syntax-wise?

2006-02-07, 10:37 pm

"Michael Fesser" <netizen@gmx.de> wrote in message
news:kpmit1da8p620hlpsdinkvnomvt516lrre@4ax.com...
> .oO(MS)
>
> Not really sure what you mean. The selector above applies to all
> elements that belong to the classes 'group' and 'subgroup1', e.g.
>
> <p class="group subgroup1">...</p>
>
> Not sure if this is what you want.

Sorry for being vague.

Body tag defines everything as Times and color blue.

Everything in Group A will be Arial and red.

However, depending on the specific area where the text is located, some of
those Group A (Arial, red) fonts will be 12px and others 14px.

If I call them Group A and Group B, then I have to redefine the font type
and color in both groups.

However, if I "subgroup" the font sizes under Group A, then I don't need to
redefine the type and color for these fonts, right? Did I understand how CSS
works correctly?

That said, how do I name and call these groups/subgroups?

Murray *TMM*

2006-02-07, 10:38 pm

> However, if I "subgroup" the font sizes under Group A, then I don't need
> to redefine the type and color for these fonts, right? Did I understand
> how CSS works correctly?

Yes.

> That said, how do I name and call these groups/subgroups?

Just the way that Micha showed -

<element class="group subgroup1"

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"MS" <ms@spamfree.com> wrote in message
news:drbmm7$rm8$1@forums.macromedia.com...
> "Michael Fesser" <netizen@gmx.de> wrote in message
> news:kpmit1da8p620hlpsdinkvnomvt516lrre@4ax.com...
>
> Sorry for being vague.
>
> Body tag defines everything as Times and color blue.
>
> Everything in Group A will be Arial and red.
>
> However, depending on the specific area where the text is located, some of
> those Group A (Arial, red) fonts will be 12px and others 14px.
>
> If I call them Group A and Group B, then I have to redefine the font type
> and color in both groups.
>
> However, if I "subgroup" the font sizes under Group A, then I don't need
> to redefine the type and color for these fonts, right? Did I understand
> how CSS works correctly?
>
> That said, how do I name and call these groups/subgroups?
>

Michael Fesser

2006-02-07, 10:38 pm

..oO(MS)

>Everything in Group A will be Arial and red.
>
>However, depending on the specific area where the text is located, some of
>those Group A (Arial, red) fonts will be 12px and others 14px.
>
>If I call them Group A and Group B, then I have to redefine the font type
>and color in both groups.

..groupA, .groupB {font: 12px Arial, sans-serif; color: #F00}
..groupB {font-size: 14px}

>However, if I "subgroup" the font sizes under Group A, then I don't need to
>redefine the type and color for these fonts, right? Did I understand how CSS
>works correctly?

Kind of. But this might lead to some dozen custom classes all over the
page. A group here, a special subgroup there, elements with multiple
classes on them and so on. Works, but is rather bad.

Think about the structure of the document. Why do certain parts have to
appear different, what's their meaning? Are there some certain elements
(headings for example) you want to style differently? Are there some
bigger logical structures/containers that can be used?

An example. Let's say you want to style paragraphs differently, using
the classes from above. You could do it this way:

<p class="groupA">...</p>
<p class="groupA">...</p>
<p class="groupA">...</p>

And somewhere else on the page:

<p class="groupB">...</p>
<p class="groupB">...</p>
<p class="groupB">...</p>

But having classes on that many elements is really bad and doesn't make
use of the benefits CSS has to offer. Now let's assume these paragraphs
belong to some kind of bigger containers, let's use 'div' elements for
simplicity here (but could also be something else, a list or a table for
example):

<div class="groupA">
<p>...</p>
<p>...</p>
<p>...</p>
</div>

<div class="groupB">
<p>...</p>
<p>...</p>
<p>...</p>
</div>

Now the styling can be done with so called descendant selectors:

..groupA p {...}
..groupB p {...}

5.5 Descendant selectors
http://www.w3.org/TR/CSS21/selector...ndant-selectors

Using more selectors like these and less classes leads to more flexible
and cleaner code. Try to use them as often as possible. Use classes and
IDs where necessary, but try to apply them to container elements, not to
the contained elements themselves.

Micha

2006-02-07, 10:39 pm

"Michael Fesser" <netizen@gmx.de> wrote in message
news:o2fkt1hbe9nsrqhsc7mar3df4jhfiii1em@4ax.com...
> .oO(MS)
>
>
> .groupA, .groupB {font: 12px Arial, sans-serif; color: #F00}
> .groupB {font-size: 14px}

So, then, there's no way of declaring, for example, something like :

groupA
{
font: Arial, sans-serif; color: #F00
subgroup1 {font-size: 10px}
subgroup2 {font-size: 11px}
subgroup3 {font-size: 12px}¨
}

....and then only declare <span class="subgroup3"> which would inherit all
the properties of the group it's in inside the stylesheet, in addition to
the specifics of this subgroup..?

I have to repeat the names of the subgroups in the first font type
declaration the way you did, like :

..subgroup1, .subgroup2, .subgroup3 {font: Arial, sans-serif; color: #F00}
..subgroup1 {font-size: 10px}
..subgroup2 {font-size: 11px}
..subgroup3 {font-size: 12px}

....that?

Michael Fesser

2006-02-07, 10:39 pm

..oO(MS)

>So, then, there's no way of declaring, for example, something like :
>
>groupA
>{
> font: Arial, sans-serif; color: #F00
> subgroup1 {font-size: 10px}
> subgroup2 {font-size: 11px}
> subgroup3 {font-size: 12px}¨
>}
>
>...and then only declare <span class="subgroup3"> which would inherit all
>the properties of the group it's in inside the stylesheet, in addition to
>the specifics of this subgroup..?

Nope.

>I have to repeat the names of the subgroups in the first font type
>declaration the way you did, like :
>
>.subgroup1, .subgroup2, .subgroup3 {font: Arial, sans-serif; color: #F00}
>.subgroup1 {font-size: 10px}
>.subgroup2 {font-size: 11px}
>.subgroup3 {font-size: 12px}
>
>...that?

Either this, or multiple classes applied to the same element, like

<p class="groupA subgroup1">...</p>

Micha

2006-02-07, 10:39 pm

"Michael Fesser" <netizen@gmx.de> wrote in message
news:p0alt19vl5n67ta6dec7o3pr6mc8oo8lj5@4ax.com...
> .oO(MS)
>
>
> Either this, or multiple classes applied to the same element, like
>
> <p class="groupA subgroup1">...</p>

Why is it, then, that if I apply a body tag like this :

body {
font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #4E939C;
margin: 0px;
padding: 0px;
height: 0px;
width: 0px;
}

And then add this for form elements :

input, textarea, select {
font-size: 10px;
}

....that the form elements are 10px but don't retain the #4E939C color
defined in the body tag?

What if I want everything, everywhere, to be color #4E939C? How often does
it need to be specified?

Michael Fesser

2006-02-07, 10:40 pm

..oO(MS)

>Why is it, then, that if I apply a body tag like this :
>
>body {
> font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> color: #4E939C;
> margin: 0px;
> padding: 0px;
> height: 0px;
> width: 0px;
>}

Why the last two rules?

>And then add this for form elements :
>
>input, textarea, select {
> font-size: 10px;
>}
>
>...that the form elements are 10px but don't retain the #4E939C color
>defined in the body tag?

Styling of form elements is difficult and heavily depends on the browser
and how it renders the elements.

>What if I want everything, everywhere, to be color #4E939C? How often does
>it need to be specified?

Usually just once for the body, since 'color' is inherited. But some
elements (like links and form controls for example) might have default
colors, which also have to be overriden.

Micha