SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast ParfaitMacaron's Avatar
    Join Date
    Mar 2013
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code:
    #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.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You could try something like this:
    Code:
    #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;
    }

  3. #3
    SitePoint Enthusiast ParfaitMacaron's Avatar
    Join Date
    Mar 2013
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!

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

    Quote Originally Posted by zot View Post
    You could try something like this:
    Code:
    #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;
    }

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Something like this:

    HTML Code:
    <!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

  5. #5
    SitePoint Enthusiast ParfaitMacaron's Avatar
    Join Date
    Mar 2013
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Quote Originally Posted by Pullo View Post
    Hi there,

    Something like this:

    HTML Code:
    <!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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ParfaitMacaron View Post
    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:

    Code:
    <!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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast ParfaitMacaron's Avatar
    Join Date
    Mar 2013
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, Ralph! Very clear explanations.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ParfaitMacaron View Post
    Very clear explanations.
    Glad to hear it.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •