Intro to HTML & CSS – Part 5

In this tutorial we’ll look at the basics of adding styles to our HTML.

Part 5 – CSS : Cascading Style Sheets

HTML by itself can look boring. CSS allows us to change how to browser displays elements. There is a lot we can do with CSS, but the basics of how its done are all shown here.

The Tutorial of SafeYouTube

https://safeYouTube.net/w/pB94

References

Source Code Files

index.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>NerdArmy Journal</title>

  <style>
    h1 { 
      background-color : red; 
      color : yellow; 
      font-size : 48px;
      font-family : Verdana, sans-serif; 
    }

    h2 {
      border-bottom : 2px solid black;
      color : blue;
      font-size : 22px;
      font-family : Verdana, sans-serif;
      font-weight : bold;
    }
  </style>

</head>

<body>

  <h1>Welcome to the NerdArmy Journal</h1>
  <p>
    This is NerdArmy's daily journal of life during the
    Cornovirus!  To learn more about me... <a href="aboutMe.html">click here</a>!
  </p>

  <h2>April 1, 2020</h2>
  <p>I almost forgot about the greatest band of all-time</p>
  <a href="https://ssrs.bandcamp.com/" target="_blank">
    <img src="images/ssrs.jpg" alt="Stickshift Rocketship" width="200px">
  </a>

  <h2>March 30, 2020</h2>
  <p>
    Here is a list of some of my favorite bands.
    <ul>  
      <li><a href="https://en.wikipedia.org/wiki/Van_Halen" target="_blank">Van Halen</a></li>
      <li><a href="https://blog.beastieboys.com/" target="_blank">Beastie Boys</a></li>
      <li><a href="https://www.ledzeppelin.com/?frontpage=true" target="_blank">Led Zeppelin</a></li>
    </ul>
  </p>

</body>

</html>

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *