SlideShare a Scribd company logo
1 of 15
Cascading style sheets (CSS)
-Varsha Kumari
2/2/2019 1
Introduction
What is CSS?
CSS stands for Cascading Style Sheets
Style sheet language
Describe the looks and formatting of a
document
Styles define how to display HTML elements
enable the separation of document content
from document presentation
2/2/2019 2
CSS Syntax
A CSS rule set consists of a selector and a
declaration block
Selector
points to the HTML element you want to style
Declaration
contains one or more declarations separated by
semicolons
includes a property name and a value, separated
by a colon
2/2/2019 3
CSS Syntax
2/2/2019 4
CSS Example
p {color: red; text-align: center; font-
size:30px; text-transform: uppercase;}
body {background-image: url(“gla.jpg");
margin-left:20px;}
td{background-color:”red” ;}
h2 { color: rgb(255,0,0); }
p { font-family: "Times New Roman“; } 5
• div {
border: 1px solid black;
margin: 100px 150px 100px 80px;
background-color: lightblue;
• }
2/2/2019 6
Three Ways to Insert CSS
Internal style sheet
Within the html document
External style sheet
As an external CSS file with .css extension
Inline style
In the same line where we want to apply the style
2/2/2019 7
Internal Style Sheet
Used when a single document has a unique
style
Defined in the head section of an HTML page
Defined within the <style> tag
Scope is up to the same document only
Every document has its own Internal CSS, if
required.
2/2/2019 8
abc.html
<html>
<head>
<style>
p {text-align: center; color: red;}
h1{color: red; text-transform: lowercase;}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<h1Me too!</h1>
<p>And me!</p>
</body>
</html> Save it as “abc.html”
2/2/2019 9
External Style Sheet
 Ideal when the style is applied to many pages
 Changes the look of an entire Web site by
changing just one file
 Include a link to the style sheet with the
<link> tag
 <link> tag goes inside the head section
 Attributes of <link> tag:
rel
type
href
 CSS file is saved using .css extension
2/2/2019 10
External Style Sheet Example
H1 {color: red;}
H6{Color: green;}
Save it as “mystyle.css”
2/2/2019 11
External Style Sheet Example (Contd.)
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1> This is the biggest heading</h1>
<h6> This is the smallest heading</h6>
</body>
</html>
Save it as “abc.html”
2/2/2019 12
Inline Style Sheet
adds the style attribute to the relevant tag
style attribute can contain any CSS property
<p style="color:green;margin-left:20px; text-
transform: uppercase;” >
GLA University
</p>
Will work for only the specified tag at that line
only
2/2/2019 13
Cascading order
All the styles will "cascade" into a new
"virtual" style sheet by the following rules:
Inline style (inside an HTML element) (Highest
priority)
Internal style sheet (in the head section)
External style sheet
Browser default (Lowest priority)
2/2/2019 14
2/2/2019 15

More Related Content

What's hot (18)

CSS in HTML
CSS in HTMLCSS in HTML
CSS in HTML
 
PPT on Basic HTML Tags
PPT on Basic HTML TagsPPT on Basic HTML Tags
PPT on Basic HTML Tags
 
HTML
HTMLHTML
HTML
 
902350 html jar
902350 html jar902350 html jar
902350 html jar
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
Html and its tags
Html and its tagsHtml and its tags
Html and its tags
 
Css
CssCss
Css
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
Std 10 Chapter 2 Head and Body Sections in HTML (Part 2- Body section)
Std 10 Chapter 2 Head and Body Sections in HTML (Part 2- Body section)Std 10 Chapter 2 Head and Body Sections in HTML (Part 2- Body section)
Std 10 Chapter 2 Head and Body Sections in HTML (Part 2- Body section)
 
HTML basics
HTML basicsHTML basics
HTML basics
 
WEB PAGE DESIGN USING HTML
WEB PAGE DESIGN USING HTMLWEB PAGE DESIGN USING HTML
WEB PAGE DESIGN USING HTML
 
Web Application and HTML Summary
Web Application and HTML SummaryWeb Application and HTML Summary
Web Application and HTML Summary
 
web development basics tables part2
web development basics tables part2web development basics tables part2
web development basics tables part2
 
HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html project
Html projectHtml project
Html project
 

Similar to Css mod1 (20)

Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
IP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).pptIP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).ppt
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css starting
Css startingCss starting
Css starting
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
 
Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Css introduction
Css introductionCss introduction
Css introduction
 
Session v(css)
Session v(css)Session v(css)
Session v(css)
 
Css
CssCss
Css
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
 
Web technology Unit-II Part-C
Web technology Unit-II Part-CWeb technology Unit-II Part-C
Web technology Unit-II Part-C
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
css-ppt.pdf
css-ppt.pdfcss-ppt.pdf
css-ppt.pdf
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 

More from VARSHAKUMARI49

28,29. procedures subprocedure,type checking functions in VBScript
28,29. procedures  subprocedure,type checking functions in VBScript28,29. procedures  subprocedure,type checking functions in VBScript
28,29. procedures subprocedure,type checking functions in VBScriptVARSHAKUMARI49
 
30,31,32,33. decision and loop statements in vbscript
30,31,32,33. decision and loop statements in vbscript30,31,32,33. decision and loop statements in vbscript
30,31,32,33. decision and loop statements in vbscriptVARSHAKUMARI49
 
27. mathematical, date and time functions in VB Script
27. mathematical, date and time  functions in VB Script27. mathematical, date and time  functions in VB Script
27. mathematical, date and time functions in VB ScriptVARSHAKUMARI49
 
Introduction to web technology
Introduction to web technologyIntroduction to web technology
Introduction to web technologyVARSHAKUMARI49
 
Database normalization
Database normalizationDatabase normalization
Database normalizationVARSHAKUMARI49
 
Register counters.readonly
Register counters.readonlyRegister counters.readonly
Register counters.readonlyVARSHAKUMARI49
 

More from VARSHAKUMARI49 (14)

28,29. procedures subprocedure,type checking functions in VBScript
28,29. procedures  subprocedure,type checking functions in VBScript28,29. procedures  subprocedure,type checking functions in VBScript
28,29. procedures subprocedure,type checking functions in VBScript
 
30,31,32,33. decision and loop statements in vbscript
30,31,32,33. decision and loop statements in vbscript30,31,32,33. decision and loop statements in vbscript
30,31,32,33. decision and loop statements in vbscript
 
27. mathematical, date and time functions in VB Script
27. mathematical, date and time  functions in VB Script27. mathematical, date and time  functions in VB Script
27. mathematical, date and time functions in VB Script
 
Html
HtmlHtml
Html
 
Introduction to web technology
Introduction to web technologyIntroduction to web technology
Introduction to web technology
 
Database normalization
Database normalizationDatabase normalization
Database normalization
 
Joins
JoinsJoins
Joins
 
Sub queries
Sub queriesSub queries
Sub queries
 
Introduction to sql
Introduction to sqlIntroduction to sql
Introduction to sql
 
Vbscript
VbscriptVbscript
Vbscript
 
Js mod1
Js mod1Js mod1
Js mod1
 
Register counters.readonly
Register counters.readonlyRegister counters.readonly
Register counters.readonly
 
Sorting.ppt read only
Sorting.ppt read onlySorting.ppt read only
Sorting.ppt read only
 
Hashing
HashingHashing
Hashing
 

Recently uploaded

Architect Hassan Khalil Portfolio for 2024
Architect Hassan Khalil Portfolio for 2024Architect Hassan Khalil Portfolio for 2024
Architect Hassan Khalil Portfolio for 2024hassan khalil
 
main PPT.pptx of girls hostel security using rfid
main PPT.pptx of girls hostel security using rfidmain PPT.pptx of girls hostel security using rfid
main PPT.pptx of girls hostel security using rfidNikhilNagaraju
 
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICSHARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICSRajkumarAkumalla
 
Introduction to IEEE STANDARDS and its different types.pptx
Introduction to IEEE STANDARDS and its different types.pptxIntroduction to IEEE STANDARDS and its different types.pptx
Introduction to IEEE STANDARDS and its different types.pptxupamatechverse
 
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...ranjana rawat
 
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...ranjana rawat
 
Analog to Digital and Digital to Analog Converter
Analog to Digital and Digital to Analog ConverterAnalog to Digital and Digital to Analog Converter
Analog to Digital and Digital to Analog ConverterAbhinavSharma374939
 
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
HARMONY IN THE NATURE AND EXISTENCE - Unit-IVHARMONY IN THE NATURE AND EXISTENCE - Unit-IV
HARMONY IN THE NATURE AND EXISTENCE - Unit-IVRajaP95
 
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptxDecoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptxJoão Esperancinha
 
Extrusion Processes and Their Limitations
Extrusion Processes and Their LimitationsExtrusion Processes and Their Limitations
Extrusion Processes and Their Limitations120cr0395
 
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur EscortsCall Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur EscortsCall Girls in Nagpur High Profile
 
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...ranjana rawat
 
SPICE PARK APR2024 ( 6,793 SPICE Models )
SPICE PARK APR2024 ( 6,793 SPICE Models )SPICE PARK APR2024 ( 6,793 SPICE Models )
SPICE PARK APR2024 ( 6,793 SPICE Models )Tsuyoshi Horigome
 
Call Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile serviceCall Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile servicerehmti665
 
College Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
College Call Girls Nashik Nehal 7001305949 Independent Escort Service NashikCollege Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
College Call Girls Nashik Nehal 7001305949 Independent Escort Service NashikCall Girls in Nagpur High Profile
 
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...Soham Mondal
 
Coefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptxCoefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptxAsutosh Ranjan
 
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...Dr.Costas Sachpazis
 
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur EscortsCall Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur EscortsCall Girls in Nagpur High Profile
 

Recently uploaded (20)

Architect Hassan Khalil Portfolio for 2024
Architect Hassan Khalil Portfolio for 2024Architect Hassan Khalil Portfolio for 2024
Architect Hassan Khalil Portfolio for 2024
 
main PPT.pptx of girls hostel security using rfid
main PPT.pptx of girls hostel security using rfidmain PPT.pptx of girls hostel security using rfid
main PPT.pptx of girls hostel security using rfid
 
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICSHARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
 
Introduction to IEEE STANDARDS and its different types.pptx
Introduction to IEEE STANDARDS and its different types.pptxIntroduction to IEEE STANDARDS and its different types.pptx
Introduction to IEEE STANDARDS and its different types.pptx
 
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
 
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
 
Analog to Digital and Digital to Analog Converter
Analog to Digital and Digital to Analog ConverterAnalog to Digital and Digital to Analog Converter
Analog to Digital and Digital to Analog Converter
 
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
HARMONY IN THE NATURE AND EXISTENCE - Unit-IVHARMONY IN THE NATURE AND EXISTENCE - Unit-IV
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
 
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptxDecoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
 
Extrusion Processes and Their Limitations
Extrusion Processes and Their LimitationsExtrusion Processes and Their Limitations
Extrusion Processes and Their Limitations
 
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur EscortsCall Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
 
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...
 
SPICE PARK APR2024 ( 6,793 SPICE Models )
SPICE PARK APR2024 ( 6,793 SPICE Models )SPICE PARK APR2024 ( 6,793 SPICE Models )
SPICE PARK APR2024 ( 6,793 SPICE Models )
 
Call Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile serviceCall Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile service
 
College Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
College Call Girls Nashik Nehal 7001305949 Independent Escort Service NashikCollege Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
College Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
 
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
 
Coefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptxCoefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptx
 
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptxExploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
 
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
 
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur EscortsCall Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
 

Css mod1

  • 1. Cascading style sheets (CSS) -Varsha Kumari 2/2/2019 1
  • 2. Introduction What is CSS? CSS stands for Cascading Style Sheets Style sheet language Describe the looks and formatting of a document Styles define how to display HTML elements enable the separation of document content from document presentation 2/2/2019 2
  • 3. CSS Syntax A CSS rule set consists of a selector and a declaration block Selector points to the HTML element you want to style Declaration contains one or more declarations separated by semicolons includes a property name and a value, separated by a colon 2/2/2019 3
  • 5. CSS Example p {color: red; text-align: center; font- size:30px; text-transform: uppercase;} body {background-image: url(“gla.jpg"); margin-left:20px;} td{background-color:”red” ;} h2 { color: rgb(255,0,0); } p { font-family: "Times New Roman“; } 5
  • 6. • div { border: 1px solid black; margin: 100px 150px 100px 80px; background-color: lightblue; • } 2/2/2019 6
  • 7. Three Ways to Insert CSS Internal style sheet Within the html document External style sheet As an external CSS file with .css extension Inline style In the same line where we want to apply the style 2/2/2019 7
  • 8. Internal Style Sheet Used when a single document has a unique style Defined in the head section of an HTML page Defined within the <style> tag Scope is up to the same document only Every document has its own Internal CSS, if required. 2/2/2019 8
  • 9. abc.html <html> <head> <style> p {text-align: center; color: red;} h1{color: red; text-transform: lowercase;} </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <h1Me too!</h1> <p>And me!</p> </body> </html> Save it as “abc.html” 2/2/2019 9
  • 10. External Style Sheet  Ideal when the style is applied to many pages  Changes the look of an entire Web site by changing just one file  Include a link to the style sheet with the <link> tag  <link> tag goes inside the head section  Attributes of <link> tag: rel type href  CSS file is saved using .css extension 2/2/2019 10
  • 11. External Style Sheet Example H1 {color: red;} H6{Color: green;} Save it as “mystyle.css” 2/2/2019 11
  • 12. External Style Sheet Example (Contd.) <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1> This is the biggest heading</h1> <h6> This is the smallest heading</h6> </body> </html> Save it as “abc.html” 2/2/2019 12
  • 13. Inline Style Sheet adds the style attribute to the relevant tag style attribute can contain any CSS property <p style="color:green;margin-left:20px; text- transform: uppercase;” > GLA University </p> Will work for only the specified tag at that line only 2/2/2019 13
  • 14. Cascading order All the styles will "cascade" into a new "virtual" style sheet by the following rules: Inline style (inside an HTML element) (Highest priority) Internal style sheet (in the head section) External style sheet Browser default (Lowest priority) 2/2/2019 14