Exercise

create and link an external style sheet!

if you followed along in section 2.1 and already tried adding some CSS to the web page we made in 1.2, you can skip this part (maybe just peep the bottom part 👀). if you just read through it, let's do it now!

step by step:

in the terminal:

$ # go home
$ cd ~
$ # navigate to your dope site: change into the Coding folder
$ cd Coding
$ # change into the dope site directory
$ cd my-dope-site
$ # make sure you are in the folder with the index.html file
$ ls
$ # create that css file
$ touch styles.css
$ # open the finder here
$ open .

open up both the HTML and the CSS files in VS Code.
first let's link them up in the HTML file.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>A dope site</title>
    <!-- this is a comment -->
    <!-- 👇 add this line -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>My first web page</h1>
    <p>coding rules</p>
  </body>
</html>

save the changes (command + s)
now lets add some CSS

styles.css

body {
  background-color: dimgray;
}
 
h1 {
  color: springgreen;
}
 
p {
  color: pink;
}

save the changes on this file too
now do the same thing as before and drag the HTML file into a browser's address bar and hit enter
if your web page has colors now, sick! it worked!
bonus lets have some fun:
- replace your existing CSS code with the following
- make sure to save the changes to the file and reload the page in the browser 😉

styles.css

body {
  background: linear-gradient(
    270deg,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red
  );
  background-size: 200% 200%;
  animation: moveGradient 15s ease infinite;
}
 
h1 {
  color: springgreen;
  text-shadow: 2px 2px 4px #000000;
  transition: transform 0.3s ease;
  animation: rotate 5s linear infinite;
}
 
p {
  color: lightblue;
  transform: skewX(10deg);
  transition: color 0.5s ease-in-out, font-size 0.3s ease;
  text-shadow: 0 0 8px white;
  animation: pulse 2s infinite;
  text-align: center;
  margin: 0 auto;
  max-width: 80%;
}
 
p:hover {
  transform: skewX(10deg) rotate(180deg);
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
@keyframes pulse {
  0% {
    font-size: 30px;
  }
  50% {
    font-size: 36px;
  }
  100% {
    font-size: 30px;
  }
}
 
@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

sick, if your page looks like a nightmare out of the 90's then we did it!

2.1 Add Some Style 2.3 Syntax