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...)

How To Store CSS Definitions in External Files?

If you want to share a set of CSS definitions with multiple HTML documents, you should those CSS definitions in an external file, and link it to those HTML documents using the LINK tag in the HEAD tag as:

<HEAD>
...
<LINK REL=stylesheet TYPE="text/css" HREF="css_file_url"/>
...
</HEAD>

Below is a CSS file called, fyiCenter.css, that stores the same CSS definitions used in the previous exercise:

  BODY {background-color: black}
  P {color: yellow}

If you modify the HTML document with the LINK tag instead of the STYLE tag, you can get the same result:

<html><head>
<title>CSS Linked</title>
<link rel=stylesheet type="text/css" href="fyiCenter.css"/>
</head><body>
<p>Welcome to FYICenter.com. 
You should see this text in yellow on black background.</p>
</body></html>

How Many Ways to Select HTML Tag Instances?

If you define a style property for a HTML tag, this definition will apply to all instances of that tag in the entire document. If you want to apply different style property values to different instances of the same tag, you need to use the tag selection mechanisms defined in CSS:

  • Tag Selector - Selects all instances of a HTML tag.
  • Contextual Selector - Selects all instances of a HTML tag nested inside other specified tags.
  • Class Selector - Selects all HTML tags that matches the class name defined in the tag attribute of class="class_name".
  • ID Selector - Selects all HTML tags that matches the id name defined in the tag attribute of id="id_name".
  • Group Selector - Selects multiple HTML tags.
  • Mixed Selector - Selects instances of HTML tags mixed with other selectors.

What Is a Class Selector?

A class selector selects all HTML tags that matches the class name defined in the tag attribute of class="class_name". Class selectors are specified with a leading dot like (.class_name). For example, the following CSS definition uses a class selector:

/* set text to italic to all tags with class="quote" */
.quote {font-style: italic}

If you apply the above CSS definition to the following HTML document, you will get two blocks in italic, one from the <p> tag and one from the <pre> tag:

<p>Normal paragraph...</p>
<p class="quote">Special paragraph...</p>
<pre>Normal pre-formatted text...</pre>
<pre class="quote">Special pre-formatted text...</pre>

What Is a ID Selector?

A ID selector selects all HTML tags that matches the id name defined in the tag attribute of id="id_name". ID selectors are specified with a leading hash like (#id_name). For example, the following CSS definition uses an ID selector:

/* set text to red to all tags with id="onSale" */
#onSale {color: red}

If you apply the above CSS definition to the following HTML document, you will get two blocks in red, one from the <p> tag and one from the <pre> tag:

<p>Normal paragraph...</p>
<p id="onSale">Special paragraph...</p>
<pre>Normal pre-formatted text...</pre>
<pre id="onSale">Special pre-formatted text...</pre>

What Is a Contextual Selector?

A contextual selector selects a HTML tag that is nested inside another specified tag. Contextual selectors are specified with two tags separated with a space like (outer_tag inner_tag). For example, the following CSS definition uses a contextual selector:

/* set paragraph inside a table to use arial font family */
FORM P {font-family: arial}

(Continued on next part...)

Part:   1  2  3  4  5 


Selected Developer Jobs:

More...