OIM3690 - Web Technologies

contain

Introduction to Cascading Style Sheets (CSS)

Why CSS?

CSS is used to define the visual presentation of HTML elements on a webpage. With CSS, we can:

  • Easily modify the appearance of the page, such as the layout, color, and font.
  • Ensure a consistent design across all pages on a website.
  • Achieve a level of visual design and formatting that is not possible with just HTML tags alone.

Three ways to use styles

  1. External styles
    • Stylizing commands are placed in a separate document.
    • This allows you to use the same document to stylize multiple pages.
  2. Internal styles
    • Stylizing commands are placed within the same HTML document.
    • This is often used for learning and experimenting. We will use this today.
  3. Inline styles
    • Stylizing commands are applied directly to specific HTML tags within the document.
    • This method only affects the specific element it is applied to and will not affect any other elements on the page.

Why "Cascading"?

  • Multiple styles can be applied to a single element on a webpage.
    • Inline style is NOT recommended as it can be difficult to maintain and update.
  • When there is a conflict, the cascading nature of CSS determines the priority of the styles:
    1. Inline styles have the highest priority and will override any conflicting styles from external or internal stylesheets.
    2. External and internal styles are applied next and if there is a conflict, the value from the last read stylesheet will be used.
    3. Browser default styles if no matching styles are found.
  • Example: w3schools

Creating an internal CSS

  • Put styling rules in the <head> section
  • Surround rules by <style> and </style> tags
  • Example:
    <style>
/* rules go here*/
h1 {
    color: red;
    /* ... */
}
/* ... */
</style>

CSS Example

<html>
  <head>...
    <style>
      body {
        background-color: yellow;
      }
      h1 {
        text-align: center;
        font-family: impact;
        font-size: 36pt;
        color: red;
      }
      h2 {
        font-family: arial;
        font-size: 24pt;
        color: blue;
      }
      p {
        font-family: verdana;
        text-indent: 50px;
      }
    </style>
  </head>
  <body>...
  </body>
</html>

CSS Syntax

CSS Comments

p {
  color: red; /* This is a single-line comment */
  text-align: center;
}
/* This is
a multi-line
comment */

Let's Explore CSS

Take 10 minutes to play with examples in the following pages:

Questions: How do we ...?

  1. ... center text?
  2. ... set font type to Arial?
  3. ... use non-standard fonts?
  4. ... change color of text?
  5. ... change background color?
  6. ... create Apple Watch activity dials animation? (via CSS Animation Tutorials)

Checker Shadow Illusion

Q: Are Square A and B the same color?

  • You can use color picker in Chrome DevTools to verify

CSS Reference

Exercise: adding CSS

  • Download ex04.html from GitHub (OIM3690/resources/templates)
  • Make the following style changes:
    • For all h1 tags, set font-family to 'Gill Sans', color to navy and center the text on the page.
    • For all h2 tags, set font to Arial, color to any color using RGB values, set size to 22pt and left align the text.
    • For all h3 tags, set font to any font, color to any color using hex values, size to any font size and right align the text.
    • For all p tags, set font to any handwriting font.

Styling Images

  • Positioning an image
    • Typically, images are not centered
    • An image may be "floated" left or right:
      img {float:left;}
    • To center an image:
      img {display:block; margin-left:auto; margin-right:auto;}
  • Add a border to an image
    img {border-width:4px; border-color:green; border-style:solid;}
/* or */
img {border:4px solid green;}

Exercise: styling an image

  • Download tiger1.jpg from GitHub (OIM3690/resources/templates/images) and save it to WebTech/images folder
  • Add the image to ex04.html, just before the line "In zoos, tigers live for 20 to 26 years…"
  • Save the file and see how it looks
  • In <style> section, add a rule to float the image to the left
  • Add a border to the image, with 5px border width, solid style and red color
  • Save again and check.

CSS Basic Box Model

Exercise: adding paddings and margins

  • Understand paddings and margins using the tiger image.
    • Please search how to set paddings and margins.
  • Set the padding for the image to 10px on top, right, bottom and left.
  • Let us set the margin at the top and right to 30px and the margin at the bottom and left to 10px.
  • Check what changes and what does not
  • Update sitemap.html and commit/push to GitHub.

Questions?

global styles