SlideShare ist ein Scribd-Unternehmen logo
1 von 17
Downloaden Sie, um offline zu lesen
Web Programming and
Design
CSS (Cascading Style Sheet)
By: Gheyath M. Othman
CSS Comments
• A CSS comment starts with /* and ends with */. Comments can also span
multiple lines: like
CSS Comments
2
<!DOCTYPE html><html><head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line comment */
</style>
</head>
<body>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body></html>
You can group selectors. Separate each selector with a comma.
Grouping Selectors
3
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
h1, h2, p {
text-align: center;
color: red;
}
<!DOCTYPE html><html><head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body></html>
When a browser reads a style sheet, it will format the document according to
the information in the style sheet.
Three Ways to Insert CSS:
Ways of Inserting CSS Styles
4
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
• The style sheet file must be saved with a .css extension. The file should not
contain any html tags.
External Style Sheet:
Ways of Inserting a Style Sheet
5
• With an external style sheet, you can change the look of an entire website
by changing just one file!
• Each page must include a reference to the external style sheet file inside
the <link> element. The <link> element goes inside the head section:
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
HTML files
CSS file
With
(mystyle.css)
HTML filesHTML filesHTML filesHTML files
e6_external-style>>
Ways of Inserting a Style Sheet
6
External style sheet example:
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" type="text/css" href=“mystyle.css">
</head>
<body>
<h1>This heading will be affected by external styles.</h1>
</body></html>
HTML file
body{ background-color:skyblue}
h1{
color:red;
text-align:center;
}
CSS file (mystyle.css)
Internal Style Sheet:
Ways of Inserting a Style Sheet
7
• An internal style sheet may be used if one single page has a unique style.
• Internal styles are defined within the <style> element, inside the head
section of an HTML page:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
}
</style>
</head
Internal Style Sheet example:
Ways of Inserting a Style Sheet
8
e7_enternal-style>>
<!DOCTYPE html><html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
CSS style used inside the page in head section
Inline Style Sheet:
Ways of Inserting a Style Sheet
9
• An inline style may be used to apply a unique style for a single element.
• An inline style loses many of the advantages of a style sheet (by mixing
content with presentation).
• To use inline styles, add the style attribute to the relevant tag. The style
attribute can contain any CSS property.
<h1 style="CSS code…">This is a heading.</h1>
Inline Style Sheet example:
Ways of Inserting a Style Sheet
10
e8_inline-style>>
<!DOCTYPE html><html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
<p>This is a paragraph.</p>
</body></html>
Multiple Styles Will Cascade into One
11
Styles can be specified:
• in an external CSS file
• inside the <head> section of an HTML page
• inside an HTML element
Cascading order
Question//What style will be used when there is more than one style specified
for an HTML element?
Inline style (inside an HTML element) has the highest priority, which means that
it will override a style defined inside the <head> tag, or in an external style
sheet, or in a browser (a default value).
e9_priority-style>>
CSS Background
12
CSS background properties are used to define the background effects of an
element. CSS properties used for background effects are:
Property Description Values
background A shorthand property for
setting all background
properties
in one declaration
background-color
background-image
background-repeat
Background-attachment
Background-position
Background-color
e1_>> e1_1>>
Sets the background
color of an element
color-rgb
color-hex
color-name
transparent
Background-image
e2_>>
Sets an image as the
background
url(URL)
none
CSS Background
13
Property Description Values
Background-repeat
e3_>>
Sets if/how a
background image will
be repeated
repeat
repeat-x
repeat-y
no-repeat
Background-position
e4_>>
Sets the starting
position of a
background image
top left
top center
top right
center left
Center center
Center right
Bottom left
bottom center
bottom right
x% y%
Background-attachment
e5_>>
Sets whether a
background image is
fixed or scrolls with
the rest of the page
scroll
fixed
CSS Background Examples
14
Example-1-:page background
<!DOCTYPE html><html><head>
<style>
body { background-color: #b0c4de; }
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>This is a background color example.</p>
</body></html>
Example-2-:elements background
<!DOCTYPE html><html><head>
<style>
h1 { background-color: #6495ed;}
div { background-color: #b0c4de;}
p { background-color: #e0ffff;}
</style>
</head><body>
<h1>CSS background-color example!</h1>
<div>This is a text inside a div element.
<p>This p has its own background color.</p>
We are still in the div element.</div>
</body></html>
e1_>> e1_1>>
CSS Background Examples
15
Example:background-image
<!DOCTYPE html><html><head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body></html>
e2_>>
CSS Background Examples
16
Example:background-repeat
<!DOCTYPE html><html><head>
<style>
body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>background repeat..</p>
</body></html>
You can use repeat-x
You can use repeat-y
You can use repeat
e3_>>
CSS Background Examples
17
Example:background-position
<!DOCTYPE html><html> <head>
<style>
body {
background-image: url("../img_flwr.gif");
background-position:center center;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>background position..</p>
<p>background position..</p> <p>background
position..</p> <p>background position..</p>
<p>background position..</p>
<p>background position..</p>
</body></html>
e4_>>

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
Web Engineering - Basic CSS Properties
Web Engineering - Basic CSS PropertiesWeb Engineering - Basic CSS Properties
Web Engineering - Basic CSS Properties
 
Web Engineering - Introduction to CSS
Web Engineering - Introduction to CSSWeb Engineering - Introduction to CSS
Web Engineering - Introduction to CSS
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
html-css
html-csshtml-css
html-css
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
Introduction to Cascading Style Sheets
Introduction to Cascading Style SheetsIntroduction to Cascading Style Sheets
Introduction to Cascading Style Sheets
 
Css
CssCss
Css
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
 
Css notes
Css notesCss notes
Css notes
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Css
CssCss
Css
 
Css
CssCss
Css
 

Ähnlich wie Web Design Course: CSS lecture 2

Ähnlich wie Web Design Course: CSS lecture 2 (20)

CSS notes
CSS notesCSS notes
CSS notes
 
Web Development Using CSS3
Web Development Using CSS3Web Development Using CSS3
Web Development Using CSS3
 
Web Development Using CSS3
Web Development Using CSS3Web Development Using CSS3
Web Development Using CSS3
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
CSS.pdf
CSS.pdfCSS.pdf
CSS.pdf
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Css starting
Css startingCss starting
Css starting
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
Css introduction
Css introductionCss introduction
Css introduction
 
Turorial css
Turorial cssTurorial css
Turorial css
 
Web Design Assignment 1
Web Design Assignment 1 Web Design Assignment 1
Web Design Assignment 1
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
css1.pptx
css1.pptxcss1.pptx
css1.pptx
 
Css
CssCss
Css
 

Kürzlich hochgeladen

Cracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxCracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxWorkforce Group
 
Live-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarLive-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarNathanielSchmuck
 
Trauma Training Service for First Responders
Trauma Training Service for First RespondersTrauma Training Service for First Responders
Trauma Training Service for First RespondersBPOQe
 
IIBA® Melbourne - Navigating Business Analysis - Excellence for Career Growth...
IIBA® Melbourne - Navigating Business Analysis - Excellence for Career Growth...IIBA® Melbourne - Navigating Business Analysis - Excellence for Career Growth...
IIBA® Melbourne - Navigating Business Analysis - Excellence for Career Growth...AustraliaChapterIIBA
 
Fabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsFabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsWristbands Ireland
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023Steve Rader
 
Introduction to The overview of GAAP LO 1-5.pptx
Introduction to The overview of GAAP LO 1-5.pptxIntroduction to The overview of GAAP LO 1-5.pptx
Introduction to The overview of GAAP LO 1-5.pptxJemalSeid25
 
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)tazeenaila12
 
Data skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story pointsData skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story pointsyasinnathani
 
Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Winbusinessin
 
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptx
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptxChapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptx
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptxesiyasmengesha
 
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGUNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGlokeshwarmaha
 
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...IMARC Group
 
Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..dlewis191
 
Lecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toLecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toumarfarooquejamali32
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access
 
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...Khaled Al Awadi
 
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003believeminhh
 
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdf
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdfTalent Management research intelligence_13 paradigm shifts_20 March 2024.pdf
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdfCharles Cotter, PhD
 

Kürzlich hochgeladen (20)

Cracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxCracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
 
Investment Opportunity for Thailand's Automotive & EV Industries
Investment Opportunity for Thailand's Automotive & EV IndustriesInvestment Opportunity for Thailand's Automotive & EV Industries
Investment Opportunity for Thailand's Automotive & EV Industries
 
Live-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarLive-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry Webinar
 
Trauma Training Service for First Responders
Trauma Training Service for First RespondersTrauma Training Service for First Responders
Trauma Training Service for First Responders
 
IIBA® Melbourne - Navigating Business Analysis - Excellence for Career Growth...
IIBA® Melbourne - Navigating Business Analysis - Excellence for Career Growth...IIBA® Melbourne - Navigating Business Analysis - Excellence for Career Growth...
IIBA® Melbourne - Navigating Business Analysis - Excellence for Career Growth...
 
Fabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsFabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and Festivals
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023
 
Introduction to The overview of GAAP LO 1-5.pptx
Introduction to The overview of GAAP LO 1-5.pptxIntroduction to The overview of GAAP LO 1-5.pptx
Introduction to The overview of GAAP LO 1-5.pptx
 
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
 
Data skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story pointsData skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story points
 
Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024
 
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptx
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptxChapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptx
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptx
 
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGUNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
 
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
 
Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..
 
Lecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toLecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb to
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024
 
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
 
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003
 
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdf
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdfTalent Management research intelligence_13 paradigm shifts_20 March 2024.pdf
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdf
 

Web Design Course: CSS lecture 2

  • 1. Web Programming and Design CSS (Cascading Style Sheet) By: Gheyath M. Othman
  • 2. CSS Comments • A CSS comment starts with /* and ends with */. Comments can also span multiple lines: like CSS Comments 2 <!DOCTYPE html><html><head> <style> p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */ </style> </head> <body> <p>This paragraph is styled with CSS.</p> <p>CSS comments are not shown in the output.</p> </body></html>
  • 3. You can group selectors. Separate each selector with a comma. Grouping Selectors 3 h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } h1, h2, p { text-align: center; color: red; } <!DOCTYPE html><html><head> <style> h1, h2, p { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body></html>
  • 4. When a browser reads a style sheet, it will format the document according to the information in the style sheet. Three Ways to Insert CSS: Ways of Inserting CSS Styles 4 There are three ways of inserting a style sheet: • External style sheet • Internal style sheet • Inline style
  • 5. • The style sheet file must be saved with a .css extension. The file should not contain any html tags. External Style Sheet: Ways of Inserting a Style Sheet 5 • With an external style sheet, you can change the look of an entire website by changing just one file! • Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the head section: <head><link rel="stylesheet" type="text/css" href="mystyle.css"></head> HTML files CSS file With (mystyle.css) HTML filesHTML filesHTML filesHTML files
  • 6. e6_external-style>> Ways of Inserting a Style Sheet 6 External style sheet example: <!DOCTYPE html><html> <head> <link rel="stylesheet" type="text/css" href=“mystyle.css"> </head> <body> <h1>This heading will be affected by external styles.</h1> </body></html> HTML file body{ background-color:skyblue} h1{ color:red; text-align:center; } CSS file (mystyle.css)
  • 7. Internal Style Sheet: Ways of Inserting a Style Sheet 7 • An internal style sheet may be used if one single page has a unique style. • Internal styles are defined within the <style> element, inside the head section of an HTML page: <head> <style> body { background-color: linen; } h1 { color: maroon; } </style> </head
  • 8. Internal Style Sheet example: Ways of Inserting a Style Sheet 8 e7_enternal-style>> <!DOCTYPE html><html> <head> <style> body { background-color: linen; } h1 { color: maroon; text-align: center; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body></html> CSS style used inside the page in head section
  • 9. Inline Style Sheet: Ways of Inserting a Style Sheet 9 • An inline style may be used to apply a unique style for a single element. • An inline style loses many of the advantages of a style sheet (by mixing content with presentation). • To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. <h1 style="CSS code…">This is a heading.</h1>
  • 10. Inline Style Sheet example: Ways of Inserting a Style Sheet 10 e8_inline-style>> <!DOCTYPE html><html> <body> <h1 style="color:blue;margin-left:30px;">This is a heading.</h1> <p>This is a paragraph.</p> </body></html>
  • 11. Multiple Styles Will Cascade into One 11 Styles can be specified: • in an external CSS file • inside the <head> section of an HTML page • inside an HTML element Cascading order Question//What style will be used when there is more than one style specified for an HTML element? Inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). e9_priority-style>>
  • 12. CSS Background 12 CSS background properties are used to define the background effects of an element. CSS properties used for background effects are: Property Description Values background A shorthand property for setting all background properties in one declaration background-color background-image background-repeat Background-attachment Background-position Background-color e1_>> e1_1>> Sets the background color of an element color-rgb color-hex color-name transparent Background-image e2_>> Sets an image as the background url(URL) none
  • 13. CSS Background 13 Property Description Values Background-repeat e3_>> Sets if/how a background image will be repeated repeat repeat-x repeat-y no-repeat Background-position e4_>> Sets the starting position of a background image top left top center top right center left Center center Center right Bottom left bottom center bottom right x% y% Background-attachment e5_>> Sets whether a background image is fixed or scrolls with the rest of the page scroll fixed
  • 14. CSS Background Examples 14 Example-1-:page background <!DOCTYPE html><html><head> <style> body { background-color: #b0c4de; } </style> </head> <body> <h1>My CSS web page!</h1> <p>This is a background color example.</p> </body></html> Example-2-:elements background <!DOCTYPE html><html><head> <style> h1 { background-color: #6495ed;} div { background-color: #b0c4de;} p { background-color: #e0ffff;} </style> </head><body> <h1>CSS background-color example!</h1> <div>This is a text inside a div element. <p>This p has its own background color.</p> We are still in the div element.</div> </body></html> e1_>> e1_1>>
  • 15. CSS Background Examples 15 Example:background-image <!DOCTYPE html><html><head> <style> body { background-image: url("paper.gif"); } </style> </head> <body> <h1>Hello World!</h1> </body></html> e2_>>
  • 16. CSS Background Examples 16 Example:background-repeat <!DOCTYPE html><html><head> <style> body { background-image: url("paper.gif"); background-repeat: no-repeat; } </style> </head> <body> <p>background repeat..</p> </body></html> You can use repeat-x You can use repeat-y You can use repeat e3_>>
  • 17. CSS Background Examples 17 Example:background-position <!DOCTYPE html><html> <head> <style> body { background-image: url("../img_flwr.gif"); background-position:center center; background-repeat:no-repeat; } </style> </head> <body> <p>background position..</p> <p>background position..</p> <p>background position..</p> <p>background position..</p> <p>background position..</p> <p>background position..</p> </body></html> e4_>>