Archive

Category Archives for "CSS"

css

Multiple Style Sheets in CSS Website Template

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

Introduction To Cascading Style Sheet CSS

What is  Cascading Style Sheet CSS?

Cascading Style Sheet (CSS) allows you to define different styles to a web page, define different layouts to a web page and make a web page presentable.

CSS is a very powerful tool for the website developers. It makes the look and feel of your web page completely reliable than simple HTML page had ever did.

CSS is supported by all the browsers and runs on all the browsers and any web developer must have a handy grip over it in order to make his/her web page to be look unique.

Before you begin designing page with CSS, you should have a complete knowledge of HTML as CSS is null without HTML i.e. CSS is embedded inside HTML.

Syntax of  Cascading Style Sheet CSS:

Invoking CSS in a HTML page follow certain rules consists of different selectors and declaration building blocks. Selectors guess which element of HTML is to be applied styles. the coding of CSS is written inside the <style> tag as:

Listing 1: Basic Understanding of CSS

<html>
<head>
<!-- Applying CSS here -->
<style>
p{color:green;}
</style>
</head>
<body>
<p>
Welcome Friends!
</p>
</body>
</html>

Welcome Friends!

Output:basic css

Figure 1: Displaying CSS based introductory program  

Different ways of applying CSS in HTML:

 
There are 3 ways of applying CSS in HTML page:

    1. Inline
    1. Internal
    1. External
    1. 1.    Inline:

In inline, the CSS code is written inside a particular tag. In such tags, “style” is written inside the tag you want to change its style and after that the different styles are applied inside the tag. The following example makes such concept clear:

Listing 2: Inline Cascading Style Sheet CSS

<html>
<head>
</head>
<body>
<!-- Applying Inline CSS here -->
<p style="color:green" align="right">Welcome Friends!</p>
</body>
</html>

Output:

inline css

  Figure 2: Displaying Inline CSS output

    1. 2.    Internal:

       

Inline CSS is used when you want to do styling limited to one HTML page only. In Internal CSS, the code for styling is written in the head section of the HTML page by nesting the <style> tag within the head tag. The following example makes the idea clear about Internal CSS within the HTML page: Listing 3: Internal CSS


<html>
<head>
<!-- Applying Internal CSS here -->
<style>
h1{color:blue; align:center}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>Working With Internal CSS</p>
</body>
</html>

Output:

internal css

Figure 3: Displaying Internal CSS based output  

Class and id:

      • Class:

The class is applied when you want to apply styles for a set of different elements. Using class enable you to impose an exacting style for a lot of different elements having same class. The syntax for applying class in HTML file is writing the “.” operator inside the <style> tag and after that define the element you want to change the style of that element. After that, the name of the class is given as an argument to in the particular tag you want to make changes in styles. The following example will make the concept clear: Listing 4:  Demonstrating the class in HTML file


<html>
<head>
<!-- Demonstrating the class -->
<style>
.geek
{
color:green;
text-align:right;
}
.friend
{
font-size:14pt;
}
</style>
</head>
<body>
<h1 class="geek">Welcome Friends!</h1>
<p class="friend">This example explains the understanding of Class.</p>
</body>
</html>

Output:

css class

Figure 4:  Defining the class

    • ID:

The ID is used to give a style to one single, distinct and exclusive element inside HTML tags. The syntax for creating ID is to use “#” and then write the particular changes you want to apply to a specific tag of HTML. It is also defined inside the style tag in the head section of the HTML code. The following example will make the concept clear: Listing 5:  Usage of Id in HTML

<html>
<head>
<!-- Demonstrating the class -->
<style>
.geek
{
color:green;
text-align:right;k
}
.friend
{
font-size:14pt;
}
</style>
</head>
<body>
<h1 class="geek">Welcome Friends!</h1>
<p class="friend">This example explains the understanding of Class.</p>
</body>
</html>

Output:

css id

 

Figure 5:  Defining the id

Author:  Mirwaise Khan Achakzai

desp: A student of compUter science from hamdard university with cgpa=3.7 .