Tutorials, extensions, and source files for ActionScript, Flash, and other Adobe products.

 

Basics of Style Sheet (Source) Format

Key: Style sheets HTML

The general format for styles in a style sheet is:

selector { declaration }

The selector portion of a style definition represent one or more comma separated (simple) selectors that is styled with the declaration. When more than one is used, it is known as a group. Many different styles can be defined this way in a single style sheet styling many different parts of a document.

The declaration block, the content within the curly braces ({}), is one or more semicolon separated declarations. A declaration is a property-value pair describing a specific style. Properties of a style describe what is being styled; its value is how. Properties and their values are separated with colons.

selector, selector, selector {
	property:value; property:value
} 

Selectors represent what in a document is to be styled, usually specific to markup tags such as h1 or div. Selectors that directly target tags in this manner are known as type selectors. Example:

h1 { font-weight:normal }
pre, blockquote {
	margin:1em;
	padding:.5em
}

With the above style, all h1 elements in a page will have a normal font weight (as opposed to being bold) and all pre and blockquote elements will have a margin all around of 1em and a padding all around of .5em.

Note: White space between declarations is not important.

Class Selectors

You can also specify styles using class selectors. Class selectors are selectors specifying elements with a certain value within their class attribute. Class selectors are specified in a style using a period (.) preceding the selector name. The selector name then references a class value instead of an element name.

.classname { declaration } 

When an element has the style's class name within its class attribute, the style would affect that element. Any element can contain any number of space separated classes specified in its class attribute and the same class can be reused in many different elements.

<elementname class="classname classname">

Example:

.student-name { color:red }
.dropout { font-style:italic }
<p>Last year's students were <span class="student-name dropout">John</span>, 
<span class="student-name">Sally</span>, and <span class="student-name">Billy</span></p>

The names John, Sally, and Billy are each shown in red. Additionally, John's name is italicized.

Classes can also be specific to certain elements. The dropout class from above, for example, can be defined solely for span elements. Doing this requires the element name be placed prior to the prior to the period in the selector

span.dropout { font-style:italic }

With this definition, the only elements with the dropout class that will show italics are span elements. Without such specification, the class would apply to any element. You can actually specify any element in CSS using an asterisk (*). These two lines are exactly the same:

.dropout { font-style:italic }
*.dropout { font-style:italic }

Rarely do you see the asterisk for general definitions, though.

ID Selectors

ID selectors, like class selectors, are selectors that specify elements using an element attribute, the id attribute. ID selectors are specified in a style using a number sign (#) preceding the selector name.

#idname { declaration } 

Unlike with classes, elements can only have one id value and only elements within a document cannot share the same id.

<elementname id="idname">

Example:

#header { width:500px }
#logo {
	border:none;
	margin-right:10px
}
<div id="header"><img src="logo.gif" id="logo" />The Good Company</div>

The div in this example has a width of 500px. The image with an id of "logo" has no border and a right margin of 10px.

Note: Like with classes, id selectors can also be specific to certain elements. Doing so is rare given that there can only be one element with a specific id in a page anyway.

Descendant Combinator

Combinators in styles are characters that connect selectors to form a more complex method of specification.

selector[combinator]selector { declaration }

The most common of these is the descendant combinator. The descendant combinator is simply a space between selectors that specify an element that is the descendant of another element. A descendant element is an element that is contained within another element as a child or any child of its children and any other children further down the chain. This is not to be confused with a child element which is an element that is located directly within another element without being inside another element that is within the parent element. For example, examine the following structure:

<div id="A">
	<div id="B">
		<div id="C"></div>
	</div>
</div> 

Element B and and element C are both descendants of element A. However, only element B is a child of element A, not element C. Element C is only a child of element B, not element A.

The descendant combinator lets you specify styles for elements (descendants) that exist only within another element as specified by an ascendant.

ascendant descendant { declaration }

Example:

#header .title { color:red }
#content .title { color:blue }
<div id="header"><h1 class="title">Welcome</h1></div>
<div id="content"><h1 class="title">What's New</h1></div>

Here, the text "Welcome" is red while the text "What's New" is blue. Despite both h1 elements having the same class, using the descendant combinator, each element was able to be given a different style because of how they are located inside of different elements, in this case the header and content divs.

Note: The combinator for element children is > but is not supported by Internet Explorer at this time (IE6 and below).

Pseudo-Classes

Pseudo-classes are classes that exist outside the definitions specified by tags or attributes like class an id. The most common of these are the anchor tag pseudo-classes active, hover, link, and visited.

Pseudo-classes identify themselves with colons after a selector.

selector:pseudo-class { declaration }

The anchor tags pseudo-classes are used to represent the different states of an anchor tag

  • active: The active element in the document
  • hover: Element the cursor is over
  • link: Links not yet visited
  • visited: Links that have been visited

Example:

a:link { color:blue }
a:visited { color:gray }
a:hover { color:#66F }
a:active { color:yellow }
<a href="link.html">click</a>

If the click link above has not been visited, it will appear blue. If it has been visited, it will appear gray. When the user hovers over the link with their mouse, it will appear light blue (#66F); when clicking the link, it turns yellow. Try it: click.

Note: When defining pseudo-classes for the anchor tag, you will want to use the order specified above.

Additional Information

This page only covers the basics and most common uses of the style format. For more information (CSS2) see:

http://www.w3.org/TR/CSS21/
http://www.w3.org/TR/CSS21/selector.html