• We just launched and are currently in beta. Join us as we build and grow the community.

Font Properties (and Color)

Dad

Marketplace Pro
D
D Rep
0
0
0
Rep
0
D Vouches
0
0
0
Vouches
0
Posts
65
Likes
137
Bits
0
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 300 XP
Introduction:
This is the fifth part in my CSS Styling tutorials, in which I will be covering font properties.

Weight:
The first of the font properties I will be covering is the weight property, this lets you set the weight of the font (how bold it is). You can either use the values 'normal', 'bold', 'light', etc. or a number (around 100-600)...

  1. font-weight

    :

    200

    ;

    // or font-weight

    :

    normal

    ;

Family:
The font family property lets you set the actual font of the text, you can choose multiple fonts within the family in-case the previous fonts are unavailable...

  1. font-family

    :

    "Times New Roman"

    ,

    Georgia,

    Serif;

Style:
Style sets the font to be; italic, oblique or normal...

  1. font-style

    :

    italic

    ;

Size:
As you can probably guess, this will set the size of the font. The size can be set in px, percent or em...

  1. font-size

    :

    18px

    ;

Variant:
This will change the text itself to display as either; typed in the document (normal), the same as it's container (inherit), or all small caps (small-caps)...

  1. font-variant

    :

    small-caps

    ;

Color:
The colour variable is not a 'font' property, but it does only affect the colour of the font's text, so here it is...

  1. color

    :

    #ffffff

    ;

    //Hex value

Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

  1. class=

    'myClass'

... to the attributes of that element if you chose a class, or...

  1. id=

    'myID'

if you chose an id.

Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

  1. .myClass

    {
  2. //Properties go here
  3. }

if you chose a class, or...

  1. #myID

    {
  2. //Properties go here
  3. }

(You can remove the line beginning with // if you wish).

Here's an example...

  1. <html>
  2. <head>
  3. <style>
  4. .blue

    {
  5. background-color

    :

    #000

    ;
  6. color

    :

    blue

    ;
  7. width

    :

    300px

    ;
  8. height

    :

    100px

    ;
  9. font-family

    :

    Arial;
  10. font-weight

    :

    bold

    ;

    //or a custom value

    (

    600

    ,

    for example)
  11. //Blue text

    ,

    bold

    ,

    Arial font
  12. }

  14. .hexwhite

    {
  15. background-color

    :

    #000

    ;
  16. color

    :

    #fff

    ;
  17. width

    :

    300px

    ;
  18. height

    :

    100px

    ;
  19. font-family

    :

    Times New Roman;
  20. font-style

    :

    italic

    ;
  21. //White through hex,

    Italics,

    Times New Roman font.
  22. }

  24. .hexblack

    {
  25. background-color

    :

    #000

    ;
  26. color

    :

    #000

    ;
  27. width

    :

    300px

    ;
  28. height

    :

    100px

    ;
  29. font-family

    :

    Verdana;
  30. font-size

    :

    20px

    ;
  31. font-variant

    :

    small-caps

    ;
  32. //Black through hex,

    20px

    font size,

    all small

    caps,

    Verdana font
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class=

    'blue'

    >

    Blue Text</div>
  38. <div class=

    'hexwhite'

    >

    Hex White</div>
  39. <div class=

    'hexblack'

    >

    Hex Black</div>
  40. </body>
  41. </html>

Book traversal links for Font Properties (and Color)

  • ‹ Float and Clear
  • Up
  • IDs and Classes ›

 
You must log in or register to reply here.

440,010

316,559

316,568

S sanlaxi
Top