CSS Workshop

1
CSS Workshop

• Understanding Stylesheets - Seperating style from
  contentthe Zen of CSS
• Walking through a re-design of an article on the
  History of Surfing
• Exercise Making some modifications of your own
• Closing with some discussion of implications and
  applications

2
On Cascading Style Sheets
3
A brief profile of CSS

• Cascading style sheets is a specification created
  by the W3C which allows web developers to create
  style documents to control textual features and
  the positioning of objects on the page.

CSS lets you separate content from presentation.
4
What is CSS?

• Multiple styles can be defined and used in
  individual HTML documents and across multiple
  HTML documents (fonts, spacing/placement, colors)
• Browser follows an order of interpretation (aka,
  a cascade) of the style definitions
• 3 W3C CSS standards (CSS1 and CSS2 are current
  CSS3 in development)

5
Styles in HTML

• In older versions of html, style attributes that
  describe how text or other elements should
  display are wrapped around text, thus
• ltfont facesans-serif size-2gtHi!lt/fontgt
• Problems arise when you need to change styles
  frequently!

6
Some problems with integrated style/content?

• each instance of a style must be hand coded,
  meaning that any document with lots of style
  changes becomes labor intensive
• mantaining a consistent look and feel across
  pages is tough on a large site
• making style changes to multiple pages is
  difficult and very time consuming

7
Styles in CSS

• In CSS, style attributes belong to the HTML
  element. They can be defined once either in the
  head of a document or in a separate style sheet
  document and referenced whenever needed.
• So if this represents my standard body text
  style
• ltfont facesans-serif size-2gtHi!lt/fontgt
• I can simply define the ltPgt tag to display all
  text as sans-serif, in the point size I want

8
Styles in CSS, 2

• I can simply define the ltPgt tag to display all
  text as sans-serif, in the point size I want
• P
• font-family Helvetica, Sans-Serif
• font size 9pt

9
The Logic of Styles in CSS

• CSS allows you to attach display information to
  most HTML elements. A CSS rule is the basic unit
  of a style sheet.
• A rule first names an HTML element (like a body
  text paragraph ltpgt) and then describes how that
  element should display.
• Thus, a rule contains a selector and a
  declaration.

10
Types of style sheets

• CSS defines 3 essential style sheets
• Inline
• Embedded
• Linked

11
Inline style

• Inline uses the style attribute
• ltp style"font-family Arial,sans-serif font
  size 28pt"gt
• Heres a paragraph with 28pt font size.
• lt/pgt
• Inline sheets control style on an
  element-by-element basis

12
Embedded style sheets

• Embedded uses ltstylegt lt/stylegt tags in the head
  of an HTML document
• Controls style on a page-wide basis
• Use lt!-- --gt to protect browsers that dont
  recognize ltstylegt tags

13
Embedded style example

• lthtmlgtltheadgt
• ltstylegt
• lt!--
• h2 font-type Arial,sans serif font-size
  40pt font-weight bold
• --gt
• lt/stylegt
• lt/headgtltbodygtlt/bodygtlt/htmlgt

14
Linked style sheets

• Linked style uses same syntax as embedded style
  but is in a separate .css file that you link to
  from the HTML file requesting the style
• Controls style more globally, spanning documents
  or an entire Web site

15
Linked style example

• HTML file using the linked style uses ltlinkgt tag
  within ltheadgt tag to link to it
• lthtmlgtltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"linked_style.css"gtlt/hea
  dgt

16
Linked style example 2

• Heres the style definition in the
• linked_style.css file
• h1 font-family Arial,sans-serif font-size
  48pt font-weight bold

17
Style hierarchy

• Style sheets work together in a cascading manner
• Inline trumps embedded and linked
• Embedded trumps linked
• So use linked for global, generic types of things
  and keep to a minimum
• Use other 2 types for fine tuning

18
CSS Syntax
Did he say enclosed?

• CSS rules have the following structure
• selector property1 value property2 value
• P font-family sans-serif font size 9
• With this rule applied, everything enclosed by a
  ltpgtlt/pgt tag will display in sans-serif, 9pt.

19
CSS will make your old HTML look uhhhhgly!

• CSS references objects in most cases, chunks of
  text or images enclosed by tags so you must
  define as an object any text that you want to
  reference in a style sheet.
• This means You have to close those ltpgt tags to
  form the boundaries of the object being styled!

20
CSS will make your old HTML look uhhhhgly, 2

• It also means
• You define object Classes, IDs and learn their
  properties and value ranges
• You learn to use wildcard tags like ltdivgt and
  ltspangt to define sub-sections of text within the
  body of a document
• You have to get good at designing
  documentsthinking ahead what will help both
  content developers and readers

21
CSS Classesnaming objects

• In CSS, a class refers to a particular category
  of a more general tag.
• Let say you wanted odd and even table cells to
  be different colors for easier scanning
• TD font-face sans-serif font-size 12pt
• .even bgcolor FFFFFF
• .odd bgcolor CCCCCC

22
CSS Classescont.
TD font-face sans-serif font-size
12pt .even background-color FFFFFF .odd
background-color CCCCCC

• In your HTML code for the table, you simply
  reference the class to invoke the style
• lttd classevengtdisplay this text with a white
  backgroundlt/tdgt
• lttd classoddgtand this text with a grey
  backgroundlt/tdgt

23
Getting more specificIDs

• You can set IDs for specific kinds of objects
  too by giving them a unique ID name and set of
  display rules.
• Lets say, for example, we want a table row that
  serves as a column header it could be different
  than our odd or even classes of rows and even
  different from our default row look.

24
An ID rule

• Here, I have added a new ID to our TR rules
• Now, I can specify a row as a header
• lttr idheadergtRed, sans-serif, 12pt type on a
  white background, por favorlt/trgt

TR font-face sans-serif font-size
12pt .even background-color FFFFFF .odd
background-color CCCCCC header color red
25
ltDIVgt ltSPANgt are your friends

• ltdivgt and ltspangt tags allow you to define
  exceptions to the general rules of your body
  textand they are helpful tools for document
  designers and web developers
• ltdivgt is usually used to designate styles for
  block elements that should stand apart from the
  body textlike callout quotes. Everything inside
  a ltdivgt tag takes on the ltdivgt attributesand you
  can specify classes and ids for ltdivgt too!

26
More on ltSPANgt

• The ltspangt tag is usually used to change the
  display attributes of a short run of text or
  objects within a block-level element (such as a
  paragraph or table cell).
• I might use ltspangt, for example, to define a look
  for code examples (like the one below) that is
  different than the body text
• ltspan classexamplegtTR font-face sans-serif
  font size 12ptlt/spangt

27
ltDIVgt and dynamic html

• It is common to use ltdivgt tags to structure
  content for dynamic display.
• For example, you can have two chunks of
  information that occupy the space allocated for a
  section called ltDIV classintroductiongt, and
  switch these out depending on some user-initiated
  event (such as loading the page with IE vs.
  Netscape browser).

28
Seeing a document as a collection of objects

• All of these tags, attributes, rules, selectors,
  declarationswhat do they mean for information
  designers?
• They are all tools you use well ONLY if you can
  start to see a document as a collection of
  objectsso, lets practice.

29
Workshop Time!
30
Workshop Time!

• For our example, well take a look at a web
  article on the History of Surfing from the Coffee
  Times web site.
• Break it up into the objects that would have to
  be defined in a style sheetdont worry about the
  right syntax too much at this pointconcentrate
  on defining objects, attributes, etcAND

31
Workshop Time!

• Think about how users (readers) will interact
  with this document. Try to define objects and
  attributes that will optimize its display on the
  screen for a reader.
• Try to come up with alternatives to simply
  reproducing a print-based article.

32
Time for a Walkthrough
Now that youve come up with some alternative
ideas of ways the article could work, well walk
you through re-styling the article based on our
modified version. Then well help you try some
modifications of your own.
33
Give it a try
Now lets point browsers at web sites and give
this a shot Coffee Times History of Surfing Our
modified History of Surfing
34
Implications Applications

• Thinking objectively about documents
• Granularity
• Re-use and re-purposing
• . . . and whatever other issues come to mind!
  Questions, fire away!