Workshops

Web 3: References

Tags Used in This Workshop

Styles Used in This Workshop

Styling Lists

Concepts

Syntax

Unordered Lists
ul {
  list-style-type: disc | circle | square | none 
}
Ordered Lists
ol {
  list-style-type: upper-roman | lower-roman | upper-alpha | lower-alpha | decimal | none
}

Examples

ul {
	list-style-type: square;
}
ol {
	list-style-type: lower-roman;
}

Tips

Don't set the style on li because that affects both ordered and unordered.

Margins, Borders and Padding

The Box Model

CPBM (going from inner to outer): Content, Padding, Border, Margin

The space occupied by each content block includes any space for padding, border, and margin.

All are added together when calculating how much can fit within the viewport of the browser

Margin and Padding

Where: n is a number followed by a unit of measurement

Padding takes the same form

Border

Where:

Different browsers will render some of the styles differently.

Float and Clear

Float

float: left | right

Disrupts normal document flow; other elements flow around the floated element. Only works on block-level elements

Clear

clear: left | right | both | none

The next block-level element will appear below other block-level elements that are floated left or right or both.

Use this to ensure that the next block element does not flow alongside previous elements.

Usually used to make sure images don't stack up alongside one another (or tables or lists).

Group Selectors

Usage

Use group selectors when you want to apply the same style(s) to more than one element at once.

Syntax

List elements separated by commas. The order of the list does not matter.

Example

h1, h2, h3, h4 {
  color: #800;
}

This will make headings 1 through 4 read, but heading 5 and heading 6 will not be affected.

Descendant Selectors

Usage

Use a descendant selector when you want to scope the effect of a style to a specific circumstance; namely, when one element is the descendant of another element. The parent element must be block-level. The descendant can be at any level; that is, it does not need to be a direct child. As long as the descendant is contained anywhere within the containing element, the style gets applied; otherwise, not.

Syntax

Elements separated by a blank space. You can have more than two. In such case, the third element is the grandchild of the first.

Example

p em {
  color: #c00;
  font-weight: bold;
}
div.content td li {
  font-size: .8em;
}

In the first example, any use of emphasis within a paragraph tag will result in bright red, bolded text. Text marked with emphasis elsewhere (e.g., in a table or a list) will not be red and bold.

In the second example, all list items that are inside a table cell that is in turn part of the content div will be in a smaller font size. List items that are inside the content div but not inside a table will be normal size.

Classes and ID

Usage

Classes allow you to assign a name to the use of an element. The style then takes effect only when the named instance of the element is invoked.

Classes may be used multiple times in a given document. IDs must be unique within a given document. It's perfectly permissible to use classes only once in a document. Using an ID multiple times in a document is not conformant, though in all current browsers it will still work. It is up to you, therefore, to follow good practice.

Syntax

Classes are created in the stylesheet by use of a period. In the document, they are invoked by style="name".

IDs are created in the stylesheet by use of a pound sign. In the document, they are invoked by id="name".

Names are case sensitive and cannot begin with a number or contain a space.

Example of Class

In the stylesheet
p.notation {
  font-size: .8em;
  font-style: italic;
}
In the HTML
<p class="notation">Lorem ipsum....</p>

Example of ID

In the stylesheet
h1#pagehead {
  color: #900;
  font-size: 210%;
  text-align: center;
}
In the HTML
<p id="pagehead">Department Name</p>

Links

http://www.w3.org/TR/REC-CSS2/
The official specs, at the W3. Not for the weak! but if you need the official word and all the gory details, here's where to go.
http://www.w3schools.com/css/
A reasonably good tutorial from W3Schools
http://www.htmldog.com/reference/cssproperties/
Good reference material here, but elsewhere at the site are some tutorials as well.
http://meyerweb.com/eric/css/
Eric Meyer is one of the people who wrote the spec. His website is a good example of what can be done with CSS.
http://css-discuss.incutio.com/
CSS-discuss is the best discussion list for stylesheets. This wiki holds the collective wisdom of that ongoing dialog.