Intermediate CSS Techniques

CSS Basics

Getting Into CSS

You all should have a basic understanding of CSS and how it transforms XHTML. If you don't, that's what Lesson X is for. Hop back in and review the basic concepts if you find yourself struggling.

The terminology can be tough to remember since though we practice this stuff, we don't usually talk about it. Let's take a quick look at the parts of a CSS rule:

rule

the smallest independently working part of a Cascading Style Sheet, the rule contains a selector and a declaration block.

selector

the selector indicates what element(s) on the page will be modified by the current rule. A selector may include one or more XHTML elements, pseudo-elements, classes, or ids. It can also specify relative position in the XHTML hierarchy through descendants and children.

declaration block

the declaration block contains one or more declarations. The declaration block encloses declarations with the curly braces: {}

declaration

a declaration modifies the appearance of the selector by defining the value of a CSS property. It states what part of an element will be transformed, and how.

property

property defines what part of the element will be transformed

value
value defines how a property of an element will be transformed.

Before we get into techniques, let's cover a couple intermediate CSS concepts:

CSS Selectors and Selector Targets

Selector Elements

Because selectors can contain a variety of different element targets, let's define the terms we use to refer to these different targets in a selector:

type
A type selector refers elements found in basic XHTML markup such as the body element or the p element. In CSS syntax, one uses a type selector to refer to a XHTML element simply by using the element's name, e.g:
				body { background: black; color: white }
				p { font-family: Georgia,serif }
			
class

a class is a XHTML attribute available to any XHTML element. It marks the current element as part of a class, or series of elements with something in common.In CSS syntax, class is specified by . (period) before the class value, e.g.

			.alert { color: red }
			pre.poem { font-family: Georgia,serif }
			
id
An id is a XHTML attribute available to any XHTML element. It marks the current element as unique on the current page. In CSS syntax, id is specifed by # (pound) before the id value, e.g.

				body#home { background: #000; color: #fff }
				#nav_menu { list-style-type: none }
			
pseudo-class
Pseudo-classes are used to add special effects to some selector elements based on status of the element. Pseudo-classes follow the element and are preceded by the : (colon), for example:
				a:hover { color: red }
			

The pseudo-class :hover specifies that the a element is to turn red when the link is hovered/moused over.

The W3C has specified the following pseudo-classes:

:active
Adds special style to an activated element
:focus
Adds special style to an element while the element has focus
:hover
Adds special style to an element when you mouse over it
:link
Adds special style to an unvisited link
:visited
Adds special style to a visited link
:first-child
Adds special style to an element that is the first child of some other element
:lang
Allows the author to specify a language to use in a specified element

Note: Not all pseudo-elements are supported by all Web browsers.



pseudo-element
Pseudo-elements are used to add special effects to some selector elements based on a part of the element. Pseudo-classes follow the element and are preceded by the : (colon), for example:
			p:first-line { font-weight: bold; }
			p.drop_cap:first-letter { display: block; float: left; font-size: 250%; }
			

The first rule sets the first line of any paragraph element to appear bold. The second rule sets the first letter of any "drop_cap" class paragraph to be 2.5x as large, and floated to the left of the rest of the paragraph text.

The W3C has specified the following pseudo-elements:

:first-letter
Adds special style to the first letter of a text
:first-line
Adds special style to the first line of a text
:before
Inserts some content before an element
:after
Inserts some content after an element

Note: Not all pseudo-elements are supported by all Web browsers.



grouping

a CSS selector may contain a grouping of more than one elements, such as types, classes, ids, pseudo-classes, pseudo-elements, etc., each separated by a , (comma). For example the following 3 CSS syntax, in individual rules:

			h1 { color: navy }
			h3 { color: navy }
			h5 { color: navy }
			

is functionally equivilant to the following shorthand grouping syntax in one rule:

			h1,h3,h5 { color: navy }
			
Parent/Child/Descendant Selector Elements

Selectors also allow us to refer to targets in terms of their relative hierarchical relationship in the XHTML:

child
a XHTML element is a child if it is directly contained by another element. For example:
	<ul id="fruit">
		<li><a href="#">Apples</a></li>
		<li><a href="#"><strong>Oranges</strong></a></li>
	</ul>
	

Both li elements are child elements of the ul element. Each a element is only a child element of their respect li element. The strong element is only a child of it's respective a element.

The child relationship is specified in CSS syntax by use of the > symbol in the selector, e.g.:

	li > a { color: #fff }
	

This selector specifies that only a elements that are direct children of the li element will be color: #fff

parent

a XHTML element is a parent if it directly contains one or more other XHTML elements. For example:

	<ul id="fruit">
		<li><a href="#">Apples</a></li>
		<li><a href="#"><strong>Oranges</strong></a></li>
	</ul>
	

The ul element is the parent of the li elements. Each li element is a parent of the respect a elements. Only the second li element is a parent of the strong element.

descendant

While a child element is directly contained by another element, a descendant element is an element contained directly or indirectly by another element. All child elements are also descendant elements of the parent, but not all descendant elements are child elements of the parent. For example:

	<ul id="fruit">
		<li><a href="#">Apples</a></li>
		<li><a href="#"><strong>Oranges</strong></a></li>
	</ul>
	

Both li elements, both a elements, and even the strong element are all descendants of the ul element. The a elements are also both descendants of their respective li elements. The strong element is a descendant of the second li element.

The descendant relationship is specified in CSS syntax by use of a space between elements, classes, or ids in the selector, e.g.:

	ul#fruit a { color: #fff }
	

This selector specifies that any a elements that are in anyway contained within the body element will be color: #fff. Here's another example:


	ul#fruit a > strong{ color: #000 }
	

This selector specifies that only strong elements that are direct children of the a element AND are somehow contained by the ul#fruit are to be color: #000