how to change font size on html list using css

Question

O. Guys. i got an apex app and i am using Jquery Mobile Theme, but basically i got some list items i need to display on my screen, but my screen is a handheld, which has small screen size, so when i display the list item the size is too big, i will like to reduce font size. in my apex html page i got a "CSS Inline" section and actually got some code like this one below in which i reduced the font size of text and number fields, but i don’t know how to reduce font size of list item, i guess is easy but actually i am new on html and css stuff..

thanks in advance.

input[type="text"] {font-size:8px}
input[type="number"] {font-size:8px}

Answer 1

you can apply the font size for list item as below in css file

ul li{
 font-size:8px;
}

In inline css:

<ul >
<li style="font-size:50px";>item1</li>
</ul>

Answer 2

Give your UL class a name:

<ul class="bigFont">

Add your <li> items

<li>Hello world</li>
<li>Hello world1</li>
</ul>

add style

.bigFont li{
font-size:8px;
}

Answer 3

If is a list, you can do

@media screen and (max-width: 400){
   ul li {
   font-size: .8em;
   }
}

• nested in media query for only apply in small screen
• if you have a link nested in li, select tag a or put class name
• is a good practice use unit relative