CSS Introduction
CSS Structure
CSS Colors
CSS Background
CSS Width-Height
CSS Float
CSS Display
CSS Borders
CSS Fonts
CSS Text
CSS Align
CSS List
CSS Margin
CSS Padding
CSS Position
CSS Tables
CSS Images
CSS Link
CSS Icons
CSS MAX MIN WIDTH-HEIGHT
CSS Fonts is on of the most important property of CSS. CSS Fonts make font sizing, styling, weight, boldness and more css font styling.
By this tutorials you can learn
1) How to use CSS Fonts?
3) Kinds of Font Family Property?
2) Example of CSS Fonts Style.
CSS Fonts use in a style code area - like: font: 16px font-family; Where font = property name; 16px = font size; font-family= font name;
1) font-family: Sans-Serif- for use control Font Family.
2) font-weight: bold - for use control font style boldness.
3) font-stretch: normal - for use control font style stretch.
4) font-size: 20px - for use control font sizing.
5) font-style: italic or normal or oblique- for use control font italic.
6) font-variant: small-case - for use small case font.
<!DOCTYPE html> <html> <head> <title>Example of CSS Fonts Family.</title> <style type="text/css"> .saf h1{font-family:Agency FB;} </style> </head> <body> <div class="saf"> <h1>Example for font family.</h1> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Example of CSS Fonts Weight.</title> <style type="text/css"> .saf p{font-weight:bold;} .saf1 p{font-weight:normal;} .saf2 p{font-weight:700;} </style> </head> <body> <div class="saf"><p>Example for Font Weight Bold.</p></div> <div class="saf1"><p>Example for Font Weight Normal.</p></div> <div class="saf2"><p>Example for Font Weight 700.</p></div> </body> </html>
Example for Font Weight Bold.
Example for Font Weight Normal.
Example for Font Weight 700.
<!DOCTYPE html> <html> <head> <title>Example of CSS Fonts Size.</title> <style type="text/css"> .saf3 p{font-size:80%;} .saf4 p{font-size:36px;} .saf5 p{font-size:1em;} </style> </head> <body> <div class="saf3">Example for font-size using (%)like 90% of page font.</p></div> <div class="saf4">
Example for font-size using (px)like 24px of page font.</p></div> <div class="saf5">
Example for font-size using (em)like 1em of page font.</p></div> </body> </html>
Example for font-size using (%)like 90% of page font.
Example for font-size using (px)like 24px of page font.
Example for font-size using (em)like 1em of page font.
<!DOCTYPE html> <html> <head> <title>Example of CSS Fonts Style.</title> <style type="text/css"> .saf6 p{font-style:normal;} .saf7 p{font-style:italic;} .saf8 p{font-style:oblique;} </style> </head> <body> <div class="saf6"><p>Example for font-style using font style (normal).</p></div> <div class="saf7"><p>Example for font-style using font style (italic).</p></div> <div class="saf8"><p>Example for font-style using font style (oblique).</p></div> </body> </html>
Example for font-style using font style (normal).
Example for font-style using font style (italic).
Example for font-style using font style (oblique).
<!DOCTYPE html> <html> <head> <title>Example of CSS Fonts Variant.</title> <style type="text/css"> .saf9 p{font-variant:normal;} .saf10 p{font-variant:small-case;} </style> </head> <body> <div class="saf9"><p>Example for font-variant using (normal).</p></div> <div class="saf10"><p>Example for font-variant using (variant).</p></div> </body> </html>
Example for font-variant using (normal).
Example for font-variant using (small-case)