www.webdeveloper.com
Results 1 to 11 of 11

Thread: Font size won't change in CSS

Hybrid View

  1. #1
    Join Date
    Jan 2013
    Posts
    17

    Font size won't change in CSS

    OK so the font-weight is changing, text align is working, font family is working but the font size won't change at ALL! I want to increase it but it won't change size.

    Here is my code.

    HTML code:
    HTML Code:
    <div id="topbanner"><h1>Test Test Test</h1></div>
    CSS code:
    Code:
    #topbanner {
    	background-color:#0099ff;
    	width:100%;
    	height:500px;
    	margin-top:10px;
    	}
    	
    #topbanner h1 {
    	font-weight: bold;
    	text-align:center;
    	color:#FFF;
    	font-family:"Times New Roman", Times, serif;
    	font-size:40px;}

  2. #2
    Join Date
    Jul 2013
    Posts
    11
    code is working for me...

    do you have a lot more style definitions? I just could imagine that there is somewhere an other definition for h1 which overrides your definition.

  3. #3
    Join Date
    Jan 2013
    Posts
    17
    Quote Originally Posted by schaet View Post
    code is working for me...

    do you have a lot more style definitions? I just could imagine that there is somewhere an other definition for h1 which overrides your definition.
    I do actually. The CSS document is very large.

    How could I fix a style overriding another?

  4. #4
    Join Date
    Jul 2013
    Posts
    11
    hm... you need to declare it better^^

    need to see the other h1 definitions to tell you what to do

  5. #5
    Join Date
    Jan 2013
    Posts
    17
    Quote Originally Posted by schaet View Post
    hm... you need to declare it better^^

    need to see the other h1 definitions to tell you what to do
    OK I'll fetch them

  6. #6
    Join Date
    Jan 2013
    Posts
    17
    Code:
    /* Main styles */
    
    body { background:#f5f5f5 url(../images/bg-body.png);font-family:Open Sans, Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;color:#666666; }
    a { font-family:Open Sans, Arial, Helvetica, sans-serif;text-decoration:none;line-height:18px;color:#333333;transition: color 0.2s;-webkit-transition: color 0.2s;-moz-transition: color 0.2s; }
    a:hover { color:#ef4425; }
    .body-full-width { width:100%;background:#fff; }
    .body { width:1040px;background:#fff;margin:0px auto;-moz-box-shadow: 0 -2px 15px 1px rgba(0, 0, 0, 0.10);-webkit-box-shadow: 0 -2px 15px 1px rgba(0, 0, 0, 0.10);box-shadow: 0 -2px 15px 1px rgba(0, 0, 0, 0.10); }
    h1, h2, h3, h4, h5, h6, .custom-font { font-family:Open Sans;font-size:18px;color:#333333;font-weight:600; }

  7. #7
    Join Date
    Jul 2013
    Posts
    11
    I dont see the troublemaker in here. Do you use an inspection tool, like firebug?

    Generally good to know are css override priorities.

    1. Inline Definitions (<syle="")
    2. <style></style>
    3. external file

    also h1 is more general then class
    class is more general then id...

    So in your example the definitions are more important than the general h1 declerations.

    also for the next step you could try to give the h1 a class like

    <div id="topbanner"><h1 class="title_topbanner">Test Test Test</h1></div>

    and

    #topbanner .title_topbanner {}

  8. #8
    Join Date
    Jan 2013
    Posts
    17
    Quote Originally Posted by schaet View Post
    I dont see the troublemaker in here. Do you use an inspection tool, like firebug?

    Generally good to know are css override priorities.

    1. Inline Definitions (<syle="")
    2. <style></style>
    3. external file

    also h1 is more general then class
    class is more general then id...

    So in your example the definitions are more important than the general h1 declerations.

    also for the next step you could try to give the h1 a class like

    <div id="topbanner"><h1 class="title_topbanner">Test Test Test</h1></div>

    and

    #topbanner .title_topbanner {}
    Sorry the CSS document is just so big sometimes it is hard find things.

    Would this have anything to do with it?
    Code:
    /* Top -> Logo */
    
    div.top h1 { padding:10px 10px; }
    
    /* Top -> Top Right */
    
    div.top div.top-right { text-align:right;padding:15px 10px 15px 0px; }
    
    /* Top -> Logo mobile */
    
    div.top div.top-right h1 { display:none; }
    I've also tried making the h1 a class but still no luck

  9. #9
    Join Date
    Jul 2013
    Posts
    11
    nope none of them

    you could fix it with inline style like

    <div id="topbanner"><h1 style="font-size:40px">Test Test Test</h1></div>

    but of course thats no good coding style ;-)

    wich internet browser du you use? because it would be so easy to find with an inspection tool like firebug or if you use safari, there is an tool already integrated

  10. #10
    Join Date
    Jan 2013
    Posts
    17
    Quote Originally Posted by schaet View Post
    nope none of them

    you could fix it with inline style like

    <div id="topbanner"><h1 style="font-size:40px">Test Test Test</h1></div>

    but of course thats no good coding style ;-)

    wich internet browser du you use? because it would be so easy to find with an inspection tool like firebug or if you use safari, there is an tool already integrated
    For the meantime I've used a paragraph tag and it works nicely but it's only a placeholder for now.

    I use Google Chrome.

  11. #11
    Join Date
    Aug 2006
    Posts
    1,917
    In Chrome, go to the menu on the top right, then tools->developer tools. Go do the line of the source code where your h1 is, and it will show you the place in the css where it is defined.

    Dave

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles