CSS selectors - There are different ways to specify selectors . They help in providing greater precision or styling different sets of same elements in different ways .
Referring back to XHTML tutorials .
<div id="header">
<h2><a href="index.html">Movies Freak</a> </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
ID selectors - id attribute is used to identify the element to be styled .
e.g. the above code section can be styled as :
#header {
font-weight: bolder;
font-family: times, serif;
}
ID selectors always begin with a (#) . The header as well as all the links are styled in the specified way . This is also known as inheritance as the CSS is apllied to the parent element (<div> in this case ) but all the child elements (<h2> , <ul>,<li>,<a>) inherit this way of presentation .
Class selectors - Class attribute is used to identify the element to be styled .
e.g. suppose we have markup
<div class="movie" id="1">
<h1>Akira</h1>
<p>This movie is trash . Please don't waste your time on this .</p>
</div>
<div class="movie" id="2">
<h1>Grave Of The Fireflies</h1>
<p>Awesome , Superb ,Riveting</p>
</div>
Using class selector
.movie {
width: 300px;
height: 250px;
padding: 15px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
Class selectors always begin with a (.)
This will create two different boxes , one-next to the other of dimensions 300 by 250 pixels .
padding-specifies space between content and the border of the element .
margin-right -space left empty to the right of the box .
margin-bottom - space left empty to the bottom of the box .
float: left -aligns box to the top left of the page .
Descendant selectors - They are used in case one element is nested within another element .
e.g.
ul a {
color: red;
text-decoration: underline;
}
All anchor elements nested inside an unordered list will be underlined and colored red .In this case an empty space is the combinator of ul and a elements .
Referring back to XHTML tutorials .
<div id="header">
<h2><a href="index.html">Movies Freak</a> </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
ID selectors - id attribute is used to identify the element to be styled .
e.g. the above code section can be styled as :
#header {
font-weight: bolder;
font-family: times, serif;
}
ID selectors always begin with a (#) . The header as well as all the links are styled in the specified way . This is also known as inheritance as the CSS is apllied to the parent element (<div> in this case ) but all the child elements (<h2> , <ul>,<li>,<a>) inherit this way of presentation .
Class selectors - Class attribute is used to identify the element to be styled .
e.g. suppose we have markup
<div class="movie" id="1">
<h1>Akira</h1>
<p>This movie is trash . Please don't waste your time on this .</p>
</div>
<div class="movie" id="2">
<h1>Grave Of The Fireflies</h1>
<p>Awesome , Superb ,Riveting</p>
</div>
Using class selector
.movie {
width: 300px;
height: 250px;
padding: 15px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
Class selectors always begin with a (.)
This will create two different boxes , one-next to the other of dimensions 300 by 250 pixels .
padding-specifies space between content and the border of the element .
margin-right -space left empty to the right of the box .
margin-bottom - space left empty to the bottom of the box .
float: left -aligns box to the top left of the page .
Descendant selectors - They are used in case one element is nested within another element .
e.g.
ul a {
color: red;
text-decoration: underline;
}
All anchor elements nested inside an unordered list will be underlined and colored red .In this case an empty space is the combinator of ul and a elements .
