This forum is now read-only. Please use our new forums! Go to forums
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
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>
Answer 51c3702952f86320e8004c53
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 div
s horizontally instead of vertically.
Answer 51c0ba70631fe9fba30001b7
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.
6 comments
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
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.
Like the example I have in red above. That will do it.
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.
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.
What is meant by “block elements”?
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
2 comments
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.
glad you’ve solved it. Yes 30px is one word.