Scribd
Upload
9 views19 pages

CSS 1 IntroductiontoCSS

This document provides an introduction to Cascading Style Sheets (CSS), detailing its purpose, advantages, and various versions including CSS1, CSS2, and CSS3. It explains the basic syntax of CSS and how it enhances HTML by allowing for more effective formatting of web pages. Additionally, the document includes examples and quizzes to reinforce understanding of CSS concepts.

Uploaded by

coolsiva163
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views19 pages

CSS 1 IntroductiontoCSS

This document provides an introduction to Cascading Style Sheets (CSS), detailing its purpose, advantages, and various versions including CSS1, CSS2, and CSS3. It explains the basic syntax of CSS and how it enhances HTML by allowing for more effective formatting of web pages. Additionally, the document includes examples and quizzes to reinforce understanding of CSS concepts.

Uploaded by

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

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

You might also like