CSS
Introduction to CSS
1 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Agеnda
1 Introduction to CSS
2 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Introduction to
Cascading Style Sheets
3 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Objеctivеs
In this module, you will
– Get introduced to CSS
– Understand the advantages of using CSS
– Explore different versions of CSS
– Understand basic syntax of CSS
4 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Introduction to CSS
• CSS stands for Cascading Style Sheets
• CSS was first developed in 1997 as a way for
defining the look and feel of the web pages
• HTML documents can be displayed using
different styles
• Styles define how to display HTML elements
5 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Introduction to CSS(Why CSS?)
• HTML was primarily used for defining the content
of a document like paragraphs, headings etc.
with no formatting
• With HTML 3.2 specifications, the formatting tag
s like color, font etc. were added
• When HTML was used for creating user interface
for large web applications, with
hundreds of web pages,
formatting individual web pages posed challenge
s
• To overcome this challenge, World Wide Web Co
nsortium(W3C) introduced CSS
6 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Cascading Style Sheets (CSS)
• CSS, is a standard for formatting Web pages
that goes well beyond the limitations of HTML
• CSS extends HTML with more than 70 style
properties that can be applied to HTML tags
7 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
CSS 1
• CSS1 was introduced in 1996
• It is the first edition of Cascading Style Sheets
• Support for several properties
• Unique ‘id’ for each property was introduced
with CSS 1
• Offered enhanced features for implementing
margins, borders, padding and positioning
8 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
CSS 2
• Published in 1998
• Support for Bidirectional texts
• New font properties such as shadows were
introduced
• CSS 2.1 was the last 2nd generation edition of
CSS
9 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
CSS 3
• CSS 3 is the latest edition of Cascading Style
Sheets
• Several new functionalities have been provided
through CSS 3
• Functions like rounded corners, background
decoration, box shadows, which are
demonstrated in the subsequent sections, are
introduced in this version
10 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Advantages of using CSS
A web application will contains hundreds of
web pages, which are created using HTML.
Formatting these HTML Pages will be a
laborious process, as formatting elements
need to be applied to each and every page.
CSS saves lot of work as we can change
the appearance and layout of all the web
pages by editing just one single CSS file.
11 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
CSS Syntax
The CSS syntax has two main parts : a selector
and one or more declarations.
Example :
Property
h1 {color:red }
Value
Selector Declaration
12 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Demo : A Simple CSS Style Example
<html><body>
Output :
<h1> Wipro Technologies </h1>
</body></html> Wipro Technologies
<html>
<head>
<style>
h1{color:red}
</style> Output :
</head>
Wipro Technologies
<body>
<h1> Wipro Technologies </h1>
</body>
</html>
13 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Quiz
1. The HTML element on which you want to apply
styles is known as
a)Declaration
b)Directive
c)Selector
d)Property
2. State whether TRUE or FALSE ;
You can specify only one declaration for a selector.
14 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
CSS Syntax Rules
A CSS declaration must always end with a
semi colon.
There can be multiple declarations represented
by multiple property value pairs.
You can also have declarations on separate lines
for easy readability as given below :
p{
color:blue;
text-align:left;
}
15 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
CSS Comments (/* … */)
You can use comments in CSS to omit certain
segment of code. The segment of the code which
is designated as comment will be ignored by the
browser.
Beginning of comment : /*
End of comment : */
Example :
p{
text-align:left;
/* background-color:yellow */
color:red;
}
16 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Quiz
1. Which of the following is the correct syntax for
comments in CSS ?
a) <!- css syntax -->
b) // css syntax
c) !- css syntax
d) /* css syntax */
2. State whether TRUE or FALSE ;
A CSS declaration must always end with a semicolon.
17 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Summary
In this modulе you were able to :
– Get introduced to CSS
– Understand the advantages of using CSS
– Explore different versions of CSS
– Understand basic syntax of CSS
18 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Thank You
19 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
