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>

CSS: Additional Hyperlink styles

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

There are 3 additional hyperlink styles that we can use.

  • focus: This is used by links that are selected by using the keyboard.
  • hover:  This is used to change the appearance of a link the the mouse is positioned over it.
  • active: This is used for a link when it is clicked. This is momentarily and immediately after being clicked, the link changes to the visited state.
<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Hyperlinks</title>
    <style type='text/css'>
        a:link {
            color: navy
        }

        a:visited {
            color: magenta
        }

        a:hover {
            color: lime
        }

        a:active {
            color: red
        }
    </style>
</head>
<body>

<a href='//nytimes.com'>Click Me</a>

</body>
</html>

CSS: Applying styles to hyperlinks

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

By default in most browsers, text hyperlinks display as underlined blue text and visited hyberlinks display as underlined purple text.

You can try out the link here.  Notice that it becomes purple after you have clicked on the link.

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

<a href='//nytimes.com'>Click Me</a>

</body>
</html>

If we apply a class to all hyperlinks, it will not provide a way to distinguish between the visited links and the unvisited links.

To differentiate between visited and unvisited links, we can use pseudo-classes.

We do not need to apply anything to the individual hyperlink tags within the <body> section to use pseudo-classes.  Simply create the style rule in the <style> section for the the pseudo-classes and the browser will apply that rule throughout the document.

For example, to make all visited links magenta and all unvisited links navy blue:

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Hyperlinks</title>
    <style type='text/css'>
        a:link {
            color: navy
        }

        a:visited {
            color: magenta
        }
    </style>
</head>
<body>

<a href='//nytimes.com'>Click Me</a>

</body>
</html>

CSS: Classes and IDs for applying styles

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

Classes and IDs mark certain elements so that you can refer to them in your style sheet.

A class can be applied to multiple selections, whereas an ID uniquely identifies a specific selection.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Classes and IDs</title>
    <style type='text/css'>
        .rock {
            color: red;
        }

        #pop {
            color: navy;
        }
    </style>
</head>
<body>

<h3 class='rock'>The Stone Roses</h3>
<h4 id='pop'>Erasure</h4>

<p class='rock'>Oasis</p>
 
</body>
</html>
Notice we have applied a rock class to both <h3> and <p> tags.

To define a class, we use a . and to define an id, we use #.