Thursday, July 28, 2011

How to find elements by CSS?

Before learning how to use CSS, lets learn little bit about CSS itself.

CSS (Cascading Style Sheets): A Web page with no styling appears as white background and black font. It it the browser default style. CSS adds style to a web page.sELECTORS rhe most mportant aspect of CSS. It helps to select tag to apply certain style.Two major selectros are: ID and Class selector.
ID selector starts with '#'. It applies only to the tag in a page that contains id=name, and only one element on a page.
HTML:
<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example one</title>
</head>
     <body>
<div id="header">
<h1>this is header</h1>
</div><!-- End header div -->
<div id="lefty">
<ul>
<li>We are <em>list items</em></li>
<li>in <strong>lefty</strong>.</li>
</ul>
    </body>
</html>
-->


CSS:
 /* Applies to id="header" */
# header
{
text-align:center;
color:red;
}

Class:
Class selector can be applied to any number of tag in any page. It starts with a dot (.) followed by the class name. Name is case sensitive and should begin with a letter. The class selector's style applies those tag that have class name.
Example:

HTML:
<div id="heading">
<h1>Heading</h1>
<ul>
<li>names</li>
</ul>
<p class="mark">para1.</p>
</div>
CSS:
/* class selector */
.mark{
background-color:#ff0;
}