Scribd
Upload
113 views

1.introduction To CSS PDF

Uploaded by

avishana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
113 views

1.introduction To CSS PDF

Uploaded by

avishana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

16-Jul-19

Agenda

Introduction to CSS

CSS
Introduction to CSS

1 © 2013 WIPRSOenLTsDitiv|ityW:WInWte.WrnIPaRl&OR.CeOsMtric|tCeOdNFIDENTIAL Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 2

Objеctivеs
In this module, you will
Introduction to • Get introduced toCSS
Cascading Style • Understand the advantages of using CSS

Sheets • Explore different versions of CSS

• Understand basic syntax of CSS

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 3 Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 4

1
16-Jul-19

Introduction to CSS Introduction to CSS(WhyCSS?)


 CSS stands for Cascading Style Sheets
 HTML was primarily used for defining the content of a document like paragraphs, headings
etc. with no formatting
 CSS was first developed in 1997 as a way for defining the look and feel of the web pages  With HTML 3.2 specifications, the formatting tags like color, font etc. were added
 When HTML was used for creating user interface for large web applications, with
 HTML documents can be displayed using different styles hundreds of web pages, formatting individual web pages posed challenges
 To overcome this challenge, World Wide Web Consortium(W3C) introduced CSS
 Styles define how to display HTML elements

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 5 Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 6

Cascading Style Sheets (CSS) CSS 1


 CSS, is a standard for formatting Web pages that goes well beyond the limitations of HTML  CSS1 was introduced in 1996

 CSS extends HTML with more than 70 style properties that can be applied to HTML tags  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

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 7 Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 8

2
16-Jul-19

CSS 2 CSS 3
 Published in 1998
 CSS 3 is the latest edition of CascadingStyle Sheets

 Support for Bidirectional texts


 Several new functionalities have been provided through CSS 3

 New font properties such as shadows wereintroduced


 Functions like rounded corners, background decoration, box shadows, which are
demonstrated in the subsequent sections, are introduced in this version
 CSS 2.1 was the last 2nd generation edition ofCSS

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 9 Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 10

Advantages of using CSS CSS Syntax


 A web application will contains hundreds of web pages, which are created using HTML. The CSS syntax has two main parts : a selector and one or more declarations.

 Formatting these HTML Pages will be a laborious process, as formatting elements Example :
need to be applied to each and every page.

Property
 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. h1 {color:red }

Value

Selector Declaration

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 11 Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 12

3
16-Jul-19

Demo : A Simple CSS Style Example Quiz


<html><body> 1. The HTML element on which you want to apply styles is known as
Output :
<h1> Wipro Technologies </h1>
</body></html> Wipro Technologies a)Declaration
b)Directive
<html>
c)Selector
<head>
d)Property
<style>
h1{color:red} Output :
</style> 2. State whether TRUE or FALSE;
Wipro Technologies
</head>
<body> You can specify only one declaration for a selector.
<h1> Wipro Technologies </h1>
</body>
</html> Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 13 Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 14

CSS Syntax Rules CSS Comments (/* … */)


 A CSS declaration must always end with a semi colon. You can use comments in CSS to omit certain segment of code. The segment of the code
 There can be multiple declarations represented by multiple property value pairs. which is designated as comment will be ignored by the browser.
You can also have declarations on separate lines for easy readability as given below : Beginning of comment : /*
End of comment : */
p { Example :
color:blue; p {
text-align:left; text-align:left;
/* background-color:yellow */
}
color:red;
}

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 15 Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 16

4
16-Jul-19

Quiz Summary
1. Which of the following is the correct syntax for comments in CSS ? In this module you were able to :
a) <!- css syntax --> • Get introduced toCSS
b) // css syntax
• Understand the advantages of using CSS
c) !- css syntax
d) /* css syntax */ • Explore different versions of CSS

• Understand basic syntax of CSS


2. State whether TRUE or FALSE;

A CSS declaration must always end with a semicolon.

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 17 Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 18

Thank You

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 19

You might also like