CODEWITHSUNDEEP
htmlcssfont-size
user569322
user569322

Reputation:

CSS can't use font-size attribute?

So I have a bit of code that I've been trying to do for an hour. I know I must be making a stupid mistake, but CSS won't change font-size no matter what I put.

  <div class="top">
   <div style="width:460px;float:right;">
    <form action="login.php" method="POST">
      Username:&nbsp;<input class="login" type="text" maxlength="30" />
      &nbsp;Password:&nbsp;<input class="login" type="password" />
      &nbsp;<input class="button" type="submit" value="Login" />
    </form>
  </div>

The error lies with the text- "Username" and "Password." I don't know what to do! Here's my style code:

<style type="text/css">
  div.top{
    margin:-8px;
    height:21px;
    font-size:12pt;
    font-family:sans-serif, verdana;
    background-color:#313131;
    color:#ffffff;
    padding:3px;
    padding-right:8px;
    padding-left:8px;
    border-bottom:2px solid #6b6b6b;
  }
  input.login{
    height:18px;
    font-family:sans-serif, verdana;
    font-size:12pt;
    border-width:0px;
    width:100px;
  }
  input.button{
    height:18px;
    font-size:10pt;
    font-family:sans-serif, verdana;
    border:2px solid #6b6b6b;
    cursor:pointer;
    line-height:18px;
    background-color: #ffffff;
  }
</style>

I've even tried putting the words in <span>'s and setting those inline, and in the style tags, but they don't work! Here's my full document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" >
<style type="text/css">
  div.top{
    margin:-8px;
    height:21px;
    font-size:12pt;
    font-family:sans-serif, verdana;
    background-color:#313131;
    color:#ffffff;
    padding:3px;
    padding-right:8px;
    padding-left:8px;
    border-bottom:2px solid #6b6b6b;
  }
  input.login{
    height:18px;
    font-family:sans-serif, verdana;
    font-size:12pt;
    border-width:0px;
    width:100px;
  }
  input.button{
    height:18px;
    font-size:10pt;
    font-family:sans-serif, verdana;
    border:2px solid #6b6b6b;
    cursor:pointer;
    line-height:18px;
    background-color: #ffffff;
  }
</style>
</head>
 <body>
      <div class="top">
       <div style="width:460px;float:right;">
        <form action="login.php" method="POST">
          Username:&nbsp;<input class="login" type="text" maxlength="30" />
          &nbsp;Password:&nbsp;<input class="login" type="password" />
          &nbsp;<input class="button" type="submit" value="Login" />
        </form>
      </div>
 </body>
</html>

I just guess I needed to change the font-size in the font, as those were what the font was inheriting...? I don't know. Well, at least it works! :P

Upvotes: 1

Views: 18233

Answers (3)

Rob
Rob

Reputation: 5286

I'm not quite sure from your question, but it sounds like you're trying to change the size of "Username" and "Password" text.

Your text belongs to the <form> element, but you are changing the font-size property on your <input> elements. Test whether adding the following rule to your CSS makes a difference:

form { font-size: 20pt; }

Note: I changed 12pt to 20pt because you're already inheriting div.top { font-size: 12pt }.

Edit:

Since that worked, I am editing in the best solution by Paul, which is to wrap your text in <label> elements and use CSS to set the font-size by class:

 label.input {
    color: yellow;
    font-size: 12pt;
    font-weight: bold;
 }

The HTML uses this new style as follows:

<form action="login.php" method="POST">
    <label class="input" for="username">Username:</label>&nbsp;
    <input id="username" class="login" type="text" maxlength="30" />&nbsp;
    <label class="input" for="password">Password:</label>&nbsp;
    <input id="password" class="login" type="password" />&nbsp;
    <input class="button" type="submit" value="Login" />
</form>

Upvotes: 3

Paul Grime
Paul Grime

Reputation: 15104

Ok, what I've done is turned your Username and Password text into <label>s as this is more informative semantically. Using the for attribute, this also has the added benefit that you can click on the <label> text and the associated input field will receive focus. The associated fields must have an id set for this to work that matches the for attribute.

The CSS declares styling for <label> tags with a class of input:

  label.input {
    color: yellow;
    font-size: 12pt;
    font-weight: bold;
  }

And the html uses this new style with the <label> tag:

    <form action="login.php" method="POST">
        <label class="input" for="username">Username:</label>&nbsp;<input id="username" class="login" type="text" maxlength="30" />
        &nbsp;<label class="input" for="password">Password:</label>&nbsp;<input id="password" class="login" type="password" />
      &nbsp;<input class="button" type="submit" value="Login" />
    </form>

Upvotes: 3

Eric
Eric

Reputation: 1019

What browser are you testing this in? This works for me in WebKit and FireFox. I suspect that the issue you're having may be related to the outer container div not being closed.

Upvotes: 4

Related Questions