CSS Font Style, CSS Font Weight & CSS Font Variant
CSS Font Style, CSS Font Weight and CSS Font Variant
In this tutorial we will going to learn the CSS Font properties like; (Font Style, Font Weight and Font Variant) with programming examples of all the font style with output of programming.
CSS Font Style
In CSS the Font Style (font-style) property is used to sets how a font should be styled, it’s uses to style the different text in HTML document. To use this property, we need to use valid value and that are given.
Valid Value to use CSS Font Style;
- italic: Select the italicizes font.
- normal: It is used to sets the normal style to the tent.
- oblique: It select the font style classified as oblique.
Now we see the example of CSS Font Style with using the properties given above with programming examples and output.
Example of CSS Font Style;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Font Style</title> <style type="text/css"> #p-1{font-style: italic;} #p-3{font-style: oblique;} #p-2{font-style: normal; p{line-height: 7px; color: blue;} </style> </head> <body> <h5 style="color: darkgreen; text-align: center;">I love Coding "StudyMuch"</h5> <p id="p-1">Learning Web Design is Best.</p> <p id="p-2">Learning Web Design is Best.</p> <p id="p-3">Learning Web Design is Best.</p> </body> </html> |
Output of above programming example;
 |
Above you can see the output of Font Style programming, the style of all line is different because we used font-style property in all line.
CSS Font Weight
In CSS the Font Weight (font-weight) property is used to define and sets the font weight and boldness of a font.
For using this property, we also need to use the valid value and are given below.
Valid value to use CSS Font Weight;
- normal: This value sets a normal weight.
- <number>: It sets the value through the number from 1 to 1000.
- bold: It sets the font boldness, emboldens a font, same as 700.
- bolder: It sets the font weight to be heavier than its parent element’s available font weight.
- lighter: It sets font weight to be lighter than its parent element’s available font weights.
Example of CSS Font Weight;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Font weight</title> <style type="text/css"> #p-1{font-weight:lighter} #p-2{font-weight: bold;} #p-3{font-weight: normal;} #p-4{font-weight: 1000;} #p-5{font-weight: bolder;} p{line-height: 7px; color: darkslateblue;} </style> </head> <body> <h5 style="color: darkgreen; text-align: center;">I love Coding "StudyMuch"</h5> <p id="p-1">Hello! Learning Web Design is Best.</p> <p id="p-2">Hello! Learning Web Design is Best.</p> <p id="p-3">Hello! Learning Web Design is Best.</p> <p id="p-4">Hello! Learning Web Design is Best.</p> <p id="p-5">Hello! Learning Web Design is Best.</p> </body> </html> |
Output of Font Weight programming;
 |
Above you can see the output of Font Weight programming, you see the font weight is different all the line, because we used font-weight property.
CSS Font Variant
The CSS Font Variant (font-variant) property sets whether a text should be display normally or in small-caps. For use this property we need to use the valid value and that are given below.
Valid value to use CSS Font Variant;
- small-caps: Using this value to converted the lowercase letter to uppercase; converted uppercase letters appears in a smaller font size.
- normal: It specific the normal font face.
Example of CSS Font Variant;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Font Variant</title> <style type="text/css"> #p-1{font-variant:small-caps; font-weight: bold;} #p-2{font-weight: normal; font-weight: bold;} p{line-height: 7px; color:blueviolet;} </style> </head> <body> <h5 style="color: darkgreen; text-align: center;">I love Coding "StudyMuch"</h5> <p id="p-1">Hello! Learning Web Design is Best.</p> <p id="p-2">Hello! Learning Web Design is Best.</p> </body> </html> |
Output of above programming Font Variant;
 |
Above you can see the output of Font Variant, after heading the first line is different from the second line, here the all word’s first character is large from other character and all word is capital letter, and the second line is normal because here we use the normal font variant property.
So, guys this tutorial is finished now, in this we learned the CSS Font Style, CSS Font Weight and CSS Font Variant and we also looked the programming example of all the property with output. I hope you all learn this tutorial and understood, if you have any doubt about this tutorial, you can ask in the comment section.
Learn Also-
0 Comments