This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Bob_Boss
almost 11 years

How to change font-size for list elements?

I made my profile such that there is a list (Interests, Jobs, etc.) with sublists for each of these categories. I tried changed the font size using

<li><p style="font-size:30px">Jobs</p></li>

but this has no effect. Could someone explain how to change font-size for list elements?

Answer 51c0c6b1282ae3516a0001c5

1 vote

Permalink

You mean something like this?

<ul>
   <li style="color:red;font-size:30px">Example Category</li>
   <ul>
     <li> text</li>
     <li> text</li>
    </ul>
  </ul>

In this case I would rather do this:

<h2 style="color:red"> Example Category </h2>
 <ul>
   <li>text</li>
   <li> text</li>
   <li> text</li>
 </ul>
Or if `<h2>` is too big, try `<h4>`

Now if you want sublists then this may be an way to go:

<ul>
    <li> My list </li>
    <li> text </li>
    <ul>
      <li>My Syblist</li>
      <li>text </li>
    </ul>
  </ul>
points
Submitted by tony de araujo
almost 11 years

2 comments

Bob_Boss almost 11 years

Thank you very much for your suggestions Tony. I found my error after a very long period of problem solving. The issue was that I wrote the font-size as 30 px rather than 30px. It was completely unobvious to me that spacing mattered in this case as it doesn’t affect the output in any other case that I am aware of.

tony de araujo almost 11 years

glad you’ve solved it. Yes 30px is one word.

Answer 51c3702952f86320e8004c53

1 vote

Permalink

A block-level element is a tag that acts like a rectangle and it takes all space to the right and to the left, in other words, it doesn’t allow anything near it. Example of block-level elements in HTMl are <h1>, <p>, <img>, <div>

A line level element is an element that works side by side with any other element and it doesn’t push them away from it. Examples are <br>, <strong>, <span>.

Of course we can override the characteristics of a block-level element by styling it differently than what their default settings are. For example we can tell an image to allow text on its right side by telling the image to float: left;, or we can tell a <div>to change its default display to display: inline; which it will place all divs horizontally instead of vertically.

points
Submitted by tony de araujo
almost 11 years

Answer 51c0ba70631fe9fba30001b7

0 votes

Permalink

Hi Bob, Are you trying to change your font on a paragraph or on a list item? I see two different tags in your code. If you mean to apply it to the list item, replace the <p by <li and remove the extra tags. Like this:

<li style="font-size:30px">Jobs</li> If you are trying to change the size on all of your list items you could save some work by just applying it once to the <ul instead. Assuming you are doing inline styling and not on a separate style sheet.

points
Submitted by tony de araujo
almost 11 years

6 comments

Bob_Boss almost 11 years

I am trying to make a list of categories that has sublists (essentially a list with nested lists)

  • Example Category

    • ex

    more lists…

I only want the category titles to change color and font-size so I cannot write the style attribute in the

  • tag. The way I coded it works for color but not for font-size. Do you know why this is?
  • tony de araujo almost 11 years

    I’ve seen this problem so many times! you don’t have to style a p in order to get an li styled. just do it directly on the li and remove the p.

    tony de araujo almost 11 years

    Like the example I have in red above. That will do it.

    Bob_Boss almost 11 years

    That would work perfectly fine in most cases but I only wanted to change the category name’s appearance and not the nested lists which is why I included the category title in

    tags to manipulate then exclusively.

    tony de araujo almost 11 years

    Great! Just keep in mind that both li and p are block level elements so you might get more vertical space than you would like.

    Bob_Boss almost 11 years

    What is meant by “block elements”?