CSS Tutorials

adplus-dvertising
Fonts In CSS
Previous Home Next

CSS gives you great control over the way your text is displayed. You can change the text size, color, style, and more. You probably already knew how to make text bold or underlined, but did you know you could resize your font using percentages.

css font color

Although the color of the text seems like it would be part of CSS Font, it actually is a standalone attribute in CSS. This could be for many reasons, including the fact that it will be used a great deal, so why make the coder type out "font-color", when they could just type out "color" instead

Simple Example
<html>
<head>
<title>Fonts color</title>
<body>
<h1><p style="color:Green;">It simply show the font color</p></h1>
<h2><p style="color:red;">It simply show the font color</p></h2>
<h3><p style="color:black;">It simply show the font color</p></h3>
<h4><p style="color:yellow;">It simply show the font color</p></h4>
<h5><p style="color:orange;">It simply show the font color</p></h5>
</body>
</head>
</html>

Output:

CSS font family

Font families can be divided into two groups:

  1. serif: A serif font does include these small lines.
  2. sans-serif: A sans-serif font does not include the small lines at the end of characters.
  3. Code:

    <html>
    <head>
    <style>
    p.serif{
    font-family:"Times New Roman", Times, serif;
    }
    p.sans-serif{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:20;
    }
    </style>
    </head>
    <body>
    <h2>CSS font family</h2>
    <p class="serif">It is used to show the Times New Roman font. </p>
    <p class="sans-serif">It is used to show the Arial font. </p>
    </body>
    </html>
    

    Output:

    CSS font size

    You can manipulate the size of your fonts by using values, percentages, or key terms. Using values are useful if you do not want the user to be able to increase the size of the font because your site will look incorrect if they did so.

    Code:

    <html>
    <head>
    <style>
    p {
    font-size:smaller;
    }
    h1 {
    font-size:18px;
    }
    h3 { 
    font-size:80%;
    }
    h4 {
    font-size:inherit;
    } 
    </style>
    </head>
    <body>
    <h2>CSS font size</h2>
    <p>It is used to show the font size 1</p> 
    <h1>It is used to show the font size 2</h1>
    <h3>It is used to show the font size 3</h3>
    <h4>It is used to show the font size 4</h4>
    </body>
    </html>
    

    Output:

    CSS font style

    CSS Font-Style is where you define if your font will be italic or not. Possible key terms are the following: italic, oblique, and normal.

    Code:

    <html>
    <head>
    <title>Font style</title>
    <body>
    <style>
    p {
     font-weight:bold;
    font-size:25px;
    }
    r {
    font-style:italic;
    font-size:25;
    }
    </style>
    <p>It used to show the style of font</p>
    <r>It used to show the style of font</r>
    </body>
    </head>
    </html>
    

    Output:

    CSS font weight

    If you want to control the weight of your font (its thickness), using font weight is the best way to go about it. We suggest that you only use font-weight in multiples of 100 (e.g. 200, 300, etc) because any less and you probably will not see any difference.

    Code:

    <html>
    <head>
    <style>
    h1 {
    font-weight:100
    }
    h2 {
    font-weight:lighter
    }
    </style>
    </head>
    <body>
    <h2>CSS font weight</h2>
    <h1>It is used to show font weight </h1>
    <h2>It is used to show font weight </h2>
    </body>
    </html>
    

    Output:

    Previous Home Next