A combination of different selectors and combinators can be used for attaining specific select patterns .e.g If we have page full of anchor elements nested inside unordered lists and we want to style only those within the division with id as 'header' .
<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>
#header ul a {
color: red;
text-decoration: underline;
}
CSS rules can be over-ridden by specifying another rule after it . e.g. referring to our previous example :
<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>
CSS Rule 1:
#header {
font-weight: bolder;
font-family: times, serif;
}
This would style all the elements .But if we want to style the list items differently , we provide a new CSS rule .
CSS Rule 2:
#header ul {
font-weight: bold;
font-family: Zapfino, serif ;
}
This rule overrides the previous CSS Rule .We say CSS Rule 2 "cascades" over the top of CSS Rule 1 .
CSS cascade is a set of rules that define how conflicts among different CSS declarations are resolved .Specific rules override more general rules .Factors that determine cascade are where it was written in the CSS file as well as specificity of the CSS selector .e.g. selector with multiple combinators will be more specific .
Type selector is more general than class selector which in turn is more general than ID selector. So , is CSS rules are specified for all three .CSS for ID selector will cascade over CSS for class selector which in turn cascades over type selector .
Source order cascading - In case we want the style of a particular element to be over-ridden by the one defined in the CSS file , we use embedded form of styling
i.e.
<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>
<head>
<title>Movies Freak</title>
<link rel="stylesheet" href="basic.css" type="text/css" />
<style type="text/css">
.movie{color:green ; }
</style>
</head>
In this case
<style type="text/css">
.feature { color:green ; }
</style>
will over-ride the styling of specified section i.e. class type "movie" over
link rel="stylesheet" href="basic.css" type="text/css" />
Another way of source order cascading is to specify another CSS file after the initial one . CSS file specified later will over-ride the previous one .
<head>
<title>Movies Freak</title>
<link rel="stylesheet" href="basic.css" type="text/css" />
<link rel="stylesheet" href="advanced.css" type="text/css" />
</head>
In this case
<link rel="stylesheet" href="advanced.css" type="text/css" />
will over-ride
<link rel="stylesheet" href="advanced.css" type="text/css" />
<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>
#header ul a {
color: red;
text-decoration: underline;
}
CSS rules can be over-ridden by specifying another rule after it . e.g. referring to our previous example :
<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>
CSS Rule 1:
#header {
font-weight: bolder;
font-family: times, serif;
}
This would style all the elements .But if we want to style the list items differently , we provide a new CSS rule .
CSS Rule 2:
#header ul {
font-weight: bold;
font-family: Zapfino, serif ;
}
This rule overrides the previous CSS Rule .We say CSS Rule 2 "cascades" over the top of CSS Rule 1 .
CSS cascade is a set of rules that define how conflicts among different CSS declarations are resolved .Specific rules override more general rules .Factors that determine cascade are where it was written in the CSS file as well as specificity of the CSS selector .e.g. selector with multiple combinators will be more specific .
Type selector is more general than class selector which in turn is more general than ID selector. So , is CSS rules are specified for all three .CSS for ID selector will cascade over CSS for class selector which in turn cascades over type selector .
Source order cascading - In case we want the style of a particular element to be over-ridden by the one defined in the CSS file , we use embedded form of styling
i.e.
<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>
<head>
<title>Movies Freak</title>
<link rel="stylesheet" href="basic.css" type="text/css" />
<style type="text/css">
.movie{color:green ; }
</style>
</head>
In this case
<style type="text/css">
.feature { color:green ; }
</style>
will over-ride the styling of specified section i.e. class type "movie" over
link rel="stylesheet" href="basic.css" type="text/css" />
Another way of source order cascading is to specify another CSS file after the initial one . CSS file specified later will over-ride the previous one .
<head>
<title>Movies Freak</title>
<link rel="stylesheet" href="basic.css" type="text/css" />
<link rel="stylesheet" href="advanced.css" type="text/css" />
</head>
In this case
<link rel="stylesheet" href="advanced.css" type="text/css" />
will over-ride
<link rel="stylesheet" href="advanced.css" type="text/css" />
