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

 

ID Selector
CSS ID selectors enable you to define style commands that can be utilized by many tags.  When defining an ID selector the # symbol is placed before any selector name (Not to be confused with contextual-selectors that begin with a period).  When the ID selector is used within a tag via class = the name of the selector variable only (no #).  The following example with define three ID 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 - ID Selector</title>
<style type="text/css">
<!--
/* All id selectors are defined with 
a pound symbol (#) before their name */

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

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

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

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

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

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

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


<p>


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


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

<tr>
<td id="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
Maps: Map Script Writers | Bing Maps | Google Maps
Privacy Statement

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