Advanced CSS Beyond Simple Classes

Document Sample
Advanced CSS Beyond Simple Classes Powered By Docstoc
					   Advanced CSS:
Beyond Simple Classes



        Katya Sadovsky
        katya@uci.edu




    University of California  Irvine
      University of California, Irvine

•   Located in Southern California
•   Year Founded: 1965
•   Enrollment: over 24K students
•   1,400 Faculty (Academic Senate)
•   8,300 Staff
•   6,000 degrees awarded annually
•   Carnegie Classification: Doctoral/Research – Extensive
•   Extramural Funding - 311M in 2005-2006
•   Undergoing significant enrollment growth


                     University of California  Irvine
                           Agenda

• Brief overview of the Cascading Style Sheets (CSS) 2
  syntax
• Selectors & cascading
• Block vs Inline elements
• CSS box model
• Element presentation: float, position, etc.
• Generated content
• Tips and tricks


                    University of California  Irvine
                  What is CSS

• Cascading Style Sheets, or CSS, are a series of
  instructions that specify how markup elements
  should appear on a Web page.
• For the purposes of this presentation, I will focus on
  CSS level 2 specification.




                 University of California  Irvine
          The Sad Truth About IE

• Internet Explorer (even IE7) is still not CSS
  compliant
• Some of the areas not supported:
   – Child selectors
   – Attribute selectors
   – Counters




                   University of California  Irvine
                     Brief overview
                  of the CSS2 syntax
Ruleset syntax:
selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*

       S* = [ \t\r\n\f]+
       declaration = property ':' S* value;


Example:             selector

.uportal-text-small {                                   declaration
  color : Black;
  font-family : Verdana, Geneva, Arial, Helvetica;
  font-size : 10px; }

       property

                    University of California  Irvine
              Selectors & cascading
• Selectors are a way to match styles to elements in the document
  tree
• Different types of selectors:
   –   Universal selector
   –   Type selectors
   –   Descendant selectors
   –   Child selectors
   –   Adjacent sibling selectors
   –   Attribute selectors
   –   ID selectors
   –   Pseudo-elements
   –   Pseudo-classes
• Spaces matter!
   – P#myid – selects a P element with id equal to “myid”
   – P #myid – selects an element with id equal to “myid” that is a
       descendant of P

                         University of California  Irvine
                               Selectors & cascading
            Pattern                                                           Meaning

*                               Universal selector: matches any element.
E                               Type selector: matches any E element (i.e., an element of type E; e.g. H1 or P).
EF                              Descendant selector: matches any F element that is a descendant of an E element.
E>F                             Child selector: matches any F element that is a child of an element E.
E+F                             Adjacent siblings selector: Matches any F element immediately preceded by an element E.

E[foo]                          Attribute selector: matches any E element with the "foo" attribute set (whatever the value).

E[foo="warning"]                Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "warning".

                                Attribute selector: matches any E element whose "foo" attribute value is a list of space-separated
E[foo~="warning"]
                                values, one of which is exactly equal to "warning".

                                Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list of
E[lang|="en"]
                                values beginning (from the left) with "en“ (e.g. en-US).

DIV.warning                     HTML only. The same as DIV[class~="warning"].
E#myid                          ID selector: matches any E element ID equal to "myid".
                                Pseudo-class selector: matches element of type E if it is in (human) language c (the document
E:lang(c)
                                language specifies how language is determined).

E:first-child                   Pseudo-class selector: matches element E when E is the first child of its parent.

                                Pseudo-class selector: matches element E if E is the source anchor of a hyperlink of which the
E:link, E:visited
                                target is not yet visited (:link) or already visited (:visited).

E:active, E:hover, E:focus      Dynamic Pseudo-class selector: matches E during certain user actions.

E:first-line, E:first-letter    Pseudo-element selector: matches the first formatted line or letter of element E.

                Works in most browsers (incl. IE)
                                           University of California  Irvine
        Cascading and Inheritance

•    When there are multiple rules that could apply to
     the same element and/or property and media
     type, sort declarations on ():
    1. Weight (normal, !important) and origin (author, user,
        user agent)
        normal: author -> user -> user agent
        !important: user -> author -> user agent
        NOTE: user agents supply a “default” style sheet
    2. Selector specificity: more specific selectors have
        precedence
    3. Order specified: styles specified later in the order
        have precedence
                      University of California  Irvine
       Cascading and Inheritance

• A simplified view of the preceding “formula”:


                      STYLE attribute

                               overrides


                       <STYLE> block

                               overrides


                     Linked stylesheet

                               overrides


                    Imported stylesheet




                 University of California  Irvine
         Logical vs Physical Tags

• “Logical” tags convey the structure and semantic
  information of the document (H1-H6, P, STRONG)
• “Physical” tags specify the visual presentation of
  document elements but do not convey the meaning of
  the document or its parts (B, U, FONT, BR)
• Do not use physical tags to solely describe the visual
  presentation of content (be mindful of alternative user
  agents such as speech readers or text-only browsers)




                  University of California  Irvine
         Block vs Inline elements

• Block-level elements are presented visually as blocks;
  i.e. they generate a line break before and after
  themselves (<p>, <ul>, etc)
   – Can contain other block-level and inline elements
   – Act as containing blocks for nested elements
• All other elements, are inline elements; no line breaks
  are generated before and after (<span>)
   – Cannot contain other block-level elements
• “Replaced” elements are those that are replaced by the
  content they point to (<img>, <applet>, etc)


                  University of California  Irvine
                       CSS box model
                                   margin

                                  padding




                                  content




                                     border




Also, see 3D diagram at http://www.hicksdesign.co.uk/journal/3d-css-box-model

                        University of California  Irvine
        Containing & Anonymous
              block boxes
• Block boxes can serve as containing blocks for child
  boxes
   – Note: if a block box has another block box inside it,
     then they are forced to have only block boxes inside it,
     by wrapping any inline boxes in an anonymous block
     box

     <div> some text
       <p>paragraph</p> other text
     </div>




                   University of California  Irvine
                Notes on boxes

• There are cases when adjacent margins collapse
• Relative positioning is calculated with respect to the
  content edge




                 University of California  Irvine
            Positioning schemes

• Positioning schemes in CSS include:
   – Normal flow (includes relative positioning)
   – Floating
   – Absolute positioning




                   University of California  Irvine
                        Floating

• float property allows element boxes to be shifted to
  the right or left on the current line
   – Floated boxes are block boxes
   – Floated boxes are “pulled out” of the normal flow and
     repositioned
   – Must have explicit width
   – May overlap other boxes
• clear property specifies which side(s) of an element
  should NOT be adjacent to a floating box that is
  specified earlier in the document

                  University of California  Irvine
           Relative and Absolute
                Positioning
• position property:
  – static – box is positioned according to normal flow
  – relative – box is positioned relative to where it would
    have been placed in the normal flow
  – absolute – box is positioned relative to its containing
    block; these boxes are taken out of flow
  – fixed – box is fixed in relation to the viewport (a
    browser window or a printed page)




                  University of California  Irvine
            Element presentation

• display property controls what type of box is
  generated for an element
   – Values:
     inline | block | list-item | run-in | compact | marker |
     table | inline-table | table-row-group | table-header-
     group | table-footer-group | table-row | table-column-
     group | table-column | table-cell | table-caption | none |
     inherit




                   University of California  Irvine
             Generated content

• CSS allows authors to generate content that is not
  part of the document tree using the following
  entities:
   – :before pseudo-element
   – :after pseudo-element
   – content property




                  University of California  Irvine
                     Tips and tricks

• Trick for extending a DIV over floating child divs:
   – IE:
      div.main {
          height: 100%;
          …
      }


   – Firefox:
      div.main:after {
          content: "";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
      }
                      University of California  Irvine
                       Useful URLs

• CSS resources:
   – http://www.w3.org/TR/REC-CSS2/
   – http://www.yourhtmlsource.com/stylesheets
   – http://meyerweb.com/eric/css/
   – http://webtips.dantobias.com/logical.html
   – http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm
   – http://www.w3.org/2005/Talks/11-steven-css-advanced/
   – http://www.hicksdesign.co.uk/journal/3d-css-box-model
   – http://greystate.dk/resources/css-boxmodel/
   – http://www.csszengarden.com/?cssfile=062/062.css

                      University of California  Irvine