css_syntax.asp

W3Schools tutorial..web designing

This paragraph will also be center-aligned.
&lt;/p&gt; </pre>
</td></tr></table>
<br />
<table class="tip" width="100%" border="0" id="table3">
<tr>
<td><img border="0" src="../images/lamp.gif" alt="Remark" />
Do <b>NOT</b> start a class name with a number! It will not work in Mozilla/Firefox.</td>
</tr>
</table>
<br />
<hr />

<h2>Add Styles to Elements with Particular Attributes</h2>
<p>You can also apply styles to HTML elements with particular attributes.</p>
<p>The style rule below will match all input elements that have a type attribute with a value 
of &quot;text&quot;:</p>
<table width="100%" border="1" class="ex" cellspacing="0" id="table5"><tr><td>
<pre>input[type=&quot;text&quot;] {background-color: blue}</pre>
</td></tr></table>
<br />
<hr />

<h2>The id Selector</h2>
<p>You can also define styles for HTML elements with the id selector. The id 
selector is defined as a #.</p>
<p>The style rule below will match the element that has an id attribute with a value 
of &quot;green&quot;:</p>
<table width="100%" border="1" class="ex" cellspacing="0" id="table1"><tr><td>
<pre>#green {color: green}</pre>
</td></tr></table>
<p>The style rule below will match the p element that has an 
id with a value of &quot;para1&quot;:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>p#para1
{
text-align: center;
color: red
}</pre></td></tr></table>
<br />
<table class="tip" width="100%" border="0" id="table3">
<tr>
<td><img border="0" src="../images/lamp.gif" alt="Remark" />
Do <b>NOT</b> start an ID name with a number! It will not work in Mozilla/Firefox.</td>
</tr>
</table>
<br />
<hr />

<h2>CSS Comments</h2>
<p>Comments are used to explain your code, and may help you when
you edit the source code at a later date. A comment will be ignored by 
browsers. A CSS comment begins with "/*", and ends with &quot;*/&quot;, like this:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}</pre>
</td></tr></table>
<br />
<hr />
<a href="css_intro.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
 <a href="css_howto.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>

<br />
<hr />

<!-- **** SPOTLIGHTS 1 **** -->

<iframe src="../banners/aspallframe.asp" height="110" width="485"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<hr />
<!-- **** SPOTLIGHTS 2 **** -->

<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="2" bgcolor="#dae6f2"><a href="../../www.ektron.com/cms400-web-cms.aspx@id=5748&cpid=BAC-3183&campaignid=3183" target="_blank">
			<img src="../images/061608-w3schools_box.gif" width="161" height="232" alt="Ektron CMS400.NET" border="0" /></a></td>
		<td><a href="../../www.ektron.com/index.aspx@cpid=BAC-3183&campaignid=3183" target="_blank"><img src="../images/061608-w3schools_logo.gif" width="339" height="108" alt="Ektron - What do you want your website to do?" border="0" /></a></td>
	</tr>
	<tr>
		<td><a href="../../www.ektron.com/cms400-web-cms.aspx@id=5748&cpid=BAC-3183&campaignid=3183" target="_blank"><img src="../images/061608-w3schools_eintranet.gif" width="339" height="124" alt="The Ektron Intranet" border="0" /></a></td>
	</tr>
    <tr>
    	<td colspan="2"><a href="../../www.ektron.com/instant_demo.cfm@flash=6134&type=5&cpid=BAC-3183&campaignid=3183" target="_blank"><img src="../images/061608-w3schools_taketour.gif" alt="Take the video tour" width="500" height="33" border="0" /></a></td>
    </tr>
	<tr>
		<td colspan="2" bgcolor="#FFFFFF">
			<p style="padding: 10px; margin:0px;"><a href="../../www.ektron.com/cms400-web-cms.aspx@id=5748&cpid=BAC-3183&campaignid=3183" target="_blank"><strong>The Ektron Intranet</strong></a>
lets you do everything you need to do on your corporate intranet and everything you want to do<strong>... all with just one application</strong>.</p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td valign="top">
            <table width="100%" border="1" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                <table cellspacing="0" cellpadding="4" width="100%" border="0" bgcolor="#FFFFFF">
                  <tr>
                    <td bgcolor="#dae6f2"><p><strong>What can you do with the Ektron Intranet? </strong></p></td>
                  </tr>
                  <tr>
                    <td>
                    <table width="100%" border="0" align="center" cellpadding="4" cellspacing="0">
                         <tr>
                          <td><img src="../images/061608-w3schools_icon_search.jpg" width="32" height="32" alt="Ektron" /></td>
                          <td valign="top"><p>Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with  <strong>enterprise search</strong></p></td>
                        </tr>
                         <tr>
                          <td><img src="../images/061608-w3schools_icon_communication.jpg" width="32" height="32" alt="Ektron" /></td>
                          <td valign="top"><p>Communicate with friends and colleagues with forums, message boards and corporate blogging using the new <strong>Social Networking Platform</strong> </p></td>
                        </tr>
                         <tr>
                          <td><p><img src="../images/061608-w3schools_icon_open.gif" width="32" height="32" alt="Ektron" /></p></td>
                          <td valign="top"><p>Utilize the extensive out-of-the box features or <strong>customize</strong> your site through Ektron CMS400.NET's <strong>open architecture</strong></p></td>
                         </tr> 
                        <tr>
                          <td><img src="../images/061608-w3schools_icon_collaboration.jpg" width="32" height="32" alt="Ektron" /></td>
                          <td valign="top"><p>Promote collaboration  in your organization through project <strong>workspaces</strong> where others can efficiently find information and work   together</p></td>
                        </tr>
                        <tr>
                          <td><img src="../images/061608-w3schools_icon_docflow.jpg" width="32" height="32" alt="Ektron" /></td>
                          <td valign="top"><p>Author/edit content, manage   navigation, menus, audit trails, workflow and approvals with the best in breed <strong>Content Management</strong> </p></td>
                        </tr>
                    </table></td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
        </table>
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
        <td align="center" style="padding: 0px 10px 10px 10px; line-height: 14pt;">
        <p>See why there are 20,000+ Ektron integrations worldwide.</p>
        </td>
        </tr>
        </table>   </td>
	</tr>
	<tr>
		<td bgcolor="#FFFFFF"><a href="../../www.ektron.com/instant_demo.cfm@flash=6134&type=5&cpid=BAC-3183&campaignid=3183" target="_blank">
			<img src="../images/061608-w3schools_buttontop.gif" width="161" height="27" alt="Take the Video Tour" border="0" /></a></td>
		<td bgcolor="#FFFFFF"><a href="../../www.ektron.com/instant_demo.cfm@flash=6134&type=5&cpid=BAC-3183&campaignid=3183" target="_blank"><strong>TAKE THE VIDEO TOUR</strong></a></td>
	</tr>
	<tr>
		<td bgcolor="#dae6f2"><a href="../../www.ektron.com/instant_demo.cfm@flash=6134&type=5&cpid=BAC-3183&campaignid=3183" target="_blank">
			<img src="../images/061608-w3schools_buttonbottom.gif" width="161" height="35" alt="Take the Video Tour" border="0" /></a></td>
		<td bgcolor="#dae6f2">or download a <a href="../../www.ektron.com/download.cfm@product_id=363&purchase=0&cpid=BAC-3183&campaignid=3183" target="_blank"><strong>FREE TRIAL</strong></a> today.</td>
	</tr>
</table>
<hr />


<!-- **** SPOTLIGHTS 3 **** -->
<table cellpadding="0" cellspacing="0"><tr><td width="72"></td><td>
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*txt*/
google_ad_slot = "1699448869";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td></tr></table>
<hr />

<center>

<iframe style="background-color:#ffffff" src="../banners/oddcastbannerframe.asp"
height="60" width="468" marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>

</center>
<hr />


<!-- **** END SPOTLIGHTS **** -->

</td></tr>

<tr><td>
<p>Jump to: <a href="#top" target="_top"><b>Top of Page</b></a>
or <a href="../default.asp" target="_top"><b>HOME</b></a> or
<a href='css_syntax.asp@output=print' target="_blank">
<img src="../images/print.gif" alt="Printer Friendly" border="0" />
<b>Printer friendly page</b></a></p>
<p>W3Schools provides material for training only. We do not warrant the correctness of its contents.
The risk from using it lies entirely with the user.
While using this site, you agree to have read and accepted our
<a href="../about/about_copyright.asp">terms of use</a> and
<a href="../about/about_privacy.asp">privacy policy</a>.
</p>
<p><a href="../about/about_copyright.asp">Copyright 1999-2008</a> by Refsnes Data. All Rights Reserved.</p>
<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr>
<td width="60%" align="left">
<a href="../../validator.w3.org/check@uri=referer" target="_blank">
<img src="../images/vxhtml.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../jigsaw.w3.org/css-validator/check@uri=referer" target="_blank">
<img src="../images/vcss.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance" target="_blank">
<img src="../images/wai.gif" alt="W3C-WAI level A conformance icon" width="88" height="31" border="0" /></a>
</td>
<td>
<a href="../xhtml/xhtml_howto.asp" target="_top">W3Schools was converted to XHTML in December 1999</a>
</td></tr>

</table>
</td></tr>
</table>
</td>


<td width="145" align="center" valign="top">




<iframe style="background-color:#f1f1f1" src="../banners/rightcolumn.asp@secid=css" height="1500" width="147"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
</iframe>

</td>
</tr></table>

</body>
</html>