Introduction to CSS

CSS History

Origins of Styles

• G01a- (7:25)
  • Remembering and applying a certain look to writing is probably as old as writing itself. Or even perhaps older if prehistoric rock art and engravings are considered to be forms of communication. Rules for the appearance of structures go back millennia and include the classic orders of architecture, Doric, Ionic, & Corinthian.
  • Such a look can be called a style. Style also refers, of course, to fashion. Fashion styles have their own look that distinguishes them. Styles of art and music are also well know, such as impressionism.
  • The word sheet might be derived from a sheet of paper that contained written information about what formatting needed to be applied when setting up printing.
  • The term style sheet came into greater use with the advent of desktop publishing.
  • Other related items:
    • Style sheets in desktop publishing.
    • Style Guide
    • The highly regarded Apple Style Guide
    • The famous arbiter of proper usage for printing and writing The Chicago Manual of Style.
  • Microsoft Word allows you to save and apply styles in a similar way to CSS.

Style Comes to the Web

• G01b - (4:30)
• HTML was manipulated to provide formatting. For example:
  • The table tag was used to compose pages.
  • The font tag provided size, color, font faces.
  • ...and other tags and attributes as well.
• The W3C is in charge of making recommendations and specifications for CSS as well as HTML, XML, and more.
  • The W3C is supported by browser publishers, but the rules are not always adhered to by those same publishers.
• History of CSS
  1. CSS1 - 1996 - Included the following:
     • Font properties, bold, italic, type face
     • Alignment of tables, images, and other elements.
     • Text alignment
     • Text spacing between letters, words, and lines of text
     • Color: for text, backgrounds, and other elements.
     • Margin, border, padding, and positioning for most elements.
     • The id and class selectors introduced.
  2. CSS2 - 1998 - Included:
     • Increased accommodation for international and accessibility.
     • Absolute, relative, and fixed positioning of elements and z-index,
     • Media types, support for aural style sheets and bidirectional text
     • Font shadows
  3. CSS2.1: 2006 - fixes for 2.0
  4. CSS3:
     1. CSS3 is divided into several "modules".
     2. Different modules have varying levels of stability and have different status
     3. There are over 40 CSS modules.
  5. More about the history of CSS:
     1. http://en.wikipedia.org/wiki/Style_sheet

About CSS

CSS = Cascading Style Sheets

• G01c- (2:25)
  • Cascade:
    • The cascade is the system that determines what style gets applied and is particularly important when there are conflicting attempts to specify the style that ought to be applied to, say, some text. The cascade is a part of the complex method used for determining which style takes precedence.
  • Style sheet
    • The term style sheet refers to a collection of formatting settings saved as a single thing called a style sheet.
    • The entire collection can then be easily applied to items such as text, images, or headings, by simply applying the single style sheet.

The Distinction Between HTML & CSS

• G01d- (3:42)
  • The ideal is to separate kinds of information from presentation of information.
    • HTML is mark-up - which is not intended to directly control appearance.
    • CSS is a style sheet language designed for the application of formatting.
    • The two terms are sometimes conflated as the application of styles relies on html tags to do it.
  • html identifies different kinds or types of information
    • Content is kept within semantic elements, which means, what kind of information it is.
    • The elements are labeled using html tags.
    • The appearance of the content is not controlled directly by the tags.
    • Browsers apply their own styles specified by their own built-in style sheets.
      • This results in making the text inside heading tags (h1, h2, h3) appear bolder and bigger than surrounding text.
      • But note that CSS styles trump browser styles. This means that CSS can make the text inside an h1 tag tiny because it will override the browser's style sheet. This is part of the cascade.
    • Examples of types of information and the tags used to identify them:
      • A section title: <h2>
      • Paragraph of text: <p>
      • Example of text as it appears in code: <code>
      • Table of information: <table>
    • The limited array of tag types has hampered attempts to easily identify different types of information.
      • This has resulted in the need to use class and id attribute values to identify classes of information or sections of pages.
    • HTML5 will make identification of types of information much easier to do with tags such as <nav>, <footer>, <aside>, and so forth.
  • css provides presentation - design, formatting, page composition
    • CSS is purely about the presentation of information.
    • HTML tags are used as the vehicles for applying styles.
    • CSS does not apply any inherent meaning to elements, however the styles can deliver an appearance to elements that may accentuate what type of information it is.
  • More about CSS:
    • Cascading Style Sheets
    • Style Sheet Language

The Benefits of CSS & A Few Limitations

• G01e - (6:06)
  • View the effect that different style sheets have on the same html code.
    1. First compare these five files:
       1. Plain html with no styles
       2. Style A
       3. Style B
       4. Style C
       5. Style D
    2. Here are some incredible differences between style sheets: css zen garden
       • Click on the links in the list of style names to see that style applied.
         • The list appears in different locations when different styles are applied.
         • Clicking on the designer's name will bring you to their personal site.
       • In case you are wondering about the wide variety of images that appear, the images that you see result from the use of the css background-image property which is specified in the css. They are not in the html code.
       • The html file and all the css files and images associated with it are downloadable.
       
       
• G01f - (5:36)
  • Tremendous formatting possibilities.
  • The power of CSS
    • Far more formatting options than html ever provided.
    • Separates the identification of kinds of content from the formatting applied to it
    • Simple formatting control over an entire site.
    • Less code in files when linking to an external css file.
  • Provides more flexibility for document layouts than tables do.
    • A major disadvantage of css as compared with tables is that css has no simple way to provide full height columns. Tables can do so easily. There is a simple trick to do this.
  • A few limitations
    • Uneven support.
    • Different style sheets can be provided for different browsers and platforms.

© 2014 Dan Hitchcock Vaughan and licensors