Need to understand RH7's default.css

[avi10000]

Hi all,

A few months ago, I did my first couple of projects using RH7_for_HTML (with the help of this forum). I came with a thorough understanding of MS Word styling, so I knew what I was looking for to get the type of control I am used to having in Word, and also I already had a fair understanding of HTML/CSS.

However, I had trouble controlling RH7's styling using just the RH 'Styles' dialog box. I didn't *completely* understand the RH 'Styles' dialog box (although I have used a lot of different style systems in various authoring apps) and also didn't *completely* understand why RH was producing the default.css styles sheet that it did.

So … instead of spending more time grappling with it (it was time to actually write some content and prove my worth…), I decided it was time to ignore the 'Styles' dialog box and instead I enlisted the aid of a pretty sophisticated external HTML editor ( MS Visual Web Developer 2008) and got where I wanted to go.

I also included incremental definition (cascading) of styles within the style sheet so that, e.g., if I want to change the font or indentation or whatever of all the styles in one go, then I only need to modify one "base" style in the sheet instead of modifying all of the styles. I couldn't figure out how RH7 supported this.

Now, after a break for a while, I am returning to RH7 for my next project, and this time I would like to set up a professional, correct, clean work environment of template, stylesheet(s) and styles. To do this, maybe I can carry on ignoring the 'Styles' dialog box. Or maybe not. I don't know. Anyway, I am curious about what the Style dialog box does. Specifically, I hope somebody can help me understand the following:

(1) I see that in default.css, there is a definition for H1 and LI.H1, as below. (Same for H2…H6.)
What does LI.H1 give us?

H1 {
font-weight: bold;
font-size: 24.0pt;
}
LI.H1 {
font-weight: bold;
font-size: 24.0pt;
}

(2) Similarly there is a definition for P and LI.P, as below.
What does LI.P give us?

P {
font-size: 12.0pt;
margin-top: 0pt;
margin-bottom: 0pt;
}
LI.P {
font-size: 12.0pt;
}

(3) I experimented with the List style. I used the Styles dialog box to create a numbered list style, which I named 'List_L1'. RH added to its default.css file the following CSS definitions:

P.List_L1 {
list-style: decimal;
}
LI.P-List_L1 {
list-style: decimal;
}

(4) What *exactly* is the meaning of the 'Other' tree in the 'Styles' pane of the 'Styles' dialog box?
I understand the definition P.List_L1, but for what purpose is LI.P-List_L1?

(I had been wondering if the purpose of the LI (in (2), above) was to prepare some sort of list version for P, but when I actually created the list style (here in (3)) the LI.P was ignored.)

TIA,

- avi

[Guest]

To partially answer the question, RH creates and uses the LI.P and LI.H1 etc. styles if you create a list out of text that also uses the other style. For example, if you create a list from your normal text, then RH automatically adds this tag to each list item:

<li class=p>

I just tested this and found that if you created a list from a number of lines that used h1 (though I'm not sure why anyone would), then RH would apply:

<li class=h1>

...plus the extra <h1> tags.

So I believe that anytime you create a paragraph-level style, RH creates a corresponding "LI." style.

The Other category is for styles that don't really fall into the paragraph and character categories. For example, I manually created a div class, and in the Styles dialog, that shows up under Other (though I wouldn't edit it in the dialog).

If you're comfortable with your knowledge of CSS, you could probably be perfectly happy using Notepad or a CSS editor to edit your style sheet and never open the Styles dialog.

I think in RH8 the styling was improved, but I experimented with a copy of an existing project that I opened in RH8. The CSS file still has the "LI." definitions in it. Therefore, I don't know if RH8 would automatically create those styles when you start with a brand-new style sheet.

[avi10000]

Thanks for the answer!

>> For example, if you *create a list from your normal text*

>> *normal text*

I am not certain I understand what you mean here. I don't have RH on my laptop to try this out now. Will wait till get to my desktop at home. But I am wondering if you mean to superimpose a CSS list definition on top of 'Normal' style, without defining a list style. In Word we would call that "local formatting", a big professional 'no no' unless you are really stuck for time and have to quickly fix up appearance. So that would mean that the RH basic, default CSS set-up is oriented towards those who want to do local formatting. I can understand why MS Word offers this: Word is for all types of people. But RH is for professionals, no?

Looking again at

'<li class=p>'

I note something strange, as far as I understand CSS (beginner-to-medium). 'p' is supposed to be an HTML element or a CSS selector. Instead, it RH uses it in the above as a (sub) class that is applied to the <li> html element. If that's true, then this is all pretty dumb. Just going around in circles without defining any real CSS styles. Anyway, I will take a better look later, P.G.

Thanks again!

- avi

[Guest]

Yes, by "normal text" I was referring to the "Normal" style, which is a name for the regular "p" style. RH will apply the LI.x style when you use the bullets button in the toolbar and maybe in other ways, too. I typically create lists using the toolbar buttons after having manually tweaked the style sheet to have the list styles I want.

I agree that RH's use of elements as classes applies styles in a redundant way; I'm not sure why it's coded to do that.

[avi10000]

Thanks for the reponse.

This is ludicrous. all the various bells and whistles in RH are great, but at the end of the day the most important thing is that you have to be able to *efficiently* author nice-looking text. You can do this *efficiently* only if you have a well built HTML/CSS styling system. By (i) not providing good support for styling, and (ii) instead, doing crazy things, RH seems to have missed the point.

>> I think in RH8 the styling was improved, but I experimented with a copy of an existing project that I opened in RH8. The CSS file still has the "LI." definitions in it. Therefore, I don't know if RH8 would automatically create those styles when you start with a brand-new style sheet.

I also briefly experimented with RH8. I was very excited about the Styles side pane. I was especially interested in seeing how it supported lists, numbered, bulleted and multi-leveled. There were a number of serious bugs.

Thanks,

- avi

[avi10000]

I just tried creating a new project and a new list using RH8.
I wrote four paragraphs and then applied to them Format | Lists | Bullets and Numbering .

I got:

<ol type="1">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>&#160;</li>
</ol>

- avi

[Peter Grainge]

Using LI within the style sheet is not the same thing as applying an inline style (local formatting) in Word. It is effectively the same thing as a Class of a style. Because it is within the CSS, it is perfectly acceptable.

This thread started with RH7. Now you have posted some RH8 HTML. They will be different.

RH7 and earlier worked in a very different way to RH8 for lists.

When you are in Word and you go to a new paragraph and click the bullet / numbering icons, Word applies the bullet or number and uses the underlying Normal style.

RH used to emulate that and that is why it had the LI styles. It was so that authors had an interface similar to Word. In RH8 things have changed to be like Dreamweaver and other HTML editors. When you press Enter at the end of a paragraphs and click the bullet or numbering icons, it expects you to have defined your styles for OL UL and LI.

That is why you have no <p> tag within the LI lines you have shown.

In RH7, if your <p> tag was defined to have Verdana in red, so would a following list. In RH8 you will get what is defined for lists.

Some will say Adobe should have left things as they were. Others will say they were right to make things more standard.

I think the reason Ben got LI in his CSS is that he used an existing project. I am not at a RH8 machine so I cannot check.

Does that clarify things?

[avi10000]

Hi Peter,

Thanks for joining the thread. Now that you have, maybe I can drag you by the nose a bit and get you to answer a few more questions further below.

First, about trying to repeat Ben's RH7 test: I am now back at my office PC with RH7 (the RH8 at home is a just a trial version).

Using RH7, on a fresh new project with a fresh 'default.css', I just tried the same little test as Ben, and I got:

<ol style="list-style: decimal;" type=1>
<li class=p><p>List item a</p></li>
<li class=p><p>List item b</p></li>
<li class=p><p>List item c</p></li>
<li class=p><p>List item d</p></li>
</ol>

Similarly, for the H1 test, I got:

<ol style="list-style: decimal;" type=1>
<li class=H1><h1>Heading a</h1></li>
<li class=h1><h1>Heading b</h1></li>
<li class=h1><h1>Heading c</h1></li>
<li class=h1><h1>Heading d</h1></li>
</ol>

So that's a bit more voluminous than Ben got. Or maybe Ben just wrote an abbreviation of what he got. Ben? You looking in?

(I just realized that I forgot to look at the default.css that RH8 produced. I will have a look when I get home.)

>> This thread started with RH7. Now you have posted some RH8 HTML. They will be different.
Thanks for pointing that out, Peter. Well, at least from that, we now earned your description of RH7 vs. RH8 and their motivations. Great, sublime. Bet not many people know all that. You've now made me into a professional…
:-)

>> Using LI within the style sheet is not the same thing as applying an inline style (local formatting) in Word. It is effectively the same thing as a Class of a style. Because it is within the CSS, it is perfectly acceptable.

I've had to chew on this a lot…

Isn't this a relative thing? I mean, is it really sufficient that just because it is within the CSS, it makes it perfectly acceptable?". I mean, if you did this just as a shortcut, but you already have a good set of styles defined, but just couldn't be bothered to use them, then this is a "quick fix" and is not, as a rule, considered a professional thing to do.

On the other hand I see your point that since something like "LI.P" is using separate, predefined styles, we are still separating presentation from content, which is not the case if you do local formatting in Word (and same for applying fonts and colors and the like within HTML tags).

So in conclusion, I understand that the following definition, generated by RH7:
LI.P {
font-size: 12.0pt;
}

is saying: "for the HTML element, LI, prepare a class of type P, and this is what will be applied whenever you apply a default list using one of the toolbar buttons (1-2-3) or bullets on top of a 'Normal' text." And similarly for LI.Hx.

Btw, a pure CSS question, if I may. When RH7 generated the following:

P {
font-size: 12.0pt;
margin-top: 0pt;
margin-bottom: 0pt;
}
LI.P {
font-size: 12.0pt;
}

isn't there instead an abbreviated CSS way of doing this that avoids the duplication of attribute definitions and instead uses some sort of inheritance that allows LI.P to inherit the font size from P?

Further question: from your description of RH7 vs RH8 when you press Enter, what would be the issues when upgrading a project created with RH7 (and utilizing the styles in default.css) to RH8?

One more question. If I could give this topic a new name, what would be a better name?

Maybe:
'"Can I ignore the RH7 Styles dialog box?"
- or -
"Should I ignore the RH7 Styles dialog box?"
- or -
other?

TIA

- avi

[Peter Grainge]

Dragging me around by the nose tends not to get my co-operation!

1] That is the code I would expect to see in RH7. Ben may not be looking in as don't forget we are not in Israel. I believe you are.

2] "Well, at least from that, we now earned your description of RH7 vs. RH8 and their motivations. " Egh? What are you getting at here?

3] "I mean, is it really sufficient that just because it is within the CSS, it makes it perfectly acceptable?" Writing a class of a style rather than writing a second style is a perfectly valid method.

4] My point with Word was that you can apply paragraph styles, character styles and inline styling. Purists will argue the latter should not be used. Sometimes it is more important to get the job done and use an inline style rather than stopping to create an inline style.

5] So in conclusion, I understand that the following definition, generated by RH7:
LI.P {
font-size: 12.0pt;
}
is saying: "for the HTML element, LI, prepare a class of type P, and this is what will be applied whenever you apply a default list using one of the toolbar buttons (1-2-3) or bullets on top of a 'Normal' text." And similarly for LI.Hx.
Yes.

6] Isn't there instead an abbreviated CSS way of doing this that avoids the duplication of attribute definitions and instead uses some sort of inheritance that allows LI.P to inherit the font size from P? I would have thought it would inherit but Adobe have written it that way so I guess there is a reason. Maybe there has to be at least one definition for a style to work, I don't know, just guessing. Does it matter? You and I are not going to change the way it works. You can always edit the style sheet using another tool if you don't like RH's ways. I have done up to now. For RH8, first glances indicate I might use the built in editor, I need to look at it more.

[MergeThis]

If the RH way of helping itself by inserting some classes in the CSS file is anathema to you, you should prepare all your styles manually in the CSS file (using Notepad or whatever), and do not ever use the UI Styles feature.

Of course, you'll probably want to get a good CSS book to improve on your admittedly "beginner-to-medium" CSS expertise. I use the one by Richard York, the web designer, published by Wiley Publishing, Inc.


Good luck,
Leon

[avi10000]

>> If the RH way of helping itself by inserting some classes in the CSS file is anathema to you, you should prepare all your styles manually in the CSS file (using Notepad or whatever), and do not ever use the UI Styles feature.
Right, I don't like the way RH7 has done it, and it seems to very much limit the power of CSS. I was just very curious to understand why RH7 was doing it the way it does it; not only did I wonder if I was missing something good, even in the long run I could never claim any expertise in RH/CSS if I can't even explain why RH sets up its default style sheet the way it does. Since RH is the main authoring tool at one of my clients I wish to learn it to a professional level, and not to remain forever an amateur, so such basic stuff I should know.

>> Of course, you'll probably want to get a good CSS book to improve on your admittedly "beginner-to-medium" CSS expertise. I use the one by Richard York, the web designer, published by Wiley Publishing, Inc.
Thanks for the recommendation.

- avi

[avi10000]

>> 1] Ben may not be looking in as don't forget we are not in Israel. I believe you are.
I just meant "in general". All the different time zones unite in a somewhat higher world - so whenever he looks in, it's as if it's now.

>> 2] "Well, at least from that, we now earned your description of RH7 vs. RH8 and their motivations. " Egh? What are you getting at here?
All I meant was that it was a nice piece you wrote there. Very useful indeed - critical for understanding the way that RH7 and RH8 do lists differently.

Thanks,

- avi

[Guest]

Just to answer the question, I was just showing the initial tag that RH inserted rather than the code for the entire line--so yes, abbreviating essentially.

[avi10000]

Thanks, everybody, for the responses. This was a very important thread for me.

Today is now a holiday day in my part of the world, and I will be back in another 24-36 hrs.

Thanks again,

- avi