OIM3690 - Web Technologies

contain

id and class

Why id and class?

  • Using CSS with a generic tag (like h1 or p) causes all h1-elements or p-elements to be stylized the same way.
    • Example:
    p {color:red;} /* All paragraphs on the page will have a red font.*/
  • What if we want a specific occurrence of an element to be stylized differently than other occurrences of the same type of element?
  • What if we want specific occurrences of different elements to be stylized the same way and different from other occurrences of the same type?

id

  • Almost any HTML element can have an id as one of its attributes.
  • id can be used to select and style that specific element with CSS.
  • An id should be used only once on a page.
  • Think of the id as a unique identifier for an element
  • Examples:
    <p id="author-bio">
<h1 id="intro">

Applying a Style to an id

  • Syntax:
    tag#id-value {style rules}
/* or */
#id-value {style rules} /* recommended */
  • Examples:
    #author-bio {color:blue;}
/* The element with the id="author-bio" will have a blue colored font */

    #intro {font-size:24px;}
/* The element with the id="intro" will have font-size of 24px */
  • The id style adds to and potentially overrides any styles that were previously applied to that element.
    • Because it has higher specificity than a class or element selector.

id Example

<head>
  <style type="text/css">
    p {border: 3px solid gray;}
    #bordered {border: 3px solid red;}
  </style>
 </head>
<body>
  <h1>...</h1>
  <p>…</p>
  <p>…</p>
  <p id="bordered">…</p>  <!--only this paragraph will have a red border-->
  <p>…</p>
  <p>…</p>
</body>

class

  • Almost any element can have an class as one of its attributes.
  • An class can be used for one or more tags on a page
    • different from id – used only once
  • Think of the class as a group of elements with similar styles
  • Examples:
    <p class="bordered">
<h1 class ="bordered">
  • The class style adds to and potentially overrides any styles that were previously applied to that element.
    • id > class > element selector.

Applying a Style to a class

  • Syntax
    tag.class-value {style rules}
/* or */
.class-value {style rules} /* different from the tag#class-value */
  • Example:
    p.me {color:blue;}
/* Every <p> with class="me" will have a blue colored font */
h1.me {font-size:24px;}
/* Every <h1> with the class="me" will have font-size of 24px */
.me {color:blue;}
/* All the elements of any type with class="me" will have a blue colored font */

class Example

<head>
  <style type="text/css">
    p.bordered {border:3px solid red}
    /* all the paragraphs with class="bordered" will each have a border */
  </style>
 </head>
<body>
  <h1 class="bordered">...</h1>
  <p>…</p>
  <p class="bordered">…</p>
  <p class="bordered">…</p> 
  <p>…</p>
  <p class="bordered">…</p>
</body>

Exercise: ex06.html

  • Make a copy of ex04.html, save it as ex06.html.
  • Use id and class to style the page further.
    • Create a red-colored, dotted border, 3px thick, around just the last quote - "Continuous effort - not strength or intelligence - is the key to unlocking our potential."
    • Make the color of the heading "Quote Three from Winston Churchill" green.
    • The following elements must be in blue font, italicized and underlined.
      • the first quote (the entire quote),
      • the title of the second quote "Quote Two from Winston Churchill",
      • the entire paragraph about the tiger.
  • Save it and commit/push to GitHub.

div and span

div: the Content Division element

  • div is used to style whole sections of a page in a particular way.
    • e.g., the background color of the first two paragraphs must be yellow
  • Syntax:
    <body>
  <div id="one">
    <!-- Some HTML tags -->
  </div>
  <div id ="two">
    <!-- Some HTML tags -->
  </div>
  ...
</body>
  • We can use id or class on <div> and style it using CSS.
  • See <div> example

span

  • The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
    • e.g. making certain words in a paragraph appear in a larger font size.
  • We can use id or class on <span> to style it using CSS.
  • See <span> example

Exercise: ex06.html (cont.)

  • Set the background color of the section with Quote One (the heading and the quote) to yellow.
  • Set the background color of the section with Quote Two (the heading and the quote) to green.
  • Set the background color of the section with Quote Three (the heading, the sub-heading and the quote) to lime.
  • Increase the font-size of the letter "W" and "C" in each occurrence of "Winston Churchill" to 1.5em.
  • Save it and view in web browser(s)
  • Update sitemap.html and commit/push to GitHub.

Questions?

global styles