CSS Bootcamp

Document Sample
CSS Bootcamp Powered By Docstoc
					CSS Bootcamp
           Module Two
More selecting, Intro to positioning
        January 30, 2007
                    Contextual selectors

                  div p { color: red; }
                  Can be read as “any p element that is a
                  descendant of (can be found within) a div, will
                  have the following applied.”

Use these to drill down into containers and select individual selectors that are only contained in such
a container.
         Nested selectors
                     The HTML containment hierarchy

           <title>                                    </title>


  <h1>                                                           </h1>


     <a>                  </a>
 Span, one more time

• To select a piece of the paragraph in a
  container code...
span { font-weight: bold;}
<span>Person’s Name</span> will be bold.
                  Pseudo-class selectors


The p: first-child is for selecting the first child inside a parent element - useful for selecting the first
paragraph in a story for applying a drop cap or other style.

first-child and focus are not fully supported by IE (6 and below).
                  Pseudo Selectors - links

                 the    selector     for   normal links is a:link
                 the    selector     for   visited links is a:visited
                 the    selector     for   hover links is a:hover
                 the    selector     for   active links is a:active
                 a:link { color: blue;}
                 a:visited { color:red; text-decoration: none;}

hover not supported in Netscape Navigator 4.x
code turns a visited link red and turns the underline off.
so you can now make mouseover buttons by changing the state of a li made into a button.

IE 6 and below only does :active and :hover if applied to an anchor link.
                 Pseudo Selectors - links
                 Link and link pseudo class
                 selectors should always appear in
                 your style sheet in the following
                 If your hover and active states don't work, this is
                 probably why.

                                    a:link {}
                                    a:visited {}
                                    a:hover {}
                                    a:active {}

LoVe HAte
or Lord Vader Had been Anakin
     IDs and Classes

We need a way to make-up our own
selectors for complicated stuff.
                          IDs and Classes

                 Adding identifying attributes to an
                 element allows you to style them later.
                 • IDs can only be used once per page
                 • Classes can be used as often as you want

We are many in class, but each of us only has one ID on us.
                          IDs and Classes

                 <p id=”introText”>Introduction</p>
                 <p class=”bodyText”>Body Text</p>
                 <p class=”bodyText”>Body Text</p>

We are many in class, but each of us only has one ID on us.
    Using IDs and Classes to tell
        one A from another
     Adding identifying attributes to an element allows you
     to style them later.
       • A class is a resuable attribute
       • An ID is a unique attribute, only once per page
     • You can apply both a class and an ID to an element
     • You can name them anything (alphanumerical), but
       don’t start with a number, and consider them case-
<div id=”content”><p class=”bodytext01”>Body Text</p></div>
      IDs and Classes
IDs are styled with hashes:
 #mainContent {color: blue;}

Classes are styled with periods
 .bodyText {color: black;}
         ID attributes -

Should appear just once in a doc - for
instance a sidebar, header or footer

<div id=”header”><h1>Header</h1></div>
#header { background-color: #f00;}
      Class attributes -

Can appear however often you like
<p class=”className“>My Name</p>
.className { font-weight: bold;}
                         How tag, id and class
                       selectors interact, part 1
             .coloredHeader { color: blue;}
             h1 { color: red;}

             <h1 class=”coloredHeader”>Header</h1>

                     What color will the header be?

Even tough the h1 comes last in a list of styles, a class is more specific, and so takes precedence.

We’ll go over this in more detail when we talk about the cascade but just remember:
A style applied with a class or ID will override a style applied with a simple selector.
     How tag, id and class interact - a
        glimpse into specificity
.coloredHeader { color: blue;}
h1 { color: red;}

<h1 class=”coloredHeader”>Header</h1>

Even tough the h1 comes last in a list of styles, a
class is more specific, and so takes precedence.

We’ll go over this in more detail when we talk about
the cascade but just remember:
A style applied with a class or ID will
override a style applied with a simple
                          The cascade:

              • Order of operations, which rules apply
              • specificity ( spes   fis d )

specificity ( spes   fis d )
         External CSS
        p {
        color: red;

                             CSS in body head
                             p {
                             color: red;
                             }                           Style in the
                                                        element’s tag
                                                         <p style=”
                                                         color: red;”>
                                                         Red text</p>

In specific terms CSS is either in an external stylesheet, in the head of your HTML
document, or inline, as a style attribute in an HTML Element’s tag. But in more general
terms - where is CSS?
          @import in the HTML Head



@import comes first
can load more than one style sheet
you can choose to comment the styles (inside the style tag) to hide
from very old browsers <!-- here --!>
          The Cascade
   External (if the link tag calling it is above the @import)

  The imported style sheet
 The styles in the head
Styles in HTML tags
                              The Cascade

       • Style sheets may have three different origins: author,
          user, and user agent.
          • Author. The author specifies style sheets for a source document according to the
            conventions of the document language. For instance, in HTML, style sheets may be
            included in the document or linked externally.
          • User: The user may be able to specify style information for a particular document. For
            example, the user may specify a file that contains a style sheet or the user agent may
            provide an interface that generates a user style sheet (or behaves as if it did).
          • User agent: Conforming user agents must apply a default style sheet (or behave as if
            they did). A user agent's default style sheet should present the elements of the document
            language in ways that satisfy general presentation expectations for the document
            language (e.g., for visual browsers, the EM element in HTML is presented using an italic

See A sample style sheet for HTML for a recommended default style sheet for HTML
         The Cascade

• Style sheets from these three origins will
  overlap in scope, and they interact
  according to the cascade.

• The CSS cascade assigns a weight to each
  style rule. When several rules apply, the one
  with the greatest weight takes precedence.
         The Cascade

• By default, rules in author style sheets have
  more weight than rules in user style sheets.
  Precedence is reversed, however, for "!
  important" rules. All user and author rules
  have more weight than rules in the UA's
  default style sheet.
    The Cascade order
1. Find all declarations that apply to the element and property in question,
for the target media type. Declarations apply if the associated selector
matches the element in question.
2. Sort according to importance (normal or important) and origin (author,
user, or user agent). In ascending order of precendence:
      1.user agent declarations
      2.user normal declarations
      3.author normal declarations
      4.author important declarations
      5.user important declarations
3. Sort rules with the same importance and origin by specificity of
selector: more specific selectors will override more general ones. Pseudo-
elements and pseudo-classes are counted as normal elements and classes,
4. Finally, sort by order specified: if two declarations have the same weight,
origin and specificity, the latter specified wins. Declarations in imported
style sheets are considered to be before any declarations in the style
sheet itself.
CSS attempts to create a balance of power between author and user
style sheets. By default, rules in an author's style sheet override those
in a user's style sheet (see cascade rule 3).
However, for balance, an "!important" declaration (the delimiter token
"!" and keyword "important" follow the declaration) takes precedence
over a normal declaration. Both author and user style sheets may
contain "!important" declarations, and user "!important" rules override
author "!important" rules. This CSS feature improves accessibility of
documents by giving users with special requirements (large fonts, color
combinations, etc.) control over presentation.
Declaring a shorthand property (e.g., 'background') to be "!important" is
equivalent to declaring all of its sub-properties to be "!important".
Some more specifity numbers
Style = “...”            1000
#ID #ID                   200
#ID .class                110
div #ID                    101
#ID                        100
div.class .classSecond      21
div.class                    11
div p                         2
p                              1
              • If two or more style rules have the same
                  importance, origin and specificity, the rule that
                  is specified last wins.

                  The browser default stylesheet is treated as if it is an
                  imported stylesheet imported before all others in a
                  Imported style sheets are cascaded depending on their
                  import order, and are considered to exist before the
                  style sheet that imported them.

‘Before’ in this case has less priority, so an ‘embedded style sheet imports styles that in can override.
Just remember
  this much:
• A rule written in a style attribute will
  always rule.

• A rule with an ID will be more specific than
  one without an ID

• A rule with a class selector will be more
  specific than a rule with just type selectors.

• If 2 rules have the same specificity, the last
  one defined rules.

• CSS inheritance works on a property by
  property basis.

• When applied to an element in a document,
  a property with the value 'inherit' will use
  the same value as the parent element has
  for that property.
                 .container {
                   background-color: white;
                   color: black;

                 .text {
                   background-color: inherit;
                   color: inherit;
                   font-weight: normal;

                 <div class="container">
                   <p class="text">
                     A very short paragraph!

The background colour of the div element is white, because the background-color property is
set to white. The background colour of the paragraph is also white, because the background
colour property is set to inherit, and the background colour of the parent element (the div) is set
to white.

The inherit value does not require that the parent element have the same property set explicitly;
it works from the computed value. In the above example, the color property of the paragraph
has a value of "inherit", but the computed value is "black" because it inherits.
Suppose there is an H1 element with an emphasizing element
(EM) inside:
<H1>The headline <EM>is</EM> important!</H1>

If no color has been assigned to the EM element, the
emphasized "is" will inherit the color of the parent element, so if
H1 has the color blue, the EM element will likewise be in blue.
When inheritance occurs, elements inherit computed values.
The computed value from the parent element becomes both
the specified value and the computed value on the child.
An element A is called the child of element B if and only if B is the
parent of A.
An element A is called a descendant of an element B, if either (1) A is
a child of B, or (2) A is the child of some element C that is a
descendant of B.
An element A is called an ancestor of an element B, if and only if B is
a descendant of A.
An element A is called a sibling of an element B, if and only if B and A
share the same parent element. Element A is a preceding sibling if it
comes before B in the document tree. Element B is a following sibling
if it comes after A in the document tree.
Preceding element
An element A is called a preceding element of an element B, if and
only if (1) A is an ancestor of B or (2) A is a preceding sibling of B.
                          The 'inherit' value
                A property may have a specified value of 'inherit', which means that, for a given element, the
                property takes the same computed value as the property for the element's parent. The 'inherit'
                value can be used to strengthen inherited values, and it can also be used on properties that are not
                normally inherited.

                If the 'inherit' value is set on the root element, the property is assigned its initial value.

                In the example below, the 'color' and 'background' properties are set on the BODY element. On all
                other elements, the 'color' value will be inherited and the background will be transparent. If these
                rules are part of the user's style sheet, black text on a white background will be enforced
                throughout the document.

                body {
                  color: black !important;
                  background: white !important;

                * {
                  color: inherit !important;
                  background: transparent !important;

Two new things - the universal selector and the !important
         Don’t redeclare
         inherited values
The values of many properties are inherited by any
descendants of the element that you specify the
property for. color and the font related properties
are the most common examples of such properties.
Be aware that some properties may be overridden by
browser specific user agent style sheets, i.e. the
browser’s defaults. That’s why you can’t make all
headings non bold with the following rule:
   body { font-weight:normal; }
Just remember
  this much:
• Certain properties are inherited from
  ‘ancestor’ elements. Things like font color
  and size.

• Any style applied directly to an element,
  overrides inheritance. Inheritance has a null

• Keep in mind the browser applies style by
  default (like size to headers) so ...

• body { font-size : 12px; } isn’t going to make
  all the headers 12px
Exercise in styling with
 descendant selectors
                        Basic positioning


IE6 and below do not support fixed positioning
     Basic positioning

Before we position things we need to:
structure our HTML,
learn how to apply boxes to that structure,
learn how the box works.
 Structuring your HTML

Remember to structure your
HTML according to what a
section is, rather than where
it is.
     Structuring your HTML
<div id=”pageContainer”>

<div id="header">Header</div>
<div id="content">Content</div>
<div id="mainNavigation">navigation</div>
<div id="footer">footer</div>

Intro to boxes, backgrounds
        and borders

Every selector (element) can
have a box around it.
Padding, margins and
The CSS Box Model
Margins and Padding

                  div {

Padding (or margin, border etc.) properties
The “clock” and its

             div {
             margin: 10px 10px 10px 10px;
             padding: 10px 10px 10px 10px;

Padding holds the background

‘the clock’ or clockwise order of values on the sides of the box.
      div {
      padding:10px;         All padding is 10px

      div {                  Top & bottom padding is 10px
      padding:10px 20px;
                             left & right padding is 20px

      div {                   Top is 10px
      padding:10px 20px 20px; left & right is 20px
                                 bottom is 20px

The clock.
            The universal selector
            margin: 0;
            padding: 0;
            Will select every element. Used to zero out
            any browser ‘gutter’
            (Note there is no unit)

We don’t need a unit value when the value is zero.
                  Absolute positioning
                  An absolutely positioned element.

            0 10 20 30 40 50 60 70 80 90 100
       20                                      div {
       30                                      width: 10px;
       40                                      position: absolute;
                                               top: 0;
                                               left: 0;
       60                                      background-color:red;
       70                                      }

Can also be o set by bottom or right
     Absolute positioning

Other elements in the flow of the document
will act as though the absolutely positioned
element was never there.
An absolutely positioned element is
positioned in relation to its nearest
positioned ancestor.
                 Absolute positioning

            If an absolutely positioned element has no
            positioned ancestors, it will be positioned in
            relation to the initial containing block - like
            the HTML element (or the browser window).
            Since your positioning things where other
            things might be, and they don’t move to make
            space, you can get overlap.
            Which is why we have a z-index too.

Higher the z, the higher the box in the stack
Exercise - rebuilding a
   table-based site
• Structuring the HTML
• making the boxes
• coloring and padding
• putting them in place
• fixing browser or spacing issues