CSS Intro

CSS or Cascading Style Sheets

is a type of markup language that helps us change the look and formatting of an html document.

How to link the CSS file

<link rel="stylesheet" type="text/css" href="css/styles.css">

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Volcanoes in Guatemala</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>
  <body>
    <p>Here you can find the list of all the <a href="http://en.wikipedia.org/wiki/List_of_volcanoes_in_Guatemala">volcanoes in Guatemala.</a></p>
    <p>Here are some examples</p>
    <ul>
      <li>Acatenango <img src="acatenango.jpg"></li>
      <li>Agua <span style="color:red">(active)</span><img src="agua.jpg"></li>
    </ul>
  </body>
</html>

styles.css

li {
  font-weight: bold;
  color: #0000FF;
}

img {
  height: auto;
  width: 300px;
}

Hints:

If your css is not working, open up your chrome console and see if there are any errors. You might have mispelled something.

Try the following:

Create a folder called css and create new file inside of it with Sublime or Atom and call it styles.css
Link your stylesheet file to index.html
Try to resize the images using css rules.
Change the size, color and weight of the font.
Try to change the font-family in css.