CSS Basics

by Marie Taylor-Harper

In the beginning there was only HTML (Hypertext Markup Language), which was, at the time, satisfactory
for the people using it who were mainly scientists whose purpose was to share information with their colleagues. The initial type of information displayed in their pages was text but this soon grew to include other types of information such as images. Later, as more people entered the realm of the web, there became a bigger demand on things HTML could not offer such as traditional layout techniques that "designers" use. To account for these new technologies were introduced and developed. These new technologies ultimately gave the web designer and developer more control over the appearance of their web pages. Now, the once "hacked" pages that were created by designers and contained slow loading graphics could be created using faster loading code. This new technology was known as Cascading Style Sheets or CSS. CSS is now used with both XML and HTML documents.

The Definition of a Style

A STYLE is purely and simply a means by which to customize or define a tag. The "customization" or
definition is just a collection of different properties such as boldface, italics, font-size, font weight, color, etc., that you wish to apply to a segment of text using a single name. Each style created belongs to a unique entity such as an element (or tag) and as a result, the application of these unique entities allows us to customize our web documents. The long-term benefit of this is that it reduces the amount of time it takes to update the website in the future. Example: Imagine you created a website using traditional layout techniques. This website could end up being extremely "taggy" meaning your document is composed of more tags than actual content. Now let's say your website is 20-30 pages in length or more, and on every page you use at least one instance of the largest heading and this heading has been made OLIVE in color. Later it is decided that the color scheme needs to change and these headings need to be MAROON instead. Now you need to make the changes and to make these changes, you must find EVERY occurrence of this tag which may take awhile since you need to check every page in the browser to make sure you completed those changes. This, of course, was the long way of doing things and time is not usually a luxury. As a result, we create a Style Sheet initially when we develop the site, which ultimately does 2 things: 1) Cuts down on the overall number of tags and 2) Speeds up website layout changes. Thus, when we update the color from OLIVE to MAROON, we make 1 change rather than an undefined number of changes.

Classifications of Style Sheets

Cascading Style Sheets and Styles can be added and incorporated within web documents, and specifically
HTML documents, in three different ways. The three methods are: a) External or Linked Style Sheets b) Embedded Style Sheets c) Inline Styles

External or linked Style Sheets reside outside the web document in a special file. This special file possesses a unique extension to identify it as a Style Sheet document and that extension is ".css". This type of Style sheet can be used among a group of web documents giving uniformity to those documents. Using this type of Style Sheet allows us to make one change to the Style Sheet file that will affect all instances of the specified selector (tag) within the group of associated web documents. These special files are associated with web documents by linking them to the specific document using the tag, which will be discussed later. Embedded Style Sheets are inserted into a web document and reside in the given documents head section between the opening and closing tags. This type of style sheet only affects the document that it resides in but can be used in conjunction with External Style Sheets. Something to note at this time is that if the Embedded Style Sheet and the External Style Sheet are used together within the same document and they both contain a "definition" for the same selector (tag), the definition for the Embedded Style Sheet will overrule the External Style Sheet definition given the definitions contain the same properties. This type of Style Sheet is added to the web document by embedding it into the web document within opening and closing section. This will be discussed later. Embedded Styles cannot be applied directly to xml documents but can be applied to transformed output. Lastly, the Inline Styles, which reside within specific HTML tags within individual web documents. Inline Styles should be used to customize specific instances of a tag and can be used to overrule any definitions created for that selector (tag) using Embedded and/or External Style Sheets. Inline Styles are implemented by associated a style definition with the STYLE attribute and placing it within a specific tag. Inline Styles cannot be applied directly to xml documents either, but can be applied to transformed output.

The Style Definition

The way in which you create a style definition is the same whether you create it for a External Style Sheet, Embedded Style Sheet or even an Inline Style although they may become more complicated depending on what you want to do. The general format for a simple definition is as follows:

STYLE_PROPERTY:PROPERTY_VALUE;
The STYLE_PROPERTY is a specific property that can be used with a specific selector. (NOTE: Not all selectors can use the same style properties.) The PROPERTY_VALUE is a specific value that can be associated with the STYLE_PROPERTY used. The STYLE_PROPERTY and the PROPERTY_VALUE are separated using a colon (:) and a semi-colon (;) is used to conclude the property | value pair. The STYLE_PROPERTY may be entered in any case but occasionally the PROPERTY_VALUE is case sensitive. The definition, of course, is not limited to a single property/value pair. You can append additional property/value pairs to the definition until the customization of the selector (tag) is complete. (NOTE: Spaces are not needed but can be added for readability.) An example using 2 property/value pairs is as follows:

STYLE_PROPERTY1:PROPERTY_VALUE;STYLE_PROPERTY2:PROPERTY_VALUE;
In addition to customizing a selector using multiple property/value pairs, you can also customize a selector by applying more than one PROPERTY_VALUE to a single STYLE_PROPERTY. These PROPERTY_VALUEs must be separated by a single space and if any single PROPERTY_VALUE consists of multiple words, those words must be enclosed within single quotes. An example of such a definition with multiple PROPERTY_VALUEs being applied to a single STYLE_PROPERTY is as follows:

STYLE_PROPERTY: PROPERTY_VALUE1 PROPERTY_VALUE2;

Another example of a Style Definition with multiple PROPERTY VALUEs being applied to a single STYLE_PROPERTY but with one of the PROPERTY_VALUEs being composed of multiple words would be written as:

STYLE_PROPERTY:PROPERTY_VALUE1 'PROPERTY VALUE 2';

Now that we have covered the basic construction of a style definition, we need to know how to apply these definitions to Inline Styles, Embedded Styles Sheets and External Style Sheets.

Basic Application of Style Definitions [Important for Transformations]

Application of Style Definitions is dependant upon what type of Style or Style Sheet you are creating. When applied to an Inline Style, we must place our Style Definition within double quotes. We will refer to this as a string when contained within double quotes. This string will then become the value of the STYLE attribute and be placed within the appropriate selector. An example of this is as follows:

<TAGNAME STYLE="STYLE_PROPERTY:PROPERTY_VALUE;">
(NOTE: The STYLE attribute can be added to most tags as previously discussed.) In the case of the External and Embedded Style Sheets, the application of the Style Definition is virtually the same. The Style definition itself must be enclosed in curly brackets or braces, which must be preceeded by the selector (tag). An example of this is as follows:

TAGNAME

{STYLE_PROPERTY:PROPERTY_VALUE;}

This syntax is then applied in one of two ways: a) In the case of Embedded Style Sheets, the style is placed between the opening and closing <style> tags used to define the Style Sheet, or b) In the case of External Style Sheets where the style is added to the cascading style sheet file. A sample Embedded Style Sheet based on simple definitions would look like the following:

<style type="text/css"> <!-TAGNAME1 TAGNAME2 --> </style>

{STYLE_PROPERTY:PROPERTY_VALUE;} {STYLE_PROPERTY:PROPERTY_VALUE;}

A sample External Style Sheet based upon simple definitions would look like the following:

TAGNAME1 TAGNAME2

{STYLE_PROPERTY:PROPERTY_VALUE;} {STYLE_PROPERTY:PROPERTY_VALUE;}

Note: The External Style Sheet will reside in a separate file with a .css file extension.

CSS Definitions
Definitions are used with Embedded and External Style Sheets and also within inline styles. They allow us to customize our documents based upon what HTML tags we use and how we use them. Simple Definition /* syntax */ style-property: style-property-value;

/* use within a inline style */ <TAG STYLE="style-property: style-property-value;"> /* use within Embedded/External Style Sheet Style Definitions */ {style-property: style-property-value;} Multi-Worded Values within Definitions /* syntax */ style-property: 'style property value'; /* use within a inline style */ <TAG STYLE="style-property: 'style property value';"> /* use within Embedded/External Style Sheet Style Definitions */ {style-property: 'style property value';} Value Grouping within a Definition /* syntax */ style-property: style-property-value1 style-property-value2 styleproperty-valuen; /* use within a inline style */ <TAG STYLE="style-property: style-property-value1 style-propertyvalue2 style-property-valuen;"> /* use within Embedded/External Style Sheet Style Definitions */ {style-property: style-property-value1 style-property-value2 styleproperty-valuen;} Value Precidence within a Definition /* syntax */ style-property: style-property-value1, style-property-value2, styleproperty-valuen; /* use within a inline style */ <TAG STYLE="style-property: style-property-value1, style-propertyvalue2, style-property-valuen;"> /* use within Embedded/External Style Sheet Style Definitions */ {style-property: style-property-value1, style-property-value2, styleproperty-valuen;} Complex Definition /* syntax */ style-property: style-property-value; style-property: style-propertyvalue; /* use within a inline style */ <TAG STYLE="style-property: style-property-value; style-property: style-property-value;"> /* use within Embedded/External Style Sheet Style Definitions */ {style-property: style-property-value; style-property: styleproperty-value;}

CSS Selectors
Selectors are used within Embedded and External Style Sheets and allow us to customize our documents based upon what HTML tags we use and how we use them. The selectors can be very simple based only on a tag or element name or they can be more complicated allowing us to target a specific tag or tags within a document. Simple Selector /* syntax */ SELECTOR {DEFINITION;}

Grouped Selectors (or Selector Grouping) Grouped Selectors allow us to define a GROUP of tags or elements with the same properties and values. For example, if we wanted to color all of our headings PURPLE we could define the <H1>, <H2>, <H3>, <H4>, <H5> AND <H6> tags simultaneously using one definition and one selector. This would also allow us to make a simple change later when we want to change the color of our headings from PURPLE to GREEN. /* syntax */ SELECTOR, SELECTOR[, SELECTOR] {DEFINITION;} Contextual or Descendant Selectors We can define specific instances of tags without affecting other tags in the document using contextual or descendant selectors. Thus we could specifically define an ITALICS tag that resided inside a BOLD tag, which resided inside a PARAGRAPH tag but would not affect any ITALICS tags that resided immediately inside a PARAGRAPH tag. If the ITALICS tags contained any additional tags, and the nesting order was applicable to the tags then the tags nested within the ITALICS tags would also be affected. This type of selector is very useful especially when nesting tables within each other. One thing to note is that YOU MUST have a unique identifier within your nesting so nonduplicate instances are not affected. One last thing to note -- occasionally the order of your rules will cause erroneous affects in your browser output. If this happens, try changing the order of your rules. /* syntax */ SELECTOR SELECTOR[ SELECTOR] {DEFINITION;} Generic Class Selectors Classes are used to pinpoint specific tags or groups of tags within a document. With a CLASS you can identify a group of tags that will possess the same properties/values that may be a a small subgroup of the main tag set. For example, let us think about the <H1> tag. We may have a series of H1 tags within our document and for the most part we want to make these level of headings PURPLE, BUT we have two cases within the document that we wish to color BLUE. In this case we would use a simple selector to color all of these tags PURPLE but we would also create a second selector using a CLASS to color these specific cases BLUE and we would place the RULES in this order. We would identify these specific cases within our document by applying a CLASS attribute to ALL of the tags that required this definition. NOTE: Classes can be applied in a generic and tag specific sense. A generic sense would mean that the class can be applied to any tag in document whereas the tag specific could only be applied successfully to the element specified within the selector. With a ID you can identify a single tag within the document. This is similar to using the NAME attribute within tags. Eventually the ID attribute will replace the NAME attribute but currently that is not true in all browsers. Due to the nature just described, the ID is tag specific. /* syntax */ .SELECTOR_CLASS {DEFINITION;} Tag Specific Class Selectors Classes are used to pinpoint specific tags or groups of tags within a document. With a CLASS you can identify a group of tags that will possess the same properties/values that may be a a small subgroup of the main tag set. For example, let us think about the <H1> tag. We may have a series of H1 tags within our document and for the most part we want to make these level of headings PURPLE, BUT we have two cases within the document that we wish to color BLUE. In this case we would use a simple selector to color all of these tags PURPLE but we would also create a second selector using a CLASS to color these specific cases BLUE and we would place the RULES in this order. We would identify these specific

cases within our document by applying a CLASS attribute to ALL of the tags that required this definition. NOTE: Classes can be applied in a generic and tag specific sense. A generic sense would mean that the class can be applied to any tag in document whereas the tag specific could only be applied successfully to the element specified within the selector. /* syntax */ SELECTOR.SELECTOR_CLASS {DEFINITION;} ID Selectors (Unique Tag Specific) IDs are used to pinpoint specific tags or groups of tags within a document. With a ID you can identify a single tag within the document. This is similar to using the NAME attribute within tags. Eventually the ID attribute will replace the NAME attribute but currently that is not true in all browsers. Due to the nature just described, the ID is tag specific. /* syntax */ #SELECTOR_ID {DEFINITION;} Psuedo-Class Selectors The psuedo-class selectors include :link, :visited, :active, :hover, :focus, :first-letter, :first-line, :firstchild; :before, :after, :focus, :lang. The ones listed in bold-face type can be used successfully with xml documents. A:LINK A:VISITED A:ACTIVE A:HOVER A:FOCUS P:FIRST-LETTER P:FIRST-LINE P:FIRST-CHILD H1:BEFORE H1:AFTER INPUT:FOCUS P:LANG(LANG-CODE) {DEFINITION;} {DEFINITION;} {DEFINITION;} {DEFINITION;} {DEFINITION;} {DEFINITION;} {DEFINITION;} {DEFINITION;} {content: "LEADING TEXT";} {content: "FOLLOWING TEXT";} {DEFINITION;} {DEFINITION;}

/* syntax */ SELECTOR:psuedo-class {DEFINITION;} CHILD SELECTOR Children tags found directly within the parent tag will be affected by the definition. /* syntax */ PARENT_SELECTOR > CHILD_SELECTOR {DEFINITION;} ADJACENT SIBLING SELECTOR The last sibling tag will have its content affected by the definition. Sibling tags can be separated by content but not other tags. /* syntax */ SIBLING1_SELECTOR + SIBLING2_SELECTOR {DEFINITION;} ATTRIBUTE SELECTOR Allows customization of tag content based upon attribute/value content. /* syntax */ SELECTOR[attribute] {DEFINITION;}

SELECTOR[attribute="text"] {DEF} SELECTOR[attribute~="text"] {DEF} SELECTOR[attribute|="text"] {DEF}

/* exact value match */ /* contains text */ /* starts with text */