Multiple Style Sheets in CSS Website Template

Scotty Moe

Updated on:

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:

css multiple styles
Figure 1: Displaying CSS Website Template with multiple Styles.

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:

  1. a:link
  2. a:hover
  3. a:visited
  4. 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;

}

&nbsp;

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;

}

&nbsp;

</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:

Links in CSS Website Template
Figure 2: Displaying unvisited link in CSS Website Template
unvisited links
Figure 3: Displaying hover link in CSS Website Template
hover links
Figure 4: Displaying active link in CSS Website Template
active link
Figure 5: Displaying visited link in CSS Website Template

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>

&nbsp;

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;}

&nbsp;

</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:

 

displaying lists
Figure 5: Displaying Lists in CSS Website Template

 

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++