CMPT 165

Introduction to the Internet
and the World Wide Web

By Hassan S. Shavarani

Unit3: Stylesheets

Topics

  1. Styles
  2. CSS Basics
  3. CSS Properties
  4. CSS Selectors
  5. Colors in CSS
  6. Styling Pages with CSS
  7. Browser Compatibility
  8. Separating Content and Appearance
  9. CSS Fonts [optional content]
  10. Interactive Color Mixer [optional content]

when you test a piece of code locally
you have tested it:

  • with your particular browser (Firefox, Chrome, etc)
  • in the version of the browser you have
  • with your browser window size
  • with the fonts, plugins, etc. that you have installed

CSS Validation

you will need to validate your developed CSS using
CSS Validator

however, for CSS, the situation can be more complicated when it comes to actually working in different browsers

Handle Browser Inconsistencies

you need to use a reset stylesheet (a pre-prepared stylesheet that remove all of the defaults set by browsers) to reduce browser inconsistencies

<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="my-style.css" />

Normalize.css is an alternative to the reset stylesheet mentioned above

Browser Compatibility

the question is whether each browser supports
the CSS features you use or not

HTML Browser Compatibility

the only HTML compatibility issues will come from older versions of Internet Explorer

for this course, we will happily ignore old IE versions and move on

CSS Browser Compatibility

for css you can use the CSS Reference which helps you to understand the compatibilities CSS Compatibility * image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/compat1.png

Testing Tips

  • resize your browser window
  • try a different browser
  • try a mobile device

Basic Ideas of Separating Content and Appearance

when writing HTML

  • think about your content, not the way you want it to look
  • choose tags so their meaning matches your content
  • if the tags aren't specific enough, add a class or id to distinguish particular elements as semantically-different
  • choose class and id values to reflect meaning as well, not to describe an appearance
  • if no existing tag matches the content you have, use a generic tag (<div> or <span>) with a meaningful class or id

Basic Ideas of Separating Content and Appearance

when writing CSS

  • Use CSS to specify how you want pieces of content to look, in a separate .css file.
  • If you need to, go back and add markup (especially class or id attributes) to your HTML as you're creating your CSS. Don't slip into saying things about appearance in your HTML when doing this.
  • Don't use the <style> tag or HTML style property, which mix style information back into your HTML. If your reference uses these, find a better reference.

CSS Fonts

as mentioned before, the CSS font-family property
should be given a list of fonts, so the user's browser
can try several options to find
the "best" one available on their computer

font-family: "Helvetica", "Arial", sans-serif;

this fall back mechanism does not guarantee the same appearance every where!

Loading Fonts

you can use several online font repositories, most notably Google Fonts

<link rel="stylesheet"
    href="https://fonts.googleapis.com/css?
    family=Open+Sans:400,700" />
<link rel="stylesheet" href="my-style.css" />

body {
    font-family: "Open Sans", sans-serif;
}

Interactive Colour Mixer

An interactive demo of the concepts in color section can be found here
Any Questions?