CODEWITHSUNDEEP
htmlcss
Siberia
Siberia

Reputation: 137

how to change font size on html list using css

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}

Upvotes: 6

Views: 94160

Answers (3)

yeion7
yeion7

Reputation: 31

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

Upvotes: 3

Damodar Dahal
Damodar Dahal

Reputation: 569

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;
}

Upvotes: 10

Haji
Haji

Reputation: 2077

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>

Upvotes: 14

Related Questions