Write the HTML

  1. Write the opening tags for the following elements:
    1. Image
    2. List item
    3. Unordered list
    4. Table row
    5. Table data
    6. Link

Cascading stylesheetS Selectors

Learning Intentions

  • Understand the difference between tag, class and ID selectors

  • Write CSS that makes use of tag, class and ID selectors

Success Criteria

  • I am able to write CSS using class, tag and ID selectors into our website

Tag selection

  • Up until now we have been using tag selection only in our CSS. Since we call <p> in HTML a paragraph tag, we call a p { } in CSS a paragraph tag selector.
    A tag selector links to name of the tag in HTML.

     

Tag selection

p {
  color : green;
  background : red;
}

div {
  color : white;
  background : #ddd;
}

video {
  width : 300px;
  height : 250px;
}

Class selection

  • Class selection allows is to give a group of tags certain properties. With tag selection on a p tag, we are changing every p tag. With class selection we are changing all tags that have that class. The CSS for class selection starts with a dot ( . )

  • In HTML this is written as class="class_name"

  • In CSS this is written as .class_name

     

<p class="main_text">Hello world</p>
<p class="main_text">This is my new website</p>

ID selection

  • ID selection is used to apply a style to one element and one element alone. The CSS for ID selection starts with a hash sign ( # )

  • In HTML this is written as id="id_name"

  • In CSS this is written as #id_name

     

<p id="main_text">Hello world</p>
<p id="more_text">This is my new website</p>

Class selection

.main_text{
  color : red;
  font-size : 18px;
}

.green_back {
  background : green;
}

.column {
  width : 50%
}

ID selection

#main_text{
  color : orange;
  font-size : 18px;
}

#more_text {
  background : green;
}

#footer {
  width : 50%
}

IDs and Classes

Order

  • A class selector is always more powerful than a tag selector.

  • An id selector is always more powerful than a class selector.

     

On your worksheet:

  • On the HTML side, use the yellow pencil to underline any tags with classes and the green pencil to underline any tags with IDs.
  • On the CSS side, use the red pencil to underline tag selection, yellow pencil to underline class selection and the green pencil to underline ID selection.

 

Task

Working on your websites:

Your webpage should include:

  • Two or more pages
  • At least three images
  • Links between each page
  • An unordered and ordered list (e.g. favourite things)
  • A table
  • Your webpages should additionally include a video and an audio element using the video and audio files supplied.

Extension: try and add a video from YouTube using the embed code.

Task

JB
4 Web Design and Development : 3.2 CSS Selectors
© J Balfour
Tools