Multiple Style Sheets Usage
Multiple Style Sheets are used when the CSS Website Template developer had set different properties for the same selector in different CSS Website templates. The attributes will then be inherited from more specific style sheets in the priority order.
The following example will illustrate the above discussion:
Multiple Styles in CSS Website Example
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssTemplate.css">
<style>
h5
{
font-size:12px;
color:#930;
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h5>
This Tutorial is to explain the Multiple Styles in CSS Website Template.
</h5>
</body>
</html>
CSS Template.css file coding:
</pre>
<pre class="crayon-selected">h5
{
color:#FF3399;
font-family:Verdana, Geneva, sans-serif;
}
Output:
The above code for heading “h5” will now having the font-size from external style sheet and color, font-family from internal style because the priority of internal style sheet is greater than external style sheet in developing CSS Website Template.
Links in CSS Website Template
In CSS Website Template, the following styles of links are used:
- a:link
- a:hover
- a:visited
- a:active
1) a:link:
It defines the style for unvisited links used in CSS Website Template.
2) a:hover:
It defines the style for hovered links used in CSS Website Template, i.e. when the mouse pointer is moved over the link, it gets hovered.
3) a:visited:
It defines the style for visited links used in CSS Website Template.
4) a:active:
It defines the style for active links used in CSS Website Template. It is done when you go for that link by clicking on it. The following example describes the above four links description:
Links in CSS Website Template Example code
</pre>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssTemplate.css">
<style>
h5
{
font-size:12px;
color:#930;
font-family:Arial, Helvetica, sans-serif;
}
a:link {
color:#3C3;
font-size:12px;
}
a:visited {
color:#9933CC;
font-size:14px;
font-family:"Arial Black", Gadget, sans-serif;
}
a:active {
color:#CC9900;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
}
a:hover {
color:#003366;
font-size:24;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
}
</style>
</head>
<body>
<h5>
This Tutorial is to explain the Multiple Styles in CSS Website Template.
</h5>
<a href="css.html"> Using HTML Links </a>
</body>
</html>
<pre class="crayon-selected">
Output:
Lists in CSS Website Template
Lists in creating CSS Website Template has the same function as Lists in HTML. There are two types of lists in CSS:
- Un-ordered Lists: Bullets, marks etc.
- Ordered Lists: Numbering
Lists in CSS Website Template is defined by writing “list-style-type” property inside the braces of selector and then assigning a value to the given property. The following example will be much more helpful for understanding the above discussion of lists in CSS Website Template creation:
Lists in CSS Website Template Eample code
<html>
<head>
<style>
ul.unOrderOne {list-style-type:disc;}
ul.unOrderTwo {list-style-type:square;}
ol.orderOne {list-style-type:decimal;}
ol.orderTwo {list-style-type:lower-alpha;}
</style>
</head>
<body>
<h2> <center>Types of Lists in CSS Website Template.</center> </h2>
<h2>Unordered lists:</h2>
<h4> Sports: </h4>
<ul> <li>Cricket</li>
<li>Football</li>
<li>Badminton</li>
</ul>
<h4> Drinks: </h4>
<ul>
<li>Milk Shake</li>
<li>Tea</li>
<li>Juice</li>
</ul>
<h2>Ordered lists:</h2>
<h4> Notes: </h4>
<ol>
<li>Book</li>
<li>Note Book</li>
<li>Assignment</li>
</ol>
<h4> Education Level Institutions: </h4>
<ol>
<li>School</li>
<li>College</li>
<li>University</li>
</ol> </body> </html>
Output:
ABOUT AUTHOR
Mirwaise Khan Achakzai A student of computer Science from hamdard university with cgpa=3.7
having command over CSS ,HTML, PHP&MYSQL ,JAVA,WORDPRESS,C++
