Thursday, 6 June 2019
Fonts in CSS
CSS has many font properties that define different aspects of the text.
Font Family: - Use the font-family property to set the font family of a text.
For e.g.
p {
font-family: Arial, Helvetica, sans-serif;
}
Note: - If the font family has more than one word, then it will be written in double quotes ("").
like-
p {
font-family: "Times New Roman", Times, Serif;
}
Font Style: - Use the font-style property to specify the style of a text. It has three values ​​-
* normal: Text will show as usual.
* italic: text will show in italic form.
For example
p {
font-style: italic;
}
* Oblique: The oblique style text looks similar to the italic, though there are differences in both values.
Font Size: Use the font-size property to set the size of a text.
For example
<style>
p {
font-size: 48px;
}
</ style>
<p> This is a test. </ p>
Result: - This is a test
We can also give the value of font-size in cm instead of px.
Note: - 1cm = 16px
For example
p {
font-size: 32px;
}
And
p {
font-size: 2cm;
}
In both of these examples, the font-size will be the same, because 32px is equal to 2cm.
Font Weight: - Use the font-weight property to specify the weight of a font.
For example
<style>
p {
font-weight: normal;
}
</ style>
<p> This is a test </ p>
Some other values ​​of font-weight can also be.
font-weight: bold;
font-weight: lighter;
font weight: bolder;
font-weight: 200;
font-weight: inherit;
Font-Variant:
font-variant property It specifies whether a text will display in small caps font or not.
For example
<style>
p {
font-variant: small caps;
}
</ style>
<p> This is a test </ p>
Output: - THIS IS A TEST
There may be some other values ​​of font-variant.
font-variant: normal;
font-variant: initial;
font-variant: inherit;...
Recommended Articles
- Web Devolpment in Easy Way
Float Property in CSSJun 08, 2019
Float Float property can have one of these five values ​​- left: - If the value is given then the element is left float on the left side. rig...
- Web Devolpment in Easy Way
Positioning in CSSJun 08, 2019
Positioning in CSS When we create a webpage, many elements are shown in the same order in which we have created them and each element has a...
- Web Devolpment in Easy Way
Text in CSSJun 08, 2019
Text in CSS The color property is used to set the color of the text. We can colorize the colors in the following ways. From color name - lik...
- Web Devolpment in Easy Way
Z Index in CSSJun 07, 2019
Z Index in CSS z-index property is used to define HTML elements of the stack order. Stack order means that any element will look above any oth...
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment