We are going to see one of the style sheet properties called "Font property".Font property in CSS consists of six different font properties. It is possible to combine all property and make one declaration by using the "font" keyword. So, guys, let's see all font properties in detail with their example.
Font property in CSS consists of six different properties, it allows us to control the appearance of a text in our document. CSS font properties define the font family, boldness, size, and the style of a text. Some of the font properties are as follows:
1.font-family
2.font-size
3.font-weight
4.font-style
5.font-stretch
6.font variant
p{font-family:"times new roman";Times;serif;}
Example:
p.normal{font-style:normal;}
p.italic{font-style:italic;}
p.oblique{font-style:oblique;}
H3{font-size:xx-large;}
H6{font-size:smaller;}
P{font-size: 12px;}
B{font-size:10%;}
p{font-weight:normal;}
h2{font-weight:bold;}
h6{font-weight:100;}
Example:
p.small{font-variant:small-caps}
All this font properties can declared in one declaration by using "font property" .This properties that can be set,are in order of-Font-style,font-variant,font-weight,font-size/line-height font-family".If one of the other values are missing,the default value will be inserted 0.
Example:
p.first{font: 15px arial,sans-serif}
p.second{font:italic bold 12px/30px georgia,serif;}
Font properties in CSS:
1.font-family
2.font-size
3.font-weight
4.font-style
5.font-stretch
6.font variant
1.Font family:
The font-family property is used to specify a list of font names. The browser uses the first font in the list that is supported. In CSS, there two types of font family name:Generic family |
Font family |
Serif
|
Times new roman
Georgia
|
Sans-serif
|
Arial
verdana
|
Monospace
|
Courier
new Lucida console
|
Example:
2.Font style:
The font-style property is mostly used to specify italic text. This property has three values:- Normal: The text is shown normally
- Italic: The text is shown in italics
- Oblique: The text is "leaning" which is very similar to italic
Example:
p.normal{font-style:normal;}
p.italic{font-style:italic;}
p.oblique{font-style:oblique;}
3.Font size:
The font-size property enables us to specify a size for the font. We can specify a value for this property in several ways like:- Absolute size - The value for absolute size is xx-small,x-small,small,medium,large,x-large,xx-large.
- Relative size - Smaller, larger.
- Length - Length can be express in form of px,em,pt,in,cm,pc,mm.
- Percentage - It is calculated as a proportion of elements that contain the text like 20%,10%.
Example:
H3{font-size:xx-large;}
H6{font-size:smaller;}
P{font-size: 12px;}
B{font-size:10%;}
4.Font weight:
The font weight property sets how thick or thin characters in text should be displayed.The possible value for font weight are normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900.
Example:
p{font-weight:normal;}
h2{font-weight:bold;}
h6{font-weight:100;}
5.Font stretch:
The font-stretch property allows us to make text wider or narrower that means the width of the actual letters in a font. It can take values like normal, wider, narrower, and expanded6.Font variant:
The font-variant property specifies whether or not a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letter appears in smaller font size than the original uppercase letters in the text.
There are two possible values for the font-variant property like normal and small-caps.
Example:
p.small{font-variant:small-caps}
All this font properties can declared in one declaration by using "font property" .This properties that can be set,are in order of-Font-style,font-variant,font-weight,font-size/line-height font-family".If one of the other values are missing,the default value will be inserted 0.
Example:
p.first{font: 15px arial,sans-serif}
p.second{font:italic bold 12px/30px georgia,serif;}
Example of font property in CSS
<html>
<head>
<title>font properties</title>
<style type="text/css">
p.one{font-family:'lucida calligraphy';font-weight:bold;font-size: 40pt;color:purple;}
h2.two{font-family:'cambria';color:blue;font-style:italic;}
p.three{font:small-caps italic bold 50pt 'times new roman'}
</style>
</head>
<body>
<p class="one">welcome to my blog</p>
<h2 class="two">welcome to my blog</h2>
<p class="three">welcome to my blog</p>
</body>
</html>
h2.two{font-family:'cambria';color:blue;font-style:italic;}
p.three{font:small-caps italic bold 50pt 'times new roman'}
</style>
</head>
<body>
<p class="one">welcome to my blog</p>
<h2 class="two">welcome to my blog</h2>
<p class="three">welcome to my blog</p>
</body>
</html>
No comments:
Post a Comment