Archive for the 'CSS' Category

CSS Vocabulary

Thursday, June 29th, 2006

I took a class a long time ago on CSS. The instructor kept saying “sheet styles.” I’ve said “alt tags” before I realized how wrong that was. So here I am arming myself and others with the right words.

Attributes: properties of HTML elements.

href
title
class

Rule, selector, property, value, declaration:

Diagram of a CSS Rule

Linked stylesheet:

Linked

or

import

Embedded stylesheet:

p { padding-top: 1em;}

Inline stylesheet:

Inline

Attribute selector: style based on attribute, title, href, class or value of that attribute; uses “square brackets.”

h1[title] { color: #f00; }

Child selector: style elements that are direct descendants of another element; selectors are separated by “greater-than symbol.”

h1 > span { color: #ccc; }

Adjacent sibling selector: style elements according to an element that precedes them; selectors are separated by “plus symbol.”

h1 + p { color: #aaa; }

Class selector: rule(s) for an element(s) put all together and can be called with a name. Can be used more than once.

p.story { padding-top:2em; color:#ddd;}

ID selector: rule(s) for an element put all together and given a name. Can be used only once per page.

#sidebar { border:1px solid #ddd;}

Contextual selector: two or more simple selectors separated by space.

p b { color: #f00; }
would make the bolded items under paragraphs be a red color and the rest of the paragraph is a normal color.

Grouping: when selectors have the same declarations

h1, h2, h3 { color: #f00; }

Making Complex CSS Simple!

Friday, February 25th, 2005

Making Complex CSS Simple! looks very promising. And the way it’s presented is interesting. I’ve seen slide show type presentations using a browser and not PowerPoint before but not for an online tutorial. (tip)

Zeldman Video

Tuesday, November 23rd, 2004

Zeldman‘s keynote on web standards… from afar.

CSS Tab Menus

Friday, August 8th, 2003

Kalsey’s CSS Tabs with rounded corners and this looks familiar.