Intro to HTML & CSS – Part 7

In this tutorial we will separate our HTML code from our CSS code by keeping them in their own files!

Part 7 – Separate HTML & CSS

Keeping your code tidy and easy to read makes you a better programmer. Code that is easy to read is easier to maintain and easier to find bugs in. Keeping our CSS in it’s own file helps to de-clutter our HTML page.

The Tutorial on SafeYouTube

https://safeYouTube.net/w/7Pb5

References

Source Code Files

index.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>NerdArmy Journal</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</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">
  </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>

  <br><br><br><br><br>

</body>

</html>



style.css

body {
  background-color : black;
}

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

h2 {
  border-bottom : 2px solid cyan;
  color : cyan;
  font-size : 22px;
  font-family : Verdana, sans-serif;
  font-weight : bold;
}

p, ul {
  color : white;
  font-family : Verdana, sans-serif;
}

a {
  color : yellow;
  text-decoration : none;
}

a:hover {
  color : cyan;
  font-weight : bold;
}

ul {
  list-style-type : square;
}

img {
  width : 200px;
  border : 10px solid red;
  border-radius : 40px;
  padding : 20px;
}

aboutMe.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>All About Me</title>
</head>

<body>
  <h1>This Page is about NerdArmy</h1>
  <img src="images/goofyBrandl.JPG" alt="Brandl" width="200px">
</body>

</html>

Leave a Reply

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