CSS: Styling horizontal line with CSS

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

IN HTML5, you are advised to use CSS to style horizontal rule <hr>.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Horizontal Rule</title>
    <style type='text/css'>
        hr {
            color: blue;
            background: blue;
            height: 3px;
            width: 50%;
        }
    </style>
</head>
<body>

<dt>
<h4>The Stone Roses</h4></dt>
<hr align='left'>
<dd>The Stone Roses are an English rock band formed in Manchester in 1983. They were one of the pioneering groups of
    the Madchester movement that was active during the late 1980s and early 1990s.
</dd>
 
</body>
</html>

As there is no CSS left alignment in styling a horizontal line, I have used an inline code align=’left’ to keep the line to the left.

I have also used background: blue so that the horizontal line is a solid blue line.

You can also refer to an earlier example, where we have styled a horizontal line using HTML.

Posted in

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 #.

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: 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: 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>