Css by - Vinod Kumar Verma

2010
[LEARN CSS IN A EASY WAY]

This document helps the student to learn CSS i.e. Cascading Style Sheet in a very easy way. CSS as we know
that it is one of the mechanisms to apply consistent formatting across web application.
Learn CSS in a easy way 2010
CSS
v While designing a Web page, you can control the appearance of content by assigning text
properties, colors, and font styles.
v Cascading Style Sheets (CSS) enable you to quickly format content and maintain a
consistent look throughout a website.
Cascading Style Sheets (CSS):
Are a collection of rules that define the style applied to specific content:
§ These styles determine the layout and appearance of the content on a Web
page.
§ These styles are placed separately in a location different from the content
they are formatting.
CSS has various way of applying it.

1. In-Line style sheet
2. Internal style sheet
3. External style sheet
INLINE STYLE SHEET
Inline style sheet is applied on the HTML element using STYLE attribute. Inline style sheet is
applied individually on the target element. It will not affect other element of same type. Its effect will
only on the element where we have applied the style attribute.
For e.g.
INLINE.HTML
<HTML>
<HEAD>
<TITLE> USING INLINE STYLE SHEET </TITLE>
</HEAD>
<BODY>
<center><h1 style=”background-color:blue;color:white”>NOTICE</h1></center>
<h1>NIIT LIMITED</h1>
</BODY>
</HTML>
F In the above example the background and text color will be changed only for
the first heading not the second heading as it is applied as inline style sheet. It is
sometime used to override the internal style sheet setting.
Vinod Kumar Verma Page 2

INTERNAL STYLE SHEET

It is applied at page level i.e. the setting which we define for any tag will be applied on all the
occurrence of that tag in that page. We can define internal style sheet by two ways :-
a. TAG SPECIFIC
b. GENERIC STYLE
TAG SPECIFIC : - it is applied on the specific tag like <P> or <h1> etc. It is applied by adding
<STYLE> tag.
Syntax to create internal style sheet(TAG Specific)

TAGNAME
{
Property1:value;
Property2:value;
.
.
}
Where TAGNAME can be any valid HTML tag and property defines the style characteristics like
font name, size, color, width etc.
For. e.g.
TAGS.HTML
<HTML>
<HEAD>
<TITLE> USING INTERNAL STYLE SHEET </TITLE>
<STYLE>
H1
{
font-family:arial;
font-weight:bold;
background-image:url(‘sunset.jpg’)
}
P
{
color:blue;
font-style:italic;
font-size:20px
}
</STYLE>
</HEAD>
<BODY>
<h1>WHAT’S NEW IN MS-WORD 2007</h1>
<p>

Microsoft Office Word 2007 helps you produce professional-looking documents by providing a
comprehensive set of tools for creating and formatting your document in a new interface. Rich
review, commenting, and comparison capabilities help you quickly gather and manage feedback
from colleagues. Advanced data integration ensures that documents stay connected to important
sources of business information.
</p>
<br><br><br>
<h1> Terms of use </h1>
<p>
Information in this document, including URL and other Internet Web site references, is subject to
change without notice. Unless otherwise noted, the companies, organizations, products, domain
names, e-mail addresses, logos, people, places, and events depicted in examples herein are
fictitious. No association with any real company, organization, product, domain name, e-mail
address, logo, person, place, or event is intended or should be inferred.\
</p>
</BODY>
</HTML>
GENERIC STYLES : it can be applied on any tag in <HTML>. It is used by 2 ways:-

a. CLASS Style
b. ID Style
CLASS style :-
v Are CSS styles that can be applied to text on a Web page, irrespective of the HTML
tags surrounding the text.
v Are identifiable by names prefixed with a dot(.).
v Differ in the properties and the values they contain.
For E.g.
CLASSES.HTML
<HTML>
<HEAD>
<STYLE>
H1
{
font-family:arial;
font-weight:bold;
}
P

{
color:blue;
font-style:italic;
font-size:20px
}
.AlertStyle
{
color:red;
font-style:italic;
font-weight:bold;
font-size:20px
background-color:yellow
}
</STYLE>
</HEAD>
<BODY>
<p>
</p>
<br><br><br>
<p class=”AlertStyle”>
</p>
</BODY>
</HTML>
F In the above example, Sunset.jpg file must be in the same folder where
classes.html is saved

F to define class style we have to give its name begins with dot(.) and while applying
it on any specific tag we have to use class=”class name”
F ID is also implemented in same way but it begins with Hash(#) and applied with
ID=”id name”
ADVANCE STYLE ON HYPERLINK :

we can make hyperlink more interactive with the CSS styles.
For e.g.
ADVANCE.HTML
<HTML>
<HEAD>
<STYLE>
H1
{
font-family:arial;
font-weight:bold;
}
P
{
color:blue;
font-style:italic;
font-size:20px
}
.Alert Style
{
color:red;
font-style:italic;
font-weight:bold;
font-size:20px
}
a:link {
color: blue;
text-decoration: underline; 
}
a:visited {
color: yellow;
text-decoration: underline;
}
a:hover {

color: cyan;
}
</STYLE>
</HEAD>
<BODY>
<p>
</p>
<br><br><br>
</p>
<a href=”http://www.google.com”>Click to visit Google</a><br>
<a href=”http://www.niitstudent.com/india”>Click to access niitstudent.com </a>
</BODY>
</HTML>
EXTERNAL STYLE SHEET

When our website contains number of pages and the same formatting is repeated on
multiple pages then instead of defining the internal CSS on each and every page we have to create
External CSS file so that it can be shared across multiple pages. External CSS stores common
formatting centrally and can be reused in same web application or across web application.
Advantages:
1. We have to define the styles only once
2. Reusability
3. Global changes can be made easily
F External CSS file is save with the extension “.CSS”

F They can be applied on page by adding the following lines on top of every page
<link rel=”style sheet” type=”text/css” href=”CSS file name”>
For e.g.
STYLES.CSS
H1
{
font-family:arial;
font-weight:bold;
}
P
{
color:blue;
font-style:italic;
font-size:20px
}
.AlertStyle
{
color:red;
font-style:italic;
font-weight:bold;
font-size:20px
}
a:link {
color: blue;
text-decoration: underline; <!-- we can also specify none for no underline below hyperlink -
->
}
a:visited {
color: yellow;
}
a:hover {
color: cyan;
}
Home.html
<HTML>
<HEAD>
<link rel=”style sheet” type=”text/css” href=”Styles.css”>
</HEAD>
<BODY>
<p>
</p>
<br><br><br>
</p>
<a href=”http://www.google.com”>Click to visit Google</a><br>
<a href=”http://www.niitstudent.com/india”>Click to access niitstudent.com </a>
</BODY>
</HTML>

Css by - Vinod Kumar Verma

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Css by - Vinod Kumar Verma

Hochgeladen von

Copyright:

Verfügbare Formate

2010

[LEARN CSS IN A EASY WAY]

CSS has various way of applying it.

Vinod Kumar Verma Page 2

INTERNAL STYLE SHEET

Syntax to create internal style sheet(TAG Specific)

Vinod Kumar Verma Page 3

GENERIC STYLES : it can be applied on any tag in <HTML>. It is used by 2 ways:-

Vinod Kumar Verma Page 4

Vinod Kumar Verma Page 5

ADVANCE STYLE ON HYPERLINK :

Vinod Kumar Verma Page 6

EXTERNAL STYLE SHEET

F External CSS file is save with the extension “.CSS”

Vinod Kumar Verma Page 7

Vinod Kumar Verma Page 9

Das könnte Ihnen auch gefallen