Need Help Understanding CSS Styles for Lists

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Mishou6779
Propeller Head
Posts: 57
Joined: Mon Jun 01, 2009 9:19 am

Need Help Understanding CSS Styles for Lists

Post by Mishou6779 »

Hello MadCap Flare community!

I went to the W3C website to find "best practices" for lists in CSS for HTML. Specifically I was looking at ol, ul, and li. I now understand that ol and ul are the parents and li is the child, which helped considerably. Now I'm struggling to understand where the p tag fits in.

Do I need to use the p tag inside of the li items so I can control the font?

Or am I supposed to use the font settings in the Flare CSS for the ol and ul? Or should I set up the font in the li?

If "cascade" in cascading style sheet means styles trickle down from top to bottom (parent to child) where do the p tags fit in when it comes to lists?

Ultimately, I want to have more space before and after each item in the list, and less space between each line in the sentences/paragraphs within each item in the list. (Hope that makes sense.) This is for HTML5 tripane output, and it has to be Section 508 compliant.

I did visit the MadCap blog post titled How to Use CSS to Manage Lists, and that helped, but didn't really help me understand which tags take precedence when there are ol, ul, li, and p tags all in the same list.

Thank you!
Michelle
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Need Help Understanding CSS Styles for Lists

Post by Psider »

The 'cascade' does mean that if some setting isn't specified for a particular element (e.g. li) then it will inherit it from the parent. And it keeps going back/up until it finds a value to use.

If we have a stylesheet:

Code: Select all

html {
      font-size: 16px;
}
Then the p tag and ol and li tags are all going to have a font size of 16px.

But if the stylesheet is like this:

Code: Select all

html {
      font-size: 16px;
}
p {
   font-size: 13px;
}
Then the ol and li tags will be 16px (inherited from their ultimate parent 'html'). But the p tag will be 13px because it's specifically set.

You can include p tags inside the li, but it's not necessary if you only have one paragraph inside the li. However, if you want to include nested paragraphs, then you need to include the p tags to correctly mark each paragraph block.

So for a simple list this is fine:

Code: Select all

<ol>
    <li>Put the key into the lock.</li>
    <li>Turn the key.</li>
    <li>Open the door.</li>
</ol>
But if you want to add some notes or explanatory text, then you need the p tags.

Code: Select all

<ol>
    <li>Put the key into the lock.</li>
    <li>Turn the key.</li>
    <li><p>Open the door.</p>
        <p>Some doors can be pushed open. However some doors may need to be pulled open.</p></li>
</ol>
  1. Put the key into the lock.
  2. Turn the key.
  3. Open the door.
    Some doors can be pushed open. However some doors may neeed to be pulled open.
Now, the cascade comes in to play here. Using the second stylesheet example, the first and second bullet points will display in 16px because they inherit from 'html'. But the third bullet point will display in 13px because of the size defined explicitly for the p tags. To get all list items the same size, you'd either have to create a style for the ol or li to set it to 13px or include p tags in all list items - both are valid methods. (I personally use the first method, but if you use em rather than px, things can be a bit more complicated because of the inheritance; I won't go into it right now. :) )

Now, to your specific requirements.

You would need to set top and bottom margins on the li to create the space between each list item.

The next part is perhaps not clear 'less space between each line in the sentences paragraphs within each item". 'sentences/paragraps' is two different things. If you are talking about the space between lines of text in a single paragraph, then that would be line-height. If you are talking about space between multiple paragraphs, then that is likely margin, but could also be padding depending on how your styles are set up. In either case, you would probably need to set it on both the li and also a complex selector, 'li p', which says 'for any p tag inside an li tag, use these settings instead of the normal p settings'.

e.g. the following would set a 4px top and bottom margin for all paragraph tags inside li tags:

Code: Select all

li p {
    margin: 4px auto;
}
I would recommend making one change at a time and checking the effect before making another. I usually have a test project with a topic containing a sample of multiple scenarios so that I can see everything in one go, and without messing up my normal stylesheet.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Need Help Understanding CSS Styles for Lists

Post by NorthEast »

At the risk of sounding like a complete nerd/pedant, styles trickling down from the parent is called "inheritance", and "cascade" means something different - but it doesn't affect Psider's good advice.

Inheritance refers to style properties being passed down from the parent to a child element (in the HTML structure). Some stuff is inherited (e.g. font, colour), but some stuff is reset by the child (e.g. width). It's actually hard to find (and remember) what properties are inherited by different tags, but most of what is inherited is sensible.
For example, if you set a font-size on the body tag, then everything inside your topic is going to use that size (as they're all underneath body in the HTML structure). So things like that are handy because you don't actually need to set a font-size on paragraphs, lists, etc. - unless you want them to be different to what you set for the body.

The "cascade" bit (and specificity) refers to the CSS rules that determine what style property is applied to an element. For example, the "cascade" means an inline style on a pargaraph tag in the HTML will "win" against a p {} style in a CSS file, and "specificity" means a more specific style like li p { } (paragraph inside a list item) will "win" against a less specific style like p { } (just the paragraph).

https://developer.mozilla.org/en-US/doc ... nheritance
At some point, you will be working on a project and you will find that the CSS you thought should be applied to an element is not working. Usually, the problem is that you have created two rules which could potentially apply to the same element. The cascade, and the closely-related concept of specificity, are mechanisms that control which rule applies when there is such a conflict. Which rule is styling your element may not be the one you expect, so you need to understand how these mechanisms work.
Also significant here is the concept of inheritance, which means that some CSS properties by default inherit values set on the current element's parent element, and some don't. This can also cause some behavior that you might not expect.
Mishou6779
Propeller Head
Posts: 57
Joined: Mon Jun 01, 2009 9:19 am

Re: Need Help Understanding CSS Styles for Lists

Post by Mishou6779 »

Psider and Dave Lee thank you both for your replies!

I have to be honest, I signed in this morning thinking nobody would have bothered to reply to my post, so your answers blew me away! Thank you so much! You were both so patient and thorough, and now I can see why you professional writers! :D

Psider, you are correct, I did mean line-height, thank you for putting the correct terminology to my blathering. (I wondered how to say it, and was in a hurry, so there we are...)

Dave, thank you for explaining all of the subtleties between cascade, inherit, and specificity. I have wondered what the difference was between what goes on in the HTML versus the CSS, so this gives me a lot of things to ponder (and learn!).

My ultimate goal is to have a very "clean" stylesheet, with settings that make sense. I am not there yet.

Thank you both again for your assistance! Y'all just made my morning!! :)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Need Help Understanding CSS Styles for Lists

Post by NorthEast »

No problem. Most learners (myself included) will tend to write a load of unnecessary CSS, by applying styles to everything, and repeating styles when it's not necessary (when you could just rely on things like inheritance).
It's not "wrong" to do that, but the more cluttered your CSS gets, the harder it gets to maintain and troubleshoot later.
Having a "clean" and efficient stylesheet makes life a lot easier - so that's a good goal.

I always recommend learning the basics of HTML and CSS, as I think it's essential to get the best out of Flare.
For CSS, if you learn anything, learn some of the "selectors" available - e.g. https://www.w3schools.com/cssref/css_selectors.asp
Psider gave a good example of using a CSS selector intelligently, where li p { } allows you to style paragraphs in lists automatically, whereas a learner might create a whole new paragraph class just to use in a list.

I'd also recommend leaning how to use browser tools (press F12) to inspect items in your output (for help only), so you can see what CSS is being applied and troubleshoot any problems. It's a good playground to test out changes to your CSS, and you can see the results instantly, rather than having to rebuild the Flare target each time.
Mishou6779
Propeller Head
Posts: 57
Joined: Mon Jun 01, 2009 9:19 am

Re: Need Help Understanding CSS Styles for Lists

Post by Mishou6779 »

Thanks Dave! I did spend some time on the W3C website recently but not for selectors so thank you for calling that out. I will most definitely take a look at that.

You hit the nail on the head about lots of styles in the CSS and it becoming hard to maintain and troubleshoot, as that is the exact scenario that brought me here yesterday. Luckily, I'm geeky enough to enjoy puttering with this stuff. :D

If you get the chance, I'm wondering if you can highlight what you know/understand about the different medium views in the stylesheet editor. Specifically, I have trouble discerning between my default medium (which for me is online) and my non-print medium. In my mind, those are one and the same, but in Flare they are clearly not. I don't know why or how I can use that to my best advantage. I can see why it's useful to have a print and a non-print going on in my CSS but what's the value-add for default and non-print if the default for a user/writer is online (which to me means non-print)?

Also, do you happen to know why we can't delete styles from the style sheet? I have a whole bunch of styles that I made years ago that really just need to go because they are no longer in use and are clutter when I'm trying to apply styles in help topics. Since there is a report in Flare that highlights the styles that are not in use in the CSS, then why wouldn't we be able to delete them if they are ones we created? (I totally get why we wouldn't want to or be able to delete any of the W3C standards like H1, H2, p tags, etc.)

I also wonder if there is a source control issue at play here since my company uses Subversion and Tortoise SVN, which makes Flare slower. I sometimes have to wait overnight before the changes I have checked in to SVN are actually useable in Flare. I have tried to delete my own self-made styles in my CSS, but they still display in the CSS, and now I'm wondering if I should have checked in the changes in SVN and then waited a day to see if it still showed up in the CSS or if it was actually deleted.

Thank you again for your replies, I really appreciate your kindness!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Need Help Understanding CSS Styles for Lists

Post by NorthEast »

Mediums like "print" and "non-print" in Flare are used to apply CSS to a particular target.

"Default" is the same as no medium, so if you use the same stylesheet for multiple targets, then what's inside "Default" gets applied to all targets. The CSS you put inside the target's medium (print, non-print, or your own custom medium) will be added to and will override what's in "Default" - so just include what's different from "Default" and nothing else.

It's really it's up to you how you want to organise your CSS and use mediums. So if you have loads of CSS for your help target in "Default" that you don't want to apply in "print", then it means you have to specifically override that CSS in "print". Whereas it might be easier to move the help-specific CSS out of "Default" and into "non-print" (or whatever custom media name you want), meaning you don't have to add CSS for the overrides in "print".


That's the short answer - but mediums in Flare are a bit odd.
Mediums in Flare are not like "real" mediums - called "media types" - that you'll see described in CSS training material or specifications.

So, "real" mediums (media types) in CSS are used to choose how you want stuff presented on type of media being used - which might be a screen, printed on paper, a speech synthesiser, a braille reader.
The first important bit to note is that the CSS in the media type is processed by the end device that you're using; for example:
* When viewing content on screen in your browser, your browser will apply any CSS that you've included in @media screen {}.
* When you print out content from your browser, your browser will apply any CSS that you've included in @media print {}.
* To create a responsive design on screen, you can create media queries for the screen at certain resolutions; e.g. @media only screen and (max-width: 1024px)

The second important point is that there's a fixed set of media types in the CSS specs, and you can't just create your own - e.g. if you create a custom media type, a browser (or other device) wouldn't know how to process it.


But Flare uses mediums a bit differently - and has kind of hijacked what a media type means in CSS, because they have a special purpose in Flare.

One key difference is that Flare processes the mediums when it builds your target - so they're not being processed by the end device like the "real" media types.

Flare Mediums can be grouped in two categories - mediums used by targets (print, non-print, any custom medium), and mediums used for responsive design (tablet, mobile).

If you create a medium and then set that medium on a target, when Flare builds the target it basically copies everything inside the media statement and pastes it on the end of your stylesheet.
So if your source stylesheet contains:

Code: Select all

@media my-medium { p {color: red;} }
The same stylesheet in your output will contain this CSS pasted right at the end, outside of any @media statement:

Code: Select all

p {color: red;}
So it works because the CSS is pasted at the end, meaning it will take precedence over CSS that comes earlier in the stylesheet.
That's why I say it's not a "real" medium, because the browser isn't actually looking at what's inside @media my-medium at all, it works because Flare did a copy/paste of that CSS and put it outside the medium.
This is incredibly klunky, but works most of the time for simple(r) CSS, but it's worth knowing for debugging anything that uses Flare mediums.

Things are slightly different for Flare's responsive mediums - desktop, tablet, phone - as these aren't "real" media types either, but are converted to real screen media queries.
So if your source stylesheet contains:

Code: Select all

@media tablet { p {color: red;} }
The output stylesheet contains a screen media query, using the breakpoints set in your target:

Code: Select all

@media only screen and (max-width: 768px) { p {color: red;} }
So this isn't as bad as target mediums, because Flare is replacing the tablet/mobile mediums with a real screen media query - and saves some effort by entering the breakpoints set in your target.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Need Help Understanding CSS Styles for Lists

Post by Psider »

I would also add to Dave's excellent information that the '@media print' media type affects how web pages will print from browsers. So I took to creating a separate "target medium" (call it PDF or Word or Flare_print, or whatever) to use for my print outputs, and kept the "print" medium for the specific things I wanted the browser to do when it was used to print individual pages.
Post Reply