Tuesday, 26 November 2013

CSS Font Weight

In the earlier post, we looked at the font-style attribute.
It gives some styles like italic,normal,oblique. But what about the bold.

The bold style is defined under the font-weight attribute.

The font weight attribute can be defined in many different ways, let us have a look at some basic ways like normal,bold,bolder,lighter.


1:  <?xml version = "1.0" encoding="utf-8"?>   
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
3:  <html xmlns = "http://www.w3.org/1999/xhtml">   
4:  <head>  
5:  <title>CSS Styling</title>  
6:  </head>  
7:  <body>  
8:  <p class="red">  
9:  Red  
10:  </p>  
11:  <p class="blue">  
12:  Blue  
13:  </p>  
14:  <p class="green">  
15:  Green  
16:  </p>  
17:  <style>  
18:  p.red  
19:  {  
20:  color:red;  
21:  font-size:20px;  
22:  font-weight:normal;  
23:  }  
24:  p.blue  
25:  {  
26:  color:blue;  
27:  font-size:40px;  
28:  font-weight:bold;  
29:  }  
30:  p.green  
31:  {  
32:  color:green;  
33:  font-size:60px;  
34:  font-weight:bolder;  
35:  }  
36:  </body>  
37:  </html>  
Post a Comment