Home/ Questions/Q 6539345
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T10:50:54+00:00

So I have a bit of code that I’ve been trying to do for

  • 0

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! 😛

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0