Use different font for label and other form controls : label « Form « HTML / CSS






Use different font for label and other form controls

   


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Forms</title>
  <style type="text/css" media="screen">
  
  div {
    margin-bottom: 30px;
  }  
  
  #divID #thisform {
      font-family: Georgia, serif;
      font-size: 12px;
      color: #999;
    }
  
  #divID #thisform label {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #660000;
    }
  </style>
</head>
<body>

<div id="divID">
<form action="" id="thisform" method="post">
  <p><label for="name">Name:</label><br />
  <input type="text" id="name" name="name" /></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" /></p>
  <p><input type="checkbox" id="remember" name="remember" /> 
  <label for="remember">Remember this info?</label></p>
  <p><input type="submit" value="submit" /></p>
</form>
</div>

</body>
</html>

   
    
  








Related examples in the same category

1.'label' creates a label and associates it with another element
2.label:after
3.Using the label for element
4.Set style for form label
5.Set font for label
6.Set margin-top and display style for label
7.Set label control for right text alignment, padding right 20px
8.Set label after style
9.Set color, background color and font for a label control
10.Set Label padding and text transformation
11.Set label font family and font size
12.Inline label
13.Label style text-align: right
14.label background-color: pink;
15.label color: black;
16.label font-weight: bold;
17.label padding: 4px;
18.label text-transform: uppercase;
19.label font-family: Verdana, Arial, Helvetica, sans-serif;
20.label font-size: xx-small;
21.Positioning labels
22.Label above
23.label display: block;
24.label font-weight:bold;
25.label margin:5px 0;
26.label font-weight:bold;
27.label font-family: "Trebuchet MS", Verdana, Halvetica, Arial;
28.label font-size: 12px;
29.label color: #040507;
30.label display: block;
31.label text-align: right;
32.label width: 100px;
33.Adding underline for labels
34.Place label on the top of a field
35.label text-align: left; text-align: center;
36.Labelled fields
37.Using the label element
38.Implicit labels
39.label float:left; width:100px;
40.Fieldsets and labels
41.Aligning labels with List
42.Block-level labels
43.Top-positioned Text Labels
44.Left-aligned Text Labels