Tags : HTML/CSS



Cascading

CSS rules applied to parent elements will be inherited by child elements.

Classes and Ids are hooks that let us identify element tags.

Classes

An element can have many classes, classes are NOT unique.

Ids

An element can have only ONE ID, Id's are unique.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Volcanoes in Guatemala</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"
  </head>
  <body>
    <p class="volcano">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 class="volcano other-class" id="acatenango">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.volcano {
  font-weight: italic;
  color: red;
}

.other-class {
  font-size: 48px;
}

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

#acatenango {
  color: blue;
}

Try the following:

  • Add a class to your paragraph element and try to change the color, font-family and size. Remember to use the class to apply the styling.
  • Add ids to your list items (li) and change the font size, color and font-family (each list item has to look different).