CSS quick reference

CSS 2.1 specification

CSS reference

http://www.w3schools.com/css/css_reference.asp

css_reference.html

http://www.w3.org/TR/CSS21/propidx.html

html tag reference

http://www.w3schools.com/tags/ref_byfunc.asp

xhtml11_tags.xhtml

CSS Validation Service

stylesheet declaration

A stylesheet can be declared at three different places relative to the html file it applies to

1. in an external file
2. in the head element of the html file
3. in the style attribute of any element of the html file body

external css file referencing

if the css is declared in an external file, there are two ways to reference it :

1. by import
2. by linking

Import

<style type="text/css" media="all">
    @import url( styles/base.css );
    @import url( styles/secondary.css );
</style>

advantages

Importing can be done from the html file or from a css file. That means it is possible to create complex stylesheets by importing in other stylesheets.

Linking

<link rel="stylesheet" type="text/css" href="styles/base.css" />
<link rel="stylesheet" type="text/css" href="styles/secondary.css" />

advantages

• The stylesheet will be put in cache by the browser. This is not necessarily the case with import.
• Possibility to access the link element via DOM.
• Possibility to define stylesheet sets.
• Possibility to define replacement css. However, this functionality is not well supported and should be avoided.

external vs. internal css declaration

In most of the cases, external stylesheets must be preferred because

• The web site will be easier to maintain
• The speed will be improved because the total file size tends to be smaller.

However if the web site has a huge traffic (e-bay, google, ...) it can be better to declare the css inside the html file because the server has to deliver one file instead of two.

selections

#my_id

my_id

p#my_id

my_id

p

.my_class

my_class

p.my_class

my_class

p

div p em

em

p

div

conflict resolution

see http://www.rebelinblue.com/specificity.php

css rules can be in conflict. Conflict resolution is done like that

• If a rule is declared with the statement

  !important

  it wins over any other rule that don't have this statement.
• Rules that have the bigger specificity win.
• If two rules have the same specificity, the one that appears last wins.

specificity calculation

• An element has a specificity of 1
  An element included in an other element has a specificity of 2
  ...and so on for any level of inclusion
• A class has a specificity of 10
• An id has a specificity of 100
• A css rule inside the html code (inline style) has a specificity of 1000

examples

p

body p

p.toto

p#toto

body p#toto

body#toto p

body#toto p#toto

body#toto p.toto

<p style="font-family: 'Courier', sans-serif;">...</p>

attributes order

top, right, bottom, left

As a reminder, start at noon (top) and follow clockwise.

units

• em : 1em = size of the font (eg: if the font size is 10px then 2em = 20px)

font size

Positioning schemes

usefull links

nj links

• Web Page Development: Best Practice
  Before you start coding your website you must make a few decisions—which DOCTYPE do you use? Do you use pure CSS, or CSS with Minimal Tables? We'll discuss these topics, and then go into some design guidelines and issues to consider with XHTML and CSS.
  http://developer.apple.com/internet/webcontent/bestwebdev.html
• how to open links in a new window in xhtml strict
  http://www.sitepoint.com/article/standards-compliant-world/
• http://www.design215.com/toolbox/css_guide.php
• http://www.quirksmode.org/
• http://css.maxdesign.com.au/
• http://www.andybudd.com/archives/2003/11/no_margin_for_error/
• http://www.meyerweb.com/eric/css/
• http://mezzoblue.com/
• http://www.positioniseverything.net/
• http://csszengarden.com/
• How and why to make a web site more accessible
  http://diveintoaccessibility.org/
• Vischeck simulates colorblind vision
  http://www.vischeck.com/

Designing effective websites course links

Planning

• Stakeholder survey [http://www.web-redesign.com/downloads/03_client-survey.pdf]
• Naming convention at CERN [http://webservices.web.cern.ch/webservices/Help/?kbid=080600]
• Operating system platform stats [http://www.w3schools.com/browsers/browsers_os.asp]
• Browser stats [http://www.w3schools.com/browsers/browsers_stats.asp and http://en.wikipedia.org/wiki/Usage_share_of_web_browsers]
• Resolution stats [http://www.w3schools.com/browsers/browsers_display.asp]
• Screen resolution checker [http://www.screen-resolution.com/]
• CERN home page [ http://public.web.cern.ch/public/ ]

Information architecture

• RET [http://www.theret.org/]
• Disasters Emergency Committee [http://www.dec.org.uk/]
• Le Louvre site map [http://www.louvre.fr/llv/commun/plansite.jsp?bmLocale=en]
• ESA kids [http://www.esa.int/esaKIDSen/index.html]
• Oxfam International [http://www.oxfam.org/en/]
• Tag clouds [http://en.wikipedia.org/wiki/Tag_cloud]
• Tag cloud generator [http://www.tagcrowd.com/]

Writing for the web

• Eyetracking [www.useit.com/eyetracking/]
• Readability [http://www.angelfire.com/super/badwebs/monkeyspaw.htm]
• BBC news home page [http://news.bbc.co.uk]
• Structuring content [http://news.bbc.co.uk/2/hi/science/nature/6402493.stm]

Page titles excercise:

• www.foodsafety.gov
• physics.bu.edu
• keepfit.org.uk
• lhc2008.web.cern.ch/lhc2008/

• LHC safety [http://public.web.cern.ch/public/en/LHC/Safety-en.html]
• Google home page [http://www.google.com]
• New York Times home page [http://www.nytimes.com/]
• World Food Programme homepage [http://www.wfp.org/]

Images and multimedia

• CERN photo library 1 [http://multimedia-gallery.web.cern.ch/multimedia-gallery/PhotoGallery_Main.aspx]
• CERN photo library 2 [http://cdsweb.cern.ch/collection/Photos]
• Science photo library [www.sciencephoto.com/]
• Flickr [http://www.flickr.com/]
• CERN press office [http://press.web.cern.ch/press/]
• A Flash feature story: http://www.who.int/features/great_expectations/en/index.html
• Flash site [http://www.beyonceonline.com/]
• Flash microsite [http://virtualvisit.web.cern.ch/VirtualVisit/ATLAS/]
• CERN online video library [http://multimedia-gallery.web.cern.ch/multimedia-gallery/Videos.aspx]

Visual design

• Resolution stats [http://www.w3schools.com/browsers/browsers_display.asp]
• W3C [http://www.w3.org/]
• Clagnut [http://www.clagnut.com/blog/269/]
• CERN [http://public.web.cern.ch/public/]
• Web safe colour palette [http://www.lynda.com/hue.html]
• The colour wheel [http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm]
• The ‘web smart’ palette [http://www.morecrayons.com/]
• colorcombos.com [http://www.colorcombos.com/index.html]
• Colour keyword names [http://www.w3.org/TR/SVG/types.html#ColorKeywords]

Colours and fonts exercise:

• CERN home page
• The Guardian Newspaper
• Wikipedia
• Wordpress
• Open source web design [http://www.oswd.org/]

Production

• Web Standards Group [http://webstandardsgroup.org/standards/]
• World Wide Web Consortium (W3C) [www.w3.org]     
• Adding links [http://webservices.web.cern.ch/webservices/Help/?kbid=90010]
• Character entities [http://webstandards.org/learn/reference/charts]
• CSS Zen Garden [www.csszengarden.com]
• CSS quiz [http://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS]
• XHTML validator [http://validator.w3.org/]
• CSS validator [http://jigsaw.w3.org/css-validator/]
• Vischeck [http://www.vischeck.com/vischeck/]
• Free web accessibility evalution tool [http://wave.webaim.org]
• Authoring tools at CERN [http://webservices.web.cern.ch/webservices/Help/?fdid=10]
• Example of a BAD website [http://www.angelfire.com/super/badwebs/main.htm]

Other

• Internet usage statistics [http://www.internetworldstats.com/stats.htm]
• Structuring content [http://news.bbc.co.uk/2/hi/science/nature/6402493.stm]
• Video transcripts [http://www.bbc.co.uk/sn/tvradio/programmes/horizon/broadband/tx/universe/highlights/]
• Google home page [www.google.com]
• New York times home page [www.nytimes.com]
• CERN copyright notice [http://cern-copyright.web.cern.ch/cern-copyright/]
• Creative Commons [http://www.flickr.com/creativecommons]

Reference sites

• Web style guide [http://www.webstyleguide.com/]
• Webcredible [http://www.webcredible.co.uk/]
• W3C Consortium [http://www.w3.org/]
• Jakob Nielsen's website [http://www.useit.com/]
• W3 schools online web tutorials [http://www.w3schools.com/]