h vs p classes, div for indent levels, bullet images?

[PCrockett]

I'm new to Flare and CSS, having used FrameMaker for years. To create a baseline CSS, I imported our FrameMaker template and mapped all paragraph tags to p classes, to retain autonumbering. The topics look good for the most part, but I'd like to tweak the CSS to follow best practices and make it easier for writers to use.

1. Do I need to change the p.heading classes to h1, h2, h3, and so on? Or is it OK to leave them as p.heading_1, p.heading_2, and so on? What are the pros and cons of the h vs. p class schemes? I'd like to go with "best practices."

2. I currently have separate p classes for each level of indent of each type of p class (for ex., p.Body_Text, p.Body_Text_2 and p.ListBul, p.ListBul_2). This makes for a long list of styles. Would it be possible to use just the first-level indent of each class and create div that writers could apply to indent that class to the second and third levels (for ex., just have p.Body_Text and p.ListBul, plus div.Indent_2, div.Indent_3)? If so, is there a way to just set the indent level in the div class, but retain all of the other attributes of the p class that you are wrapping? If this isn't possible (or it's just a bad idea), are there other ways to avoid having so many p classes, or are we just stuck with the long list of styles?

3. In FrameMaker, we have a list bullet style that uses a check box instead of a bullet. This came over to Flare as a p class (p_Check_Box_Bullet), but the check box has been replaced with a "q." How can I add the check box? As I mentioned, I mapped all bullet styles to p classes on import, to retain autonumbering. If I had to change this one to li to get the check box, I'd be willing to do that. I know that this has something to do with list-style-image. If someone could share the code, that would be great. Any ideas on where to snag a check box? We just used Wingdings in FrameMaker.

Thanks very much.

[KevinDAmery]

1. Do I need to change the p.heading classes to h1, h2, h3, and so on? Or is it OK to leave them as p.heading_1, p.heading_2, and so on? What are the pros and cons of the h vs. p class schemes? I'd like to go with "best practices."

"Need" is a bit strong, but I would prefer to use HTML heading styles given a choice. First, using the heading styles is more meaningful semantically, meaning that if you want to migrate to DITA or some other structured authoring approach at some point the content will be interpretted correctly. Second, it gives you a way to handle headings separately from paragraphs. In CSS, if you have a class that does not include a style parameter, it automatically inherits that parameter from the base style, so by making your headings classes of paragraphs, any changes you may to "p" may cascade to your headings. (Now, it's possible you may want that... just be aware that it's happening before deciding how to proceed.)

2. I currently have separate p classes for each level of indent of each type of p class (for ex., p.Body_Text, p.Body_Text_2 and p.ListBul, p.ListBul_2). This makes for a long list of styles. Would it be possible to use just the first-level indent of each class and create div that writers could apply to indent that class to the second and third levels (for ex., just have p.Body_Text and p.ListBul, plus div.Indent_2, div.Indent_3)?

I'd be inclined to use paragraph classes or generic classes - generic classes are great because they can be applied to anything (paragraphs, lists, Divs, you name it). Divs would work for the most part, but remember that in CSS rules, whatever style is closest to the content wins: since the P tags are closer to the content than Div tag, any style info in the P class will over-ride the Div.

If so, is there a way to just set the indent level in the div class, but retain all of the other attributes of the p class that you are wrapping?

Yes, provided that the p class doesn't have its own margin or padding settings. As mentioned above, if they do have margin or padding settings those will supersede the settings in the Div class.

[NorthEast]

2. I currently have separate p classes for each level of indent of each type of p class (for ex., p.Body_Text, p.Body_Text_2 and p.ListBul, p.ListBul_2). This makes for a long list of styles. Would it be possible to use just the first-level indent of each class and create div that writers could apply to indent that class to the second and third levels (for ex., just have p.Body_Text and p.ListBul, plus div.Indent_2, div.Indent_3)?

I'd be inclined to use paragraph classes or generic classes - generic classes are great because they can be applied to anything (paragraphs, lists, Divs, you name it). Divs would work for the most part, but remember that in CSS rules, whatever style is closest to the content wins: since the P tags are closer to the content than Div tag, any style info in the P class will over-ride the Div.

One thing I would say regarding generic classes is that you can't apply them to tags that already have a class. For example, say you had generic classes for your indentation - .indent1 .indent2 .indent3 - you can't then go and apply those to a p.note style.

If this is a one-way conversion, I'd also seriously look into converting all your lists into 'proper' HTML lists - i.e. using ol, ul, li tags. It's more initial effort (as Flare can't automatically convert FM paragraphs to lists/bullets), but you get rid of all the extra p tags and indentation is determined by the list structure and not a style.

If so, is there a way to just set the indent level in the div class, but retain all of the other attributes of the p class that you are wrapping?

Yes, provided that the p class doesn't have its own margin or padding settings. As mentioned above, if they do have margin or padding settings those will supersede the settings in the Div class.

The margin/padding wouldn't supercede those set for the div, they'd be used in combination - the div is its container tag, so the paragraph's margin and padding would be applied inside the div.