What is CSS Brief historical overview W3C recommendation Browser by chenmeixiu


Presented by Chris Sanyk
         CSS: Why take a class?
   Basic CSS is really, really easy to learn.
   The language syntax is pretty straightforward.
   Examples are everywhere. Just ViewSource.
   The tools needed to develop CSS are free and
    available on any computer.
   All you need is a text editor, a web browser, and
    a few good references.
          CSS: Why take a class:
   Advanced CSS can be pretty hard.
   Complex CSS can be hard to work with.
   Dealing with browser inconsistencies can be a
   Keeping up to date with CSS as it develops takes
    effort as well as patience.
                  Why this class:
   Most classes I’ve seen or taken have focused on by-the-
    book basics. I find those are easy enough to pick up on
    your own.
   What people really need from a class on CSS is to
    acquire “street smarts” so they can avoid the traps that
    ordinarily are discovered and defeated through
   Hopefully you’ll come out of this with a solid
    understanding of fundamentals, how to do the basic
    stuff effectively and efficiently, and maybe a few cool
                        My Goals
    NOT to become known as “the CSS guy”
    I have 3 goals for this class:
    1.   To help others learn CSS and enable them to work with it,
         and encourage sharing of expertise.
    2.   To improve my own comfort and competence with CSS so
         that I can grow.
    3.   To build a course foundation that can be re-used by any
         competent instructor, and improved upon in successive
         teachings, and potentially packaged and sold as a product.
    What goals do you have?
   Where are you at?
   Silently assess yourself on a 0-4 scale…
                Your Instructor
   Overall: 3
   Basics: 4
   CSS for HTML <form> elements: 2
   Browser compatibility: 2
   CSS positioning: 2
   CSS 3: 1-2

   Probably some people in the room know more. Let’s
    collaborate on making the class better!
   Before CSS, HTML used a combination of
    <elements> and attributes=“” for controlling
    the presentation of a web page.
   This was limited at best, and gave rise to really
    messy ugly code.
   The worst of it was HTML 3.2.
   HTML 4 (and XHTML 1), which has been
    around since 1999, was a major cleanup of this
    mess, and was very successful in many ways.
   11 years later, we’re just on the cusp of HTML
   OK, maybe this is also a testament to the
    slowness of W3C.
   Much of HTML 4’s success is owed to the
    success of CSS, especially CSS 2.1.
   Initially, HTML was all there was.
   It handled both describing the structure of a
    document, as well as how the document should
    be presented.
   Presentational aspects of early HTML were
    fairly limited, both in terms of the effects that
    could be achieved, and how they were applied to
    a document element.
   Early 90’s:
       HTML started coming together in the early 90’s (IETF)
   1993-94:
       HTML begins to see real use. NCSA Mosaic launches WWW
        revolution. Birth of the modern internet.
   1995:
       HTML 2
   1996:
       CSS 1 becomes a W3C recommendation in 1996. It is fairly
        basic and not widely supported by web browsers right away.
        No one can use it in the real world.
   1997:
       HTML 3.2 becomes the first version of HTML to achieve
        W3C recommendation status. Previously, HTML was just
        developed by various people and groups.
       HTML 3.2 mostly consolidated a bunch of proprietary
        extensions to HTML that had been created by Netscape,
        Microsoft, and others.
       Because browsers don’t support CSS well, and because CSS 1
        is so limited, a host of presentational HTML elements and
        attributes are incorporated into the 3.2 spec, turning it into a
        horrid mess. HTML 3.2 code is bloated, ugly, and hard to
        read as content becomes buried in a mess of presentational
   1998:
       CSS 2 becomes W3C recommendation.
   1999:
     CSS 1 finally well-supported in the browser.
     Beginning of a long period of inconsistent,
      incomplete support for CSS 2.0 in the browser…
      and seemingly endless frustration for web
   2003-04
       Browsers now have decent support for much of CSS 2, and
        continue to improve.
       As of 2008, no browser had fully supported the CSS 2.0
   2009:
       As of 2009, W3C has only managed to advance CSS 2.1 to
        “candidate recommendation” status.
       Despite this, CSS 2.1 is the current dominant de-facto
        “standard”, and has been reasonably well-supported by
        browsers since around 2005-6.
            Sadly, well-supported does not mean “perfectly” or “completely.”
   CSS 3 is emerging. Parts of it are already widely
    supported by current versions of major browsers.
   Unfortunately a fair amount of users out there
    aren’t on the latest versions, so 2.1 is still your
    best bet.
   CSS 3 extends and builds on 2.1, so W3C should
    hurry the hell up and finalize the 2.1
    recommendation already.
                    WTF, W3C?
   W3C risks making itself irrelevant if they can’t release
    recommendations more quickly.
   WWW currently has a strong foundation in open
    standards. This should not be taken for granted.
   If these standards do not evolve to meet the needs of
    web developers, we run the risk of losing this openness.
    Proprietary innovation could overtake open standards.
   WWW++ could end up being built from proprietary
    tech such as Flash and Silverlight.
           On the other hand…
   Getting 10 (well, OK, more like 5) years use out
    of something is pretty nice.
   Not having to learn the latest version every year
    or so frees you from being stuck in the perpetual
    learning curve, and allows you to get good.
   Stability is great… but only if major problems
    are solved and deficiencies get addressed.
                        CSS weak points
   Layout
       Flexible/fluid layout is difficult
       Columns
       Lacking Orthoganality (orthowha?)
            There’s often more than one way to achieve a desired effect, and getting
             different properties to work together is… screwy.
                  Position, Display, Float:
                  Font sizes and dimensional units.
            Which do you use, when?
            How do they work together?
   Selectors are unable to ascend (there’s no “parent of” selector.)
   Vertical control (lack thereof, especially with centering).
   No way to express calculated values.
   No explicit scope declaration.
                   CSS weak points
   User agent settings can mess up your style (local
    custom CSS, font settings, default colors, etc.)
       This is actually a not a weak point, as it means that ultimately
        the client has control over their preferences. But this can
        drive designers and product owners nuts because they don’t
        have absolute control.
   Even if the standards remain stable, if the browsers are
    constantly going through updates and their support of
    CSS changes over time, you’re shooting at a moving
                      The Browser
   Browser Support for CSS
       Always lags behind W3C, at least for a while.
       Sometimes differs from what W3C specifies. (Sometimes
        browser devs make mistakes, sometimes W3C is vague.)
       Some browsers also support proprietary CSS extensions (got
        tired of waiting for slow W3C).
       This is fine, insofar as W3C does not own CSS; that’s why
        they’re called recommendations.
       It does, however, inconvenience web developers when
        browsers implement CSS support differently.
       Each browser has a “default” stylesheet that it uses for
        determining what plain HTML looks like. And each is
        somewhat different.
               Browser Support
   Bottom line: Browser support for CSS is
   If you’re unlucky, badly interpreted CSS can
    cause your site to look broken in a particular
    browser (usually IE).
   It’s a pain to try to support every platform; it’s
    sane to support open standards.
   Try to stay sane.
   You may not always be able to.
              Browser Support
   Your website will therefore look slightly
    different in different browsers.
   Browsers ignore markup they don’t understand.
   Browsers mangle markup they think they
   Browsers attempt to render invalid markup, but
    do so inconsistently.
                 HTML + CSS
   Stop using HTML attributes for controlling
    presentational aspects of the web page.
   Avoid using tables for layout. It’s possible,
    though difficult, but worth it.
     Accessibility (508 & WCAG)
     SEO

   Let HTML provide logical structure, and let CSS
    handle presentation.
Why use CSS? Advantages of CSS
   In a word, reusability. CSS saves you work.
     Declare a style rule once, apply it everywhere you
      need to.
     Content from one page can be brought into another
      without having to re-work the HTML. (In theory.)
     Reduce burden on web server by providing light-
      weight markup.
     Easier maintenance.
     HTML is more readable.
     Less work to make changes to the way the site looks.
    No, really. Why should I bother to
                learn CSS?
   Do you really need to know CSS in order to make web
    sites? Mmmm… maybe not.
   Consider: do you want to be a codemonkey, or do you
    want to author content?
   CMS frameworks do a lot of monkey work for you.
    They are good. Use them. Even if you’re a
    codemonkey. Especially if you’re a codemonkey.
   Use/modify existing templates/themes/etc.
   Concentrate on your message, and having something
    interesting to say.
               Why learn CSS?
   Control.
   Customization.
   Do something unique.
   You want to understand why the #@%* your
    web site doesn’t look right in $browser, and fix
   Someone’s giving you money.
                How to use CSS
   Connecting CSS to HTML
     Linked stylesheets
     Embedded stylesheets

     Inline style declarations
             Linked Stylesheets
   <link rel="stylesheet" type="text/css"
    href=“mystyle.css" />
   The preferred way. An external .css file contains
    your CSS code, and can be referenced by
    multiple HTML documents. Maximizes
   HTML document can reference multiple .css
    files, and take on styling from each of them.
   <link> goes in the <head> element.
           Embedded Stylesheets
   <style><!--
       /*your CSS here*/
   Not very reusable, since the CSS rules can only be
    utilized by the HTML document it is embedded within.
   Useful in the event that you need to make sure the
    HTML file stays with its CSS markup.
   Devious “css injection” possibilities… (don’t allow
    <style> tag in web forums, or users will do bad things
    to your site.)
   <style> is w3c-valid only in <head> but most browsers
    will accept it in <body>
              Inline style attribute
   style=“declaration1; declaration2;”
   <p style=“font-size:10pt; color:red;”>
   Nearly any HTML element can take a style attribute
   Inline styles are more specific; that is, they will override
    rules declared in external or embedded stylesheets.
   Inline styles are good for ad hoc or temporary
    solutions, but at the expense of the re-usability of the
    HTML/content. They’re fine for posting comments to
    discussion boards.
                            CSS Syntax
   Selectors                               Selector {property: value;}
                                            /* Comment */
   Properties
   Values
   Comments

   property:value = declaration.
   ; = separator.
   Single declarations or the end
    declarations don’t technically need ;
    it is a separator, not a terminator.
                        CSS Syntax
   Whitespace doesn’t matter         p
    (with one important               {
    exception.)                           font-size:10pt;
   Format for readability, try to        color: red;
    be consistent.
   CSS itself is not case            }
   Treat it like it is anyway;       div, p, h1 {font-
    some browsers seem to               family: arial;}
    implement it as case
    sensitive, and urls referencing   #head {background-
    resources in CSS are case           image:
    sensitive.                          url(/caseSentitive-
          CSS Syntax: Selectors
   Universal           *
   Named element       div
   Class               .myclass
   ID                  #MyID
   Class and ID selectors can combine with elements to
    make a more specific rule:

       p.myclass{} selects only <p class=“myclass”></p>
            Not <p></p>
            Not <div class=“myclass”></div>

       p#MyID{} selects only <p id=“MyID”></p>
            Not <p></p>
            Not <div id=“MyID”></div>
CSS Syntax: Selectors (advanced)
   List of selectors        h1, .myclass,
    (comma)                   .otherclass {}

   Descendent selector      .myclass p {}

   Child selector        ul > li {}
   Sibling selector      h1 + p{}
                 Classes, IDs
   Use IDs for unique regions on page, since ID
    value must be unique for the page.
   Make ID and Class names semantic, not
    descriptive. (e.g., .warning -- not .red )
                     CSS Selectors
   Pseudo-classes             :link
                               :visited
                               :hover
                               :active
                               :focus
                               :first-child
                 CSS Selectors
   Pseudo-element         :first-line
                           :first-character
                           :after
                           :before
                CSS 2.1 Selector Summary
      Pattern                                                             Meaning
*                Matches any element.
E                Matches any E element (i.e., an element of type E).
E F              Matches any F element that is a descendant of an E element.
E > F            Matches any F element that is a child of an element E.
E:first-child    Matches element E when E is the first child of its parent.
E:link           Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited
E:visited             (:visited).
E:hover          Matches E during certain user actions.
E:lang(c)        Matches element of type E if it is in (human) language c (the document language specifies how language is determined).
E + F            Matches any F element immediately preceded by a sibling element E.
E[foo]           Matches any E element with the "foo" attribute set (whatever the value).
                 Matches any E element whose "foo" attribute value is exactly equal to "warning".
E[foo~="warnin   Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to
     g"]              "warning".
E[lang|="en"]    Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".
DIV.warning      Language specific. (In HTML, the same as DIV[class~="warning"].)
E#myid           Matches any E element with ID equal to "myid".
        Other CSS Fundamentals
   Font size and dimensional units
   Colors
   The Box Model
                    Font size WTF
   Proportional or Absolute?
       Absolute units: pt px in cm mm
       Proportional units: ex em %
   Each has pros and cons; there is no ideal perfect
   Proportional units are usually the way to go.
   Absolute units are useful in some cases
       (print media)
   Be careful/take advantage of nested proportional
   Days of 216 “web safe” colors is long gone.
   Descriptive color names
        Only 16 color names are actually W3C standard.
        +124 (for a total of 140) more color names (orig. Netscape) are widely supported.
         But does each browser truly render them all identically? These can’t be relied
         upon absolutely for all user agents; some may not support them at all.
   System color names (OS-specific; maybe customized by user).
   #xxxxxx; hex notation
   #xxx;
        (shorthand, less precision, saves 3 bytes of bandwidth)
   RGB(0-255,0-255,0-255) and RGB(0-100%,0-100%,0-100%)
        (why bother?)
        Seem to be popular in generated code for some reason.
   If using number values, it can be helpful to comment with a name or
    description of the color.
   End user monitors are very likely not color calibrated, accuracy is not critical.
   “Transparent” named color
   Transparency and elements
     Background color
     Text

     Images

   Gradients
The Box Model

   static (default)
   relative (offset relative to static)
   absolute (offset relative to first non-static
   fixed – position in a fixed position within the
    window viewpane. Does not scroll.
       IE support spotty. ( IE >= 7)
                   Float and Clear
   float and clear are not implemented consistently
    among all leading browsers. This is why they are
    sometimes more of a pain than they should be.
   Blame IE for its bad behavior with float. Usually can
    be fixed with an extra <div> to wrap the element and
    float the <div>.
   Floated elements do not influence the height of their
    parent. Beware overflowing floats.
       Use 0-height <div> with Clear after a overflowing Floated
        element if you need to fix it.
               Float and Clear
   float:left or float:right takes the
    element out of normal flow, and wraps other
    content around it.
   If the floated HTML element does not have a
    defined width, float will not work properly
    unless you provide a width value. (<p>,
    <blockquote>, <div>, etc.) The floated
    element’s width has to be narrower than its
                 Float and Clear
   clear tells the browser what to do with the
    next element that comes after a floated element.
   If an element clears, it will start on the next line,
    not wrap around the floated element.
   You can clear:left, clear:right, or
   clear applies to the element occurring after a
    floated element, not to the floated element.
           Display vs. Visibility
   Be aware of distinction between display:none
    and visibility:hidden.
   Display:none collapses.
   Visibility:hidden takes up space.
      HTML De-<table>-fication
   <table> was always intended for tabular data.
   Originally HTML had little/nothing else
    available for laying out pages.
   <table> was purposed for this.
   <table> is reasonably easy to design and is
    rendered consistently by browsers.
   You don’t get weird bugs with table based
    layouts like you will with a <div> based layout.
            So why nix <table>?
   Return <table> to its intended purpose (yeah
    but why?)
   Allow machine readers (that’s Search Engines as
    well as assistive reader technologies) to read the
    page and interpret it correctly.
   Improve your search result rankings as table
    contents do not score as high in SEO as do
    properly marked up page content.
                 Getting there
   If you’re still in a world of <table> based
    layouts, you’re behind a few years.
   If you’re a complete newbie and are just getting
    the hang of HTML+CSS and aren’t doing
    anything serious, use <table> layouts for a
    while like training wheels.
   Get used to using CSS to control all
    presentational aspects and get good at that.
    Worry about making “proper” layouts later.
                 Getting there
   When you’re ready to transition from table to
    div layout…
   Hopefully you’re using a framework or CMS
    that does it for you already and you don’t have
    to worry. Find a template or whatever and go!
   If one does not exist exactly like what you want,
    find one that’s close, and tweak it.
                   Getting there
   If not using a CMS or framework, work into it.
   Start simple.
   Re-do your layout iteratively.
   Challenge yourself to use as FEW tables as possible.
    (Most <table> layouts use NESTED tables. The more
    nesting, the worse for accessibility.)
   Work on eliminating the inner tables first.
   Stick with fixed-width layouts until you’re really good.
    Fluid layouts are harder & not necessarily better.
             Using CSS Effectively…
   Selector Specificity
     Select only what you want
     Use a container and descendant selectors
          Efficiency
          Re-usability

          Avoid “leaking” (being too general with a selector
       Learn the “Cascade” and take advantage of it.
        Specificity and the Cascade
   Selector specificity:


   !important trumps all (except client overrides)
   Conflicting rules:
       Top score wins.
       Tie goes to last declared.
       Rules that don’t conflict accumulate.
              …And Efficiently
   Use lists of selectors to consolidate like blocks
   Use comments to explain what you’ve done and
           Common useful CSS
   CSS reset
   #ID Regions with descendant selectors and
    unstyled children
   Font size: what type of units?
   CSS Box model
              Clever/Cool CSS
   Transparency
   :hover effects
   Positioning
   Conditional rules
   Dynamic CSS with Javascript
   Combining multiple classes in one element.
   CSS sprites
   CSS3 Served fonts
               CSS for other media
   Not just for the screen!
   Printer – definitely use.
       Get rid of the “printable view” link. Test by printing to PDF
        or Print Preview; avoid wasting paper.
   Mobile Devices – maybe use.
       Hard to test for. Mobile devices vary widely, and most are
        still bad.
   Aural – for text-to-speech technologies.
       Consider using, especially if you are concerned with
   Look at your site with CSS turned off.
       If it’s readable and the placement of stuff makes
        sense, that’s a good sign that your HTML doesn’t
   Be sure your HTML uses a doctype
   and complies with it.
   Validate your HTML and your CSS.
    Dealing with non-standard browser
   Should you?
      If it breaks the site.
      If you’re being paid.

      If you’re a perfectionist.

      If you’re a masochist.

      Use web server stats to decide if it makes sense.
    Understanding browser-specific
   Accessibility/Usability
   Cosmetic
    If you have to address browser-
          specific problems…
   Try standards first.
   If standards-compliant CSS is handled differently by
    some browser… <cough>IE</cough>
        use a conditional stylesheet to handle it, rather than “one size
        fits all” code.
       Try to keep your browser-specific fixes short, isolated,
        commented, and tidy.
   Use tools to hone in on the problem.
       See Useful Tools slide coming up
                     Handling for IE6
   Eric asked… “What to do in IE6 vs. everything else”
       Tie a rock to it and drop it off the continental shelf
       Seriously, it’s 2010 FFS.
       Serve a warning to the user that their browser is unsafe for web browsing
        and recommend they upgrade use something else.
       If you absolutely must support IE6 for some reason…
       Make sure you have IE6 around to test with.
       Use IE conditionals to attach an IE6-specific .css that overrides the
        standard-compliant stuff if the user agent reports itself as IE6.
       Use hacks as a last resort.
            Many ways to do different stuff. Google for ideas. Come up with your own
             if you can do better.
        Recommended resources
   The Web
     W3Schools.com
     W3C.org

     www.css3.info

     www.d.umn.edu/itss/support/Training/Online/we
     A slew of web developer blogs, YMMV. Google &
A few good articles and resources
   http://jontangerine.com/log/2007/09/the-
   http://www.bigbaer.com/css_tutorials/css.imag
   http://www.bigbaer.com/css_tutorials/css.scale
   http://riddle.pl/emcalc/
   http://matthewjamestaylor.com/blog/perfect-
        Recommended resources
   Print
     Web Design in a Nutshell 3rd Edition (O’Rielly)
     CSS pocket reference (O’Rielly)

     HTML Utopia: Designing Without Tables Using
      CSS ISBN0-9752402-7-7
     CSS: The Missing Manual

     CSS: The Definitive Guide
                   Useful Tools
   Mozilla
     Web Developer Toolbar
     Firebug

     Validator extensions

     ColorZilla (color picker)

     MeasureIt (pixel ruler)
                      Useful Tools
   Safari tools
       Suggest any
   Chrome tools
       Suggest any
   IE
       IE Developer Toolbar
   Notepad++
             Awe and Inspiration
   www.romancortes.com – Godlike CSS.
       Pure CSS portraits of George W. Bush, Homer
        Simpson, other amazing CSS marvels.
   Your site here! Do something extraordinary.
   Teach this class.
   Improve this class.
   Create reference examples of various CSS
    properties and applications.
   Make a web site.
   Do something creative.
   Bring in a tricky problem you’re stuck on and
    get people to help you.

To top