CSS: Applying bold and italics

This entry is part 12 of 26 in the series Basic CSS

Using HTML, we can use <b> or <i> to apply bold and italics formatting to font.

In CSS, we use the font-weight attribute.

To apply italic formatting, we use the font-style attribute.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Font</title>
    <style type='text/css'>
        .boldface {
            font-weight: bold;
            font-family: 'Arial';
        }
        .italics {
            font-style: italic;
            font-family: 'Arial';
        }
    </style>
</head>
<body>

<p class='boldface'>Ushuaia is commonly regarded as the southernmost city in the world</p>
<p class='italics'>During the 1880s, many gold prospectors came to Ushuaia following rumors of large gold fields, which proved to be false.</p>

</body>
</html>

CSS: Specifying font size

This entry is part 11 of 26 in the series Basic CSS

There are few ways to specify the font size.  We look at 2 common methods.

We can specify the absolute size using pixels(px).  An average size for text is 10px.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Font-size</title>
    <style type='text/css'>
        p {
            font-size: 16px;
            font-family: 'Arial', 'Helvetica', 'SANS-SERIF';
        }
    </style>
</head>
<body>

<p>Ushuaia is commonly regarded as the southernmost city in the world</p>

</body>
</html>

We can also specify relative sizing as a multiplier of the base font.  For example, 2em is two times the base size or 200%.

It is called an em because it is the width of the capital M character.

The example below uses 1.2em or 120% of the base font.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Font-size</title>
    <style type='text/css'>
        p {
            font-size: 1.2em;
            font-family: 'Arial', 'Helvetica', 'SANS-SERIF';
        }
    </style>
</head>
<body>

<p>Ushuaia is commonly regarded as the southernmost city in the world</p>

</body>
</html>

 

 

CSS: Specifying a font family

This entry is part 10 of 26 in the series Basic CSS

As not everyone has the same fonts installed in their PC, we can specify a font family.

If the computer does not have the first font installed, it checks for the second, and then the third until it finds a match.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Hyperlinks</title>
    <style type='text/css'>
        p {
            font-family: 'Arial', 'Helvetica', 'SANS-SERIF';
        }
    </style>
</head>
<body>

<p>Ushuaia is commonly regarded as the southernmost city in the world</p>

</body>
</html>