How to call different CSS?

Hi,

I have a ul bullet point list that has CSS styling. This is for my navigation bar. The problem is the font-size: 12px; is too small and I need to separate the navigation bar CSS from the main content CSS which needs size 12 writing.

How would I do this please?

The code below is for my navigation bar bullet point.

#navi li{
	padding:30px;
	text-align: center;
}

How do I call ‘li’ into my HTML document for that specific part of what I need to make font size 20?

If I put font-size: 20px; into the above code it doesn’t work because the CSS for links active, visited and the hover has font-size: 12px;

Thank you.

You could try something like this:

#navi li{
	padding:30px;
	text-align: center;
}
#navi li a,#navi li a:hover,#navi li a:active,#navi li a:visited{
	font-size:20px;
}

Thank you!

And how would I call this CSS in the HTML? Please may you show the HTML code example?

Hi there,

Something like this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Font size</title>
    <style>
      #navi li{
        display: inline;
        padding:30px;
        text-align: center;
      }
      #navi li a,#navi li a:hover,#navi li a:active,#navi li a:visited{
        font-size:20px;
      }
      #content{
        padding:20px;
        font-size:12px;
      }
    </style>
  </head>
  
  <body>
    <ul id="navi">
      <li><a href="#">Point 1</a></li>
      <li><a href="#">Point 2</a></li>
      <li><a href="#">Point 3</a></li>
    </ul>
    
    <div id="content">
      <p>Some nornal text</p>
    </div>
  </body>
</html>

HTH

Thank you very much Dave! That’s exactly what I was looking for.

In some CSS coding examples I’ve seen online, I’ve noticed they do ‘.stylenamehere’ placing a ‘dot’ . in front of whatever they want to style. How would you call the CSS if the style has a dot in front of it? Thanks!

You use #something in CSS when you have id=“something” in your HTML.
You use .something in CSS when you have class=“something” in your HTML.

So Pullo’s example would look like this with classes instead:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Font size</title>
    <style>
      .navi li{
        display: inline;
        padding:30px;
        text-align: center;
      }
      .navi li a, .navi li a:hover, .navi li a:active, .navi li a:visited{
        font-size:20px;
      }
      .content{
        padding:20px;
        font-size:12px;
      }
    </style>
  </head>
  
  <body>
    <ul class="navi">
      <li><a href="#">Point 1</a></li>
      <li><a href="#">Point 2</a></li>
      <li><a href="#">Point 3</a></li>
    </ul>
    
    <div class="content">
      <p>Some nornal text</p>
    </div>
  </body>
</html>

It doesn’t matter much which you use. An ID is a bit more powerful, but you can only use it once on your page, whereas you can use a class multiple times.

Thank you very much, Ralph! Very clear explanations. :slight_smile:

Glad to hear it. :slight_smile: