Professor Waterman

1
De-mystifying
CSS

• Professor Waterman

2
What is CSS

• Cascading Style Sheets (CSS) is a language that
  works with HTML documents to define the way
  content is presented. The presentation is
  specified with styles that are placed directly
  into HTML elements, the head of the HTML
  document, or separate style sheets.

3
What is CSS Continued...

• Style Sheets contain a number of CSS rules. Each
  rule selects elements in an HTML document. Theses
  rules then define how elements will be styled.
• Any number of HTML files can be linked to a
  single CSS file.

4
What Does Cascading Mean?

• Browser style sheetsBrowser apply style sheets
  to all Web documents Although these style sheets
  vary from browser to browser, they all have
  common characteristics, including black text,
  blue links, and purple visited links. These are
  referred to as default browser style sheets.

5
What Does Cascading Mean Continued...

• User style sheets A user is anyone who looks at
  your website. Most modern browsers allow users to
  set their own style sheets within their browser.
  These style sheets will override the browsers
  default style sheets for that user only.

6
What Does Cascading Mean Continued...

• Authored style sheetsThe author is the person
  who develops the websiteyou! As soon as you
  apply a basic style sheet to a page, you have
  added an author style sheet. Author styles
  generally override user styles, which override
  browser styles. See chart below

Browser Style sheet
User Style sheet
Author Style sheet
7
Why Use CSS?

• Easy to maintainThe power of CSS is that a
  single CSS file can be used to control the
  appearance of multiple HTML documents. Changing
  the appearance of the entire site can be done by
  editing one CSS file rather than multiple HTML
  documents.

8
Why Use CSS Continued

• Smaller files sizeCSS allows authors to remove
  all presentation from HTML documents, including
  layout tables, spacer images, decorative images,
  font, colors, widths, heights, and background
  images. Presentation can then be controlled by
  CSS files. This can dramatically reduce the files
  sizes of HTML documents.

9
Why Use CSS Continued

• Increased AccessibilityCSS, combined with
  well-structured HTML documents, can aid devices
  such as screen readers. With presentational
  markup removed, the only thing a screen reader
  encounters is structural content. CSS also can be
  used to increase the clickable area of the links,
  as well as control line height and text line
  lengths for users with motor skill cognitive
  difficulties.

10
Why Use CSS Continued

• Different MediaCSS can be styled specifically
  for different media, including browsers,
  printers, handheld devices, and
  projectorswithout changing the content or
  document structure in any way.

11
Why Use CSS Continued

• More control over typographyCSS allows authors
  to control the presentation of the content with
  properties such as capitalization, uppercase,
  lowercase, text-decoration, letter-spacing,
  word-spacing, text indent, and line height. CSS
  can also be used to add margins, border, padding,
  background color, and background images to any
  HTML elements