Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Introduction To CSS Basics

By: FYICenter.com

Part:   1  2  3  4  5 

(Continued from previous part...)

If you apply the above CSS definition to the following HTML document, you will get the search instruction block in "arial" font family:

<form action=search.cgi>
<p>Search instruction...</p>
<input type=submit value=Search>
</form>

<p>Other normal paragraphs...</p>

What Is a Group Selector?

A group selector selects multiple HTML tags. Group selectors are specified with multiple tags separated with a comma like (tag, tag, tag). For example, the following CSS definition uses a group selector:

/* set background color to gray for all instances 
  of three tags: <UL>, <OL>, and <DL> */
UL, OL, DL {background-color: gray}

What Is a Mixed Selector?

A mixed selector is a selector that uses a combination of all other selectors. The following CSS shows some good examples:

/* selects <p class="quote"> tags */
P.quote {font-style: italic}

/* selects <p class="quote" id="onSale"> tags */
P.quote#onSale {color: red}

/* selects <p class=quote id=onSale> tags inside <table> */
TABLE P.quote#onSale {background-color: red}

/* selects <pre class=quote id=onSale> tags inside <table>
  and <pre id="onSale"> tags */
TABLE P.quote#onSale, PRE#onSale {background-color: red}

What Are the Pseudo Classes on <A> Tags?

Pseudo classes are classes used by Web browsers to differentiate statuses of a HTML tag. CSS definitions can use pseudo classes as selectors with a leading colon like (:visited). There are 3 pseudo classes on the <A> tag:

• A:link - A hyper link that has not been visited.
• A:visited - A hyper link that has been visited before.
• A:active - A hyper link that is currently under the mouse pointer.

If you want to the alter the default style sheets of the browser, you could define something like this:

/* show un-visited links in blue */
A:link {color: blue}

/* show visited links in yellow */
A:visited {color: yellow}

/* change background color gray when mouse over links */
A:active {background-color: gray}

How To Group CSS Definitions Together?

If you have multiple CSS definitions to be applied to the same HTML tag, you can write them together delimited with semicolon (;). The following CSS provides you a good example of CSS definition groups:

pre.code {background-color: #efefef; width: 502px;
  margin: 4px; padding: 4px}

The above CSS code is identical to the following CSS code:

pre.code {background-color: #efefef}
pre.code {width: 502px}
pre.code {margin: 4px}
pre.code {padding: 4px}

(Continued on next part...)

Part:   1  2  3  4  5