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: 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: Strikethrough and underlining

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

To apply strikethrough and underlining, we can use text-decoration attribute.

<!DOCTYPE html>
<html>
<head lang='en'>       
    <meta charset='UTF-8'>
    <title>Codecrawl.com</title>
</head>
<body>

<p style='text-decoration: underline'>Ushuaia</p>
<p style='text-decoration: line-through'>Cape Town</p>

</body>
</html>

CSS: Inline spans

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

Consider the paragraph below:

<p>Ushuaia is a GREAT holiday getaway</p>

If we want to make only the word GREAT bold, we would need a container for the word.  The container that we can use is <span>.

A <span> is simply a shell into which we can place any attributes we need.

For example, to put a style on the word GREAT, we can do the following.

<!DOCTYPE html>
<html>
<head lang='en'>       
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Span</title>
</head>
<body>

<p>Ushuaia is a <span style='font-weight: bold'>GREAT</span> holiday getaway</p>

</body>
</html>

CSS: Adjusting spacing between letters and words

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

Using CSS, we can fine-tune the spacing between letters and words to subtly change the appearance of a paragraph.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Span</title>
    <style>
        #wide {
            word-spacing: 5px;
        }
    </style>
</head>
<body>

<p>Ushuaia is a <span style='letter-spacing: 5px'>GREAT</span> holiday getaway</p>

<p id='wide'>It is the southenmost city in the world</p>

</body>
</html>