CodeAve.com CodeAve.com - CSS - Basics
ASP
JavaScript
CSS
·Basics
·Page Display
·Text Display
·Script Writers
·Contents
·What's New?
HTML
Maps
Links
Mail List
Search
Sitemap

 

Class Selector
CSS contextual selectors enable you to define style commands that can be utilized by many tags.  When defining an contextual selector a period is placed before any selector name (Not to be confused with ID selectors that begin with #).  When the contextual selector is used within a tag via class = the name of the selector variable only (no period preceding).  The following example with define three contextual selectors (red_text, blue_text, and bold_text) and using either <p>, <div>, or <span> tags will deliver the text with the respective defined style.
•View the Output
•Text View
•Print View
•Mail this Link
•Download the Code

<html>
<head>
<title>CodeAve.com/CSS - Class Selector</title>
<style type="text/css">
<!--
/* All class selectors are defined with 
a period before their name */

.red_text { color: #FF0000 }
.blue_text { color: #0000FF }
.bold_text { font-weight: bold }
-->
</style>
</head>

<body bgcolor="#FFFFFF">
<center>
<!-- CSS classes can be added to almost any HTML tag -->

<div class="red_text">This is red text using &lt;div&gt; tag and the red_text class</div>

<span class="blue_text">This is blue text using &lt;span&gt; tag and the blue_text class</span>

<p class="bold_text">This is bold text using the &lt;p&gt; tag and the bold_text class</p>

<!-- Span will not disturb the flow of your text and you can apply many styles to a sentence -->

<span class="blue_text">Blue</span>, <span class="red_text">Red</span> and <span class="bold_text">Bold</span>


<p>


<!-- CSS classes are an easy way to avoid repetitive font commands
inside table rows or cells -->


<table border="1" align="center">
<tr>
<td class="red_text">Red Text<br> from &lt;td&gt; tag</td>
<td class="bold_text">Bold Text <br> from &lt;td&gt; tag</td>
</tr>

<tr>
<td class="blue_text">Blue Text <br> from &lt;tr&gt; tag</td>
<td>Plan Text</td>
</tr>
</table>


</center>
</body>
</html>

 

 

 


 ASP: What's New? | Articles | Script Writers | Database Display | Read/Write
Server Variables | Response Objects | Random Events | Miscellaneous
HTML: Forms | Hyperlinks | Headers | Tables | Hyperlinks | Headers | Text Display
JavaScript: Document Info | Forms | Images | Navigation | Script Writers
CSS: Basics | Page Display | Text Display | Script Writers | Miscellaneous
Links | Search Engine db |  Privacy Statement |  Advertising Rates |  Email

CodeAve.com is hosted by MyHosting.com
Donate Food Online with a Mouse Click at TheHungerSite.com
Donate Land Online with a Mouse Click at TheRainForestSite.com
© 1999 - 2010 CodeAve.com
All Rights Reserved