Types of StyleSheet with examples

**shopuz** · 07-28-2012, 09:38 AM

Stylesheet information can be presented in a webpage in three forms:
1. Internal
2. Document
3. External

Internal Style
The syling codes are given along with the html element.
eg: <a href="#" style="color:red;">Click Here</a>

Document Style
The style information are given in the head section of the document in the following form
<style type ="text/css">

h1{color:red;}
a{text-decoration: none;}|

</style>

External Style
All the css codes are kept in a file with extension .css and then a link to the file is given in the head section of the webpage.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

**prabinshr4u** · 08-17-2012, 07:40 PM

here is a example of how to use style sheet. remeber css file has to be created and saved then it should be called in the new page..
<style type =”text/css”>
H1{font-family=arial,font color=red background-color=blue}
H2{font-family=arial,font color=black background-color=blue}
H3{font-family=arial,font color=red background-color=black}
</style>
Than ,save and open new file.
<head>
<link tel=”style sheet” href=”directory path where the style sheet is saved” type=”text/css”>
</head>
<body>
<h1>.............................................. </h1>
<h2>.............................................. </h2>
<h3>.............................................. </h3>
</body>

**prabinshr4u** · 08-17-2012, 07:42 PM

Meta tag will put in transition effect that appears on logging in or logging out of a page “page-enter” attribute will apply the transition on opening the page and “page-out” transition will apply the transition on leaving the page.
The attribute transition =8 will create a vertical blinding transition, as you have already observed it. The attribute duration=3.5 specifies the time for the transition effect to exist.
Ex:-
<meta http-equiv="Page-Enter" content="RevealTrans(Draration=3.5, transition=8)" />

**temple760** · 08-25-2012, 01:05 PM

while talking about the style sheet there are mainly the internal and external and the document types and all are important having the features and there are many more features inside it and also there are style sheet and also there are more and more happy and more and more things whicch make the style sheet more effective

**Basantraj48** · 08-28-2012, 11:34 PM

A style sheet is a list of style rules that describe the style and appearance of an html document. Styles are used in a webpage to control the font size, color, etc. The Style assignment process is accomplished with the <STYLE> …</STYLE> tags. The <STYLE> …</STYLE> tags are written with in the <HEAD> …</HEAD> tags. You can group more than one style rule using the <style>……</style>tag pair unlike of applying it individually in inline Style. Each of these tags when used in the BODY of HTML code will apply the style rules.
1. Inline Style Sheet:-
It is applied to individual elements in the webpage.
Syntax
<html tag style=”property:value”>

Example
<HTML>
<BODY>
<H1 STYLE="font-family:vardana;color:red;font-style:italic">Kathmandu is the capital of Nepal</H1>
<p style="font-family:monotype corsiva;font-size:20pt;font-weight:bold;color:green">Nepal is a beautiful country</p>
</BODY>
</HTML>

2. Embedding Style Sheet:-
We can group more than one style rule using the <style>….</style> tag within HTML code inside the head section.
Syntax
<Style type=“text /css”>
tag {attribute: value; attribute:value;…..…..}
</style>
3. Css (Cascading style sheet):-
It is a separate file with the extension of ‘.css’ that contains different style rules and linked to the page with <link> tag inside the <head> part of an html page.
Syntax
<head>
<link rel=stylesheet href=”filename.css” type=”text/css”>
</head>

**benmoriz** · 09-10-2012, 06:42 AM

Example
<HTML>
<BODY>
<H1 STYLE="font-family:vardana;color:red;font-style:italic">Kathmandu is the capital of Nepal</H1>
<p style="font-family:monotype corsiva;font-size:20pt;font-weight:bold;color:green">Nepal is a beautiful country</p>
</BODY>
</HTML>

2. Embedding Style Sheet:-
We can group more than one style rule using the <style>….</style> tag within HTML code inside the head section.
Syntax
<Style type=“text /css”>
tag {attribute: value; attribute:value;…..…..}
</style>
3. Css (Cascading style sheet):-
It is a separate file with the extension of ‘.css’ that contains different style rules and linked to the page with <link> tag inside the <head> part of an html page.
Syntax
<head>
<link rel=stylesheet href=”filename.css” type=”text/css”>
</head>

**njtboy** · 09-14-2012, 01:28 AM

Stylesheet information can be presented in a webpage in three forms:
1. Internal
2. Document
3. External

Internal Style
The syling codes are given along with the html element.
eg: <a href="#" style="color:red;">Click Here</a>

Document Style
The style information are given in the head section of the document in the following form
<style type ="text/css">

**Rajiv Rai** · 09-25-2012, 06:17 AM

yes these three are the types of style sheet and i have use these all style sheet but let me know me can you please tell me among these three style sheet which style sheet is commonly used ?? for me i guess external so what abut you ?

**fshakya** · 09-27-2012, 04:13 PM

These style sheets makes our page more stylish and easier as well. These codes are very important and it would be great help if we remember these codes. This is easy way to put styles on the page and can be more effective as well. Thanks for sharing these style sheets types with its example as well.

**bimal chand** · 10-07-2012, 02:04 PM

Stylesheet definitions created with CSS can be inserted into an HTML document in a few different ways.

This tutorial focuses on:
The three types of stylesheets
Creating an internal stylesheet
Creating an external stylesheet
Creating an inline stylesheet
Multiple stylesheets
The three types of stylesheets

There are three types of stylesheets:

Internal - Placed right on the page whose interface it will affect.
External - Placed in a separate file.
Inline - Placed inside a tag it will affect.
Creating an internal stylesheet

Use an internal stylesheet when you want an HTML document to have a unique style. An internal stylesheet is defined using the <style> tag and goes in the head section of an HTML document.

The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css".

Syntax:
<style type="text/css">
styles go here
</style>
Example:
<html>
<head>
<style type="text/css">
p {color: green}
</style>
</head>
<body>
<p>
The text in this paragraph will be green.
</p>
<p>
This paragraph too.
</p>
</body>
</html>
The above stylesheet definition specifies that all text declared with the <p> tag should be green.

**bimal chand** · 10-07-2012, 02:06 PM

Introduction to style sheets

Style sheets represent a major breakthrough for Web page designers, expanding their ability to improve the appearance of their pages. In the scientific environments in which the Web was conceived, people are more concerned with the content of their documents than the presentation. As people from wider walks of life discovered the Web, the limitations of HTML became a source of continuing frustration and authors were forced to sidestep HTML's stylistic limitations. While the intentions have been good -- to improve the presentation of Web pages -- the techniques for doing so have had unfortunate side effects. These techniques work for some of the people, some of the time, but not for all of the people, all of the time. There are two types of stylesheet:

1) Internal stylesheet.
2) External stylesheet.

**bimal chand** · 10-07-2012, 02:08 PM

Cascading Style Sheets
Style sheets fulfill the promise of separating presentation from content on the web because the visual presentation of a web page can be prescribed with style sheets while the content can rest in HTML. Although there are problems with browser implementation of CSS, style sheets are everywhere. When this course was originally written in 2000, the use of style sheets was fairly rare and <font> tags ruled. Not any more. CSS is everywhere.
1. Internal Stylesheet.
2. External Stylesheet

**sadjoker** · 10-20-2012, 11:52 AM

i think document style is also known as inline style sheet and the style information are given in the head section of the document in the following form
<style type ="text/css">

h1{color:red;}
a{text-decoration: none;}|

</style>

**paudelsonu88** · 12-01-2012, 09:06 AM

Types of style sheet are classified into three categories which are differentiated depending upon its file location like internal style sheet is an HTML file which is linked with the <a href> tag, document style sheet is imported in the format o document style whereas external style sheet is created by linking with external files having the extension as .css

**ravi1gupta** · 06-16-2013, 02:57 AM

Types of StyleSheet is one of the part of the link element that is used to specify a style sheet and so many other stylesheet things. they are used to allow one of the type attribute such that one of the type is considered to be text,css and so many other stylesheet things.