You are on page 1of 9

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


Learn CSS in a easy way 2010

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>

Vinod Kumar Verma Page 3


Learn CSS in a easy way 2010

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>
<TITLE> USING INTERNAL STYLE SHEET </TITLE>
<STYLE>
H1
{
font-family:arial;
font-weight:bold;
background-image:url(‘sunset.jpg’)
}
P

Vinod Kumar Verma Page 4


Learn CSS in a easy way 2010
{
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>
<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 class=”AlertStyle”>
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>

F In the above example, Sunset.jpg file must be in the same folder where
classes.html is saved

Vinod Kumar Verma Page 5


Learn CSS in a easy way 2010

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>
<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
}
.Alert Style
{
color:red;
font-style:italic;
font-weight:bold;
font-size:20px
background-color:yellow
}
a:link {
color: blue;
text-decoration: underline; <!-- we can also specify none for no underline below hyperlink -->
}
a:visited {
color: yellow;
text-decoration: underline;
}
a:hover {

Vinod Kumar Verma Page 6


Learn CSS in a easy way 2010
color: cyan;
text-decoration: underline;
}
</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 class=”AlertStyle”>
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>
<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”

Vinod Kumar Verma Page 7


Learn CSS in a easy way 2010

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;
background-image:url(‘sunset.jpg’)
}
P
{
color:blue;
font-style:italic;
font-size:20px
}
.AlertStyle
{
color:red;
font-style:italic;
font-weight:bold;
font-size:20px
background-color:yellow
}
a:link {
color: blue;
text-decoration: underline; <!-- we can also specify none for no underline below hyperlink -
->
}
a:visited {
color: yellow;
text-decoration: underline;
}
a:hover {
color: cyan;
text-decoration: underline;
}
Home.html

<HTML>
<HEAD>
<TITLE> USING INTERNAL STYLE SHEET </TITLE>
Vinod Kumar Verma Page 8
Learn CSS in a easy way 2010
<link rel=”style sheet” type=”text/css” href=”Styles.css”>
</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 class=”AlertStyle”>
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>
<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>

Vinod Kumar Verma Page 9