CSS: Introduction

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

A cascading style sheet(CSS) is code that specifies formatting based on styles.

You can store CSS code in the <head> section of the webpage to which you want it to apply, or you can store it in a separate file with a .css extension.

The formatting then ‘cascades’ down to the individual instances of each tag.

You can also place a style directly within an individual tag if desired.

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>

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