Scribd
Upload
12 views20 pages

Stylesheet (1)

The document provides an overview of style sheets, explaining their purpose, syntax, and types, including external, internal, and inline styles. It details how to apply styles using CSS and provides examples of HTML code demonstrating the use of various styles. Additionally, it highlights the advantages and disadvantages of each style sheet type in web development.

Uploaded by

Deo sagar kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
12 views20 pages

Stylesheet (1)

The document provides an overview of style sheets, explaining their purpose, syntax, and types, including external, internal, and inline styles. It details how to apply styles using CSS and provides examples of HTML code demonstrating the use of various styles. Additionally, it highlights the advantages and disadvantages of each style sheet type in web development.

Uploaded by

Deo sagar kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 20

Style Sheet

• S.S is simply a collection of rules


• These rules include a selector – an html
element
• A class name or an id value which bound
to a style property such as font family
followed by a colon and the values for that
style property.
• Multiple style rules may be included by
separating the rules with semicolons.
Style sheet
• The purpose of a style sheet is to create a
presentation for a particular element or set
of elements
• Syntax
• Element { style specification}
• Eg.,
• H1 { font-family: impact;
font-size: 28pt}
External style sheet and internal style sheet
external internal
Can set style for many Can control style to a
documents with one single character
style sheet instance
Require extra download Overrides any external
time for the style sheet styles
which may delay page
rendering
Need not re-apply Need to reapply
throughout the
document
How to Use Styles

• When a browser reads a style sheet, it will


format the document according to it.
• There are three ways of inserting a style
sheet:
External Style Sheet
• E SS is simply a plain text file containing
the style specifications for html tags.
• The extension indicating that the
document provides style sheet information
is .css for [Cascating Style Sheets]
• CSS is used to control the style and layout
of multiple Web pages all at once.
• With CSS, all formatting can be removed
from the HTML document and stored in a
separate file.
• CSS gives you total control of the layout,
without messing up the document content.
• An external style sheet is ideal when the
style is applied to many pages. With an
external style sheet,
• you can change the look of an entire Web
site by changing one file.
• Each page must link to the style sheet using
the <link> tag.
• The <link> tag goes inside the head section.
• <head>
• <link rel="stylesheet" type="text/css“
• href="mystyle.css">
• </head>
Internal Style Sheet
• An internal style sheet should be used when a
single document has a unique style. You define
internal styles in the head section with the
<style> tag.
• <head>
• <style type="text/css">
• body {background-color: red}
• p {margin-left: 20px}
• </style>
• </head>
Inline Styles
• An inline style should be used when a
unique style is to be applied to a single
occurrence of an element.
• To use inline styles you use the style
attribute in the relevant tag.
• The style attribute can contain any CSS
property,.
• <p style="color: red;
• margin-left: 20px">This is a paragraph
• </p>
• Adding the text and highlight
CLASS descriptions into the style
sheet definition defines two styles.
<HTML>
<HEAD>
<TITLE>The HTML example</TITLE>
<STYLE>
BODY { background : #006000}
P.main { font-family : Arial;
font-size : 12pt;
color : white}
P.info { font-family : Arial;
• font-style : italic;
color : #80C000}
P SPAN { font-style : italic;
font-size : 14pt}
A { color : #C0C8FF;
font-weight : bold}
.text { color: red;
margin-left: 10px;
font-size: 28px;
• font-family: Arial Black }
.highlight { margin-top: -38px;
margin-left: 8px;
color: darkred;
font-size: 28px;
font-family: Arial Black }
</STYLE>
</HEAD>
<BODY>
<P CLASS="main"><DIV CLASS="text" STYLE="{color :
white; font-style : italic}">The HTML Reference
Library</DIV>
<DIV CLASS="highlight" STYLE="{color : gray; font-style
: italic}">The HTML Reference Library</DIV>
<P CLASS="main">is a Windows HLP file, detailing all
currently useable HTML syntax. It is available in the
following formats :
<UL>
<LI><DIV CLASS="text">Windows</DIV>
• <DIV CLASS="highlight">Windows </DIV>
<LI><DIV CLASS="text" STYLE="{color :
blue"}>Windows server</DIV>
<DIV CLASS="highlight" STYLE="{color :
darkblue"}>Windows</DIV>
</UL>
<P CLASS="info">For more information
<SPAN>HTMLib</SPAN>, contact <A
HREF="mailto:email id">email id</A>
</BODY>
</HTML>
Style Sheet Examples
• <HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
--------------------------------------------------------------------------
• <STYLE>
P.one {font-family : Arial;
font-size : 12pt}
---------------------------------------------------------------------------
• P.two { font-family : Arial;
font-style : italic}
</STYLE>
---------------------------------------------------------------------------
• </HEAD>
<BODY>
<P CLASS=“one">The HTML exampl
<UL>
<LI>Windows
<LI>Windows NT
</UL>
<P CLASS=“two">For more information contact <A HREF="mailto:e-
mail address>email address</A>
</BODY>
</HTML>
• some colour and highlighting of the link text
and (note the way the highlighting, using the
<SPAN> element inherits the colour of the
paragraph in which it resides) :
• <HTML>
<HEAD>
<TITLE>The HTML ex</TITLE>
<STYLE>
BODY { background : #006000}
P.main { font-family : Arial;
font-size : 12pt;
color : white}
P.info { font-family : Arial;
font-style : italic;
• color : #80C000}
P SPAN { font-style : italic;
font-size : 14pt}
A { color : #C0C8FF;
font-weight : bold}
</STYLE>
</HEAD>
<BODY>
<P CLASS="main">The <SPAN>HTML Reference
</SPAN> is a Windows HLP file, detailing all currently
useable HTML :
<UL>
<LI>Windows 3.x
<LI>Windows 95/NT
</UL>
<P CLASS="info">For more information about the
<SPAN>HTMLib</SPAN>, contact <A HREF="mailto:
email id">email id</A>
</BODY>
</HTML>
• Adding the text and highlight CLASS descriptions into
the style sheet definition defines two styles. By using the
negative top-margin property in the highlight class, text
specified as using this class can be over-laid on other
text.
• <HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<STYLE>
BODY { background : #006000}
P.main { font-family : Arial;
font-size : 12pt;
color : white}
P.info { font-family : Arial;
font-style : italic;
color : #80C000}
P SPAN { font-style : italic;
font-size : 14pt}
• A { color : #C0C8FF;
font-weight : bold}
.text { color: red;
margin-left: 10px;
font-size: 28px;
font-family: Arial Black }
.highlight { margin-top: -38px;
margin-left: 8px;
color: darkred;
font-size: 28px;
font-family: Arial Black }
</STYLE>
</HEAD>
<BODY>
<P CLASS="main"><DIV CLASS="text"
STYLE="{color : white; font-style : italic}">The
HTML Reference Library</DIV>
• <DIV CLASS="highlight" STYLE="{color : gray;
font-style : italic}">The HTML Reference
Library</DIV>
<P CLASS="main">is a Windows HLP file,
detailing all currently useable HTML syntax. It is
available in the following formats :
<UL>
<LI><DIV CLASS="text">Windows 3.x</DIV>
<DIV CLASS="highlight">Windows 3.x</DIV>
<LI><DIV CLASS="text" STYLE="{color :
blue"}>Windows 95/NT</DIV>
• <DIV CLASS="highlight" STYLE="{color :
darkblue"}>Windows </DIV>
</UL>
<P CLASS="info">For more information
about the <SPAN>Html</SPAN>, contact
<A HREF="mailto:____">_____</A>
</BODY>
</HTML>

You might also like