Southern BITS of Technical Goodness

All of this (and prev blogs posts) information comes from 1 awesome source that I recommend you buy. CSS Mastery (Advanced Web Standards Solutions)

Get the cheet sheet! http://www.milkaddict.com/wp-content/uploads/2009/11/css-cheat-sheet-v2.png

 

Box Model: [LINK WC3 ]

All elements are rectangles with characteristics ( offset, margin, border, padding, width, height ) See firebug for an example:

• Margins are transparent (not seen), used to control spacing
• Border adds a line around the item
• Padding creates a gap around the item.

IE Boxing Model (ugh)

IE uses a non-standard boxing model. (IE < version 7) (quirks mode). Width property is considered equal to the SUM of the widths of: content, padding & borders. Standard boxing model indicates width is the width of the element. So for IE v6 & earlier, if you specify a width and then padding & border – the item’s width is reduced to accommodate the added widths of the padding / border.

Solution: Don’t specify padding/border width along with content width. Want to know more? Go here:

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

 

Margin Collapsing:

This blog gives a nice summary. http://www.milkaddict.com/css-margin-collapsing/ The idea is that the box model will have items above collapse the margins of items below. Elements contained within other elements will have their margins collapse before the outer margins do.

Whose margins collapse:

1. Inner elements collapse first (empty elements collapse in on themselves) – their margins fold.
2. Elements lower down on the page
3. Elements higher on the page

Block Level elements (block boxes) versus inline elements (inline boxes)

 

Block Level Elements are elements that are displayed as blockes or boxes of content:

• p
• h1
• h2
• div

Inline Elements are items that are displayed on one line (inline) such as:

• a
• strong
• span

The differences between these types is the DISPLAY property.

• display=block
• display=inline-block
• display=none /*no box at all*/
  

  Positioning

  3 different types of positioning in HTML:

1. normal flow (default) – based on position in HTML, left to right
2. floats
3. and absolute positioning
   

   Normal Positioning

   Inline Boxes = normal flow dictates left to right horizontal stacking

Block Boxes = normal flow dictates top down vertical stacking

 

from: http://www.mattryall.net/image/css-normal-flow.png

 

Relative Positioning

Allows the element to be positioned relative to its normal position. The element will continue to occupy the the original space (with or without the offset) – the implication can be overlap.

 

Absolute Positioning

Positioning is in relation to the nearest positioned ancestor (the tag in which it is nested).

Stacking (who is on top) can be controlled based on a z-index value. Higher the z-index, high up the box appears (more in front).

There is a bug in IE 5.5 & 6 when absolute position is set in relation to a relatively positioned element that DID NOT have dimensions set (IE just sets absolute in relation to canvas) – so set the dimensions.

Absolute positioned items are not considered part of the normal flow. They will not affect the layout of relative or normal flow positioned elements.

Fixed Positioning ( A subcategory of absolute )

The fixed element block is set relative to the viewport (window) and thus the element will always stay in the viewable window. (not supported by IE6 and below, IE7 partially supports it… There are workarounds [ugh])

 

Float Positioning

This is a complex and very important topic that you need to understand. That said, after reading it, I’ll refer you to some other sources as I don’t want to recreate what they have.

This site covers FLOAT & CLEAR: http://www.positioniseverything.net/easyclearing.html

I also recommend a framework that Erick Flemming and I are using on our project. The guy who wrote it is German, so you know it’s good ;-), YAML – Yet Another Multicolumn Layout.

 

YAML: Bulletproof & Flexible Layouts Made Simple

http://www.yaml.de/en/home.html 

"Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

He even has a solid YAML BUILDER. http://builder.yaml.de/

alan.huffman CSS, HTML, Web Development CSS, HTML, Web Development

Depending on your preference, you either love or hate CSS. Either way you better know it. Let’s cover some basics.

Cascading refers to the nature of the selection. Styles are applied using the following prioritization:

• User styles flagged as !important
• Author styles flagged as !important
• Author styles
• User styles
• Styles applied by the browser/user agent

Calculating Specificity

Given that elements are often select by more than one selector, the applied style is the more specific of the two. Specificity is calculated based on the following rules (note calculation is NOT base 10).

There are 4 levels of constituent levels: a, b, c and d.

 

• If the style is an inline style, a = 1
• b = total # of ID selectors
• c = the number of class, pseudo-class & attribute selectors
• d = the number of type selectors & pseudo-element selectors

Few quick examples:

Style	Specificity Value	Specificity
Style="color:red;”	1,0,0,0	Highest
#foo #bar {}	0,2,0,0
#foo .bar {}	0,1,1,0
a#foo{}	0,1,0,1
p.foo .bar{}	0,0,2,1
p.bar{}	0,0,1,1
div a{}	0,0,0,2
a {}	0,0,0,1	Lowest

 

CSS Inherited Styles:

Styles are inherited by more general rules when not specified for an element by a more specific selector. Remember that the browser applied styles to specific elements – so they (h1,h2,…) will often not inherit values if a style did not specifically target them.

**Note: Any style applied to a specific element will override any inherited style.

Common Selectors

Classes versus ID’s

html:

<a id=”Name” …

<a class=”Name” …

css:

.Name = class “Name”

#Name = id “Name”

 

Pseudo-classes

css:

/* make all unvisited links blue */

a:link{color:blue;}

/* visited links green */

a:visited{color:green;}

/* makes links  red when hovered or activated, focus for keyboards */

a:hover, a:focus, a:active, {color:red;}

/* makes table rows red when hovered over */

tr:hover{background-color: red;}

/* makes input elements yellow when focus is applied */

input: focus {background-color:yellow;}

** Note: :link and :visited are LINK psuedo-classes and can only be applied to “<a “.

** Note: :hover, :active, and :focus are DYNAMIC psudo-classes and can be applied almost everywhere (though IE6 & IE7 are quirky).

 

 

Universal Selector

Apply styling to everything on a page.

/* remove all padding & margins */

*{

padding: 0;

margin: 0;

}

 

Advanced Selectors

Supported by most modern browsers (not IE6). If a browser doesn’t support a rule/feature, the whole rule is ignored. Child selector is supported in IE7 (unless there are comments between the parent & child)

1. child: #nav>li
2. sibling: h2 + p
3. attribute: acronym[title]

CHILD: #nav>li

css

/* list items that are nested in the #nav ID will have this rule applied */

#nav>li{

background: url(folder.png no-repeat left top;

padding-left: 20px;

}

html

<ul id=”nav”>

<li> A <!—will be applied –> </li>

<li> B <!—will be applied –>

      <ul>

          <li> C <!—will not be applied –> </li>

          <li> D <!—will not be applied –> </li>

      </ul>

</li>

</ul>

 

SIBLING: h2 + p

h2 + p would look for a paragraph that follows an h2.

<h2> Hey! </h2>

<p> This is what that selector would apply to </p>

 

ATTRIBUTE: acronym[title]

When you hover over an element with a title attribute most browsers will display a tooltip.

acronym[title]: hover, acronym[title]:focus{ cursor: help; }

<p> A < acronym title=”DataBase Admin”>DBA</acronym> is not a fun job </p>

alan.huffman CSS, HTML, Web Development CSS, Web Development

Due to the lack of HTML elements, several HTML / CSS Microformats have been adopted w/ many draft formats in play. They have an official ORG HOME: http://microformats.org/  :: about (http://microformats.org/about)

1. hCalendar for dates, calendars & events
2. hCard for people and organizations
3. XFN for relationships between people
4. hProduct for product descriptions (draft)
5. hReview for product and event reviews (draft)
6. … (many more)

Check out the wikipedia article on them: http://en.wikipedia.org/wiki/Microformat

alan.huffman CSS, HTML, Web Development CSS, HTML, Microformat, Web Development