iTech College - Internet Technology, Online Education, E-Learning, Technician Training, Tech Tutorials, Distance Education, Virtual Learning CSS Course: Selectors - www.itechcollege.com CSS Course: Selectors - www.itechcollege.com
Free Courses
HTML
JavaScript
CSS
ASP
PHP
JSP
C++
ASP.NET
SQL
AJAX
FTP
XML

courses > CSS > Selectors

Selectors

Selectors are used to associate style declarations with an element or elements. This is done by placing the declarations within a block (enclosed in {}) and preceding it with a selector. For example:

p {color: #008000}

div {color: #cccccc; font-size: 14pt}

Tag selectors

You can take any opening HTML tag and use it as a selector:

h3 {color: red}

Class selectors

These allow you to give elements a particular name. For example:

<P class="zn"> .... </P>

In a style sheet, The syntax as the below:

P.zn { color: blue }

Or like this:

.zn { color: blue }

Pseudo-class selectors

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style. The sample style sheet might look like this:

A:link { color: red }
A:active { color: blue; font-size: 150% }
A:visited { color: green }

ID selectors

These selectors are very similar to classes except there can only be one element with a given ID in a document. An ID selector is assigned by using the indicator "#". For example:

#abc { text-style: bold }

To use an ID selector:

<P ID=abc>Welcome to my website</P>

Note: IDs like classes they should be in lowercase, may not start with a number or contain spaces. This selector type should only be used sparingly due to its inherent limitations.

Span

This element may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes. Some examples of SPAN follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML><HEAD><TITLE></TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css">
<!--
.zn { font-size: 28pt }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=zn>These words could be big.</SPAN></p>
<p><SPAN STYLE="font-family: Arial;font-size:12"> And these ones are different.</SPAN>.</P>
</BODY></HTML>

Div

DIV (short for "division") is a block-level element that, in function, is similar to the SPAN. But DIV may contain paragraphs, headings, and tables. For example:

<DIV CLASS=zn>
<H1>Welcome</H1>
<P>Hello World</P>
<P>Welcome to my website!</P>
</DIV>



  Back to Index Page
 Next Page:  

Linking and Embedding
Syntax
Selectors
Properties
Rules


Online Education, Online Training for Your Job, Distance Education, E-learning Programs for Your Career!Online Colleges, Online Universities, E-learning & Distance Education for Your Career! Easy Job Training & Online Courses.


   Email A Friend  
 
Earn Online Degree
for Your Job
I found a job after I earned an online degree!
Online classes for finding a Job. Online College, Online University, Degrees, E-learning school, online certificate Earn your
online degree now!
Online Training
for Good Job
Why I work so hard but earn so little? Why I cannot find a high paying job?
Online training for a Good Jobs. Online Degree, E-learning school, online certificate Go to
online school now!

Copyright ©2024, itechcollege.com. All rights reserved
iTechCollege | About iTech | Contact iTech