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: Single and multiple rules

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

To apply a multiple rules to a single tag, or a single rule on multiple tags we can use the following.

  <style type='text/css'>
      //multiple rule on a single tag
        h1 {
            color: red;
            font-size: 14px;
        }
      //single rule on multiple tags
        h1, h2, h3, h4, h5, h6 {
            color: red;
        }
  </style>

 

CSS: Multiple rules within one style section

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

We can define multiple rules for multiple tags.

Using list style types defined in this post, we can expand this to also specify ordered lists.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Lists</title>
    <style type='text/css'>
        ol {
            list-style-type: lower-alpha;
        }

        ul {
            list-style-type: square;
        }</style>
</head>
<body>
<h4>British Pop</h4>
<ol>     
    <li>Cold Play</li>
        
    <li>Depeche Mode</li>
        
    <li>Adele</li>
</ol>
 
<h4>American Rock</h4>
<ul>
    <li>Linkin Park</li>
        
    <li>Nirvana</li>
        
    <li>Metalica</li>
</ul>
 
</body>
</html>

CSS: Applying global style rule to all similar

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

Say we have a few unordered lists.  Instead of putting the style in each <ul> tag, we can declare a global style rule for all <ul> tags.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>

    <style type='text/css'>
        ul {
            list-style-type: square;
        }
    </style>

</head>
<body>

<h4>American Rock</h4>
<ul>
    <li>Linkin Park</li>
    <li>Nirvana</li>
    <li>Metalica</li>
</ul>

</body>
</html>

CSS: Applying style to individual tag

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

In an earlier HTML example on lists, we have used the style = attribute for ordered and unordered lists.

For example, we have used a square bullet character in an unordered list.

<ul style='list-style-type: square'>
<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
</head>
<body>

<h4>American Rock</h4>
<ul style='list-style-type: square'>
    <li>Linkin Park</li>
    <li>Nirvana</li>
    <li>Metalica</li>
</ul>

</body>
</html>