Lesson 1.
FONT
For study we're going to use a small text.
Font is a shortcut property. Through it we can set several attributes.
Font's possible values are:
font: cursive;
font: fantasy;
font: monospace;
font: sans-serif;
font: serif;
font: font_family;
font: large;
font: medium;
font: small;
font: larger;
font: smaller;
font: ;/*number*/
font: %;
font: italic;
font: normal;
font: oblique;
font: ; /*100, 200, 300 ...900*/
font: bold;
font: bolder;
font: lighter;
font: caption;
font: icon;
font: menu;
font: message-box;
font: small-caption;
font: status-bar;
font: inherit;
It's possible to apply several combinations of properties:
font: 20px italic sans-serif;
FONT-FAMILY
Through font-family property we can define the font family for an element.
font-family: cursive;
font-family: fantasy;
font-family: monospace;
font-family: sans-serif;
font-family: serif;
font-family: inherit;
Exercise 1!
For example:
font-family: serif;
Please, write an example on blackboard and then hit the Preview button.
Lesson 2.
FONT-SIZE
Through font-size property we can set the size of the font of a text or an element.
The possible values are:
font-size: large;
font-size: medium;
font-size: small;
font-size: x-large;
font-size: x-small;
font-size: xx-large;
font-size: xx-small;
font-size: larger;
font-size: smaller;
font-size: ;/*number*/
font-size: %;
font-size: inherit;
font-size-adjust
font-size-adjust: ; /*number*/
font-size-adjust: none;
font-size-adjust: inherit;
Exercise 2!
Try one of this examples!
font-size: small;
font-size: x-large;
font-size: x-small;
font-size: xx-large;
font-size: xx-small;
font-size: larger;
font-size: 205%;
Please, write an example on blackboard and then hit the Preview button.
Lesson 3.
FONT-STYLE
Through font-style property we can set the style of the font of a text or an element.
The possible values are:
font-style: italic;
font-style: normal;
font-style: oblique;
font-style: inherit;
Exercise 3!
Try one of this examples!
font-style: italic;
font-style: normal;
font-style: oblique;
Please, write an example on blackboard and then hit the Preview button.
Lesson 4.
FONT-VARIANT
Through font-variant property we can set the variant for font of a text or an element.
The possible values are:
font-variant: normal;
font-variant: small-caps;
font-variant: inherit;
Exercise 4!
Try this examples!font-variant: normal;
font-variant: small-caps;
Please, write an example on blackboard and then hit the Preview button.
Lesson 5.
FONT-WEIGHT
Through font-weight property we can set the weight of the font of an element.
The possible values are:
font-weight: ; /*100,200,300---900*/
font-weight: bold;
font-weight: normal;
font-weight: bolder;
font-weight: lighter;
font-weight: inherit;
Exercise 5!
Try this examples!
font-weight: 300;
font-weight: bold;
Please, write an example on blackboard and then hit the Preview button.
No comments:
Post a Comment