SlideShare a Scribd company logo
1
Web Engineering
Lecture 06
Basic CSS Properties
University of Lahore
Nosheen Qamar
CSS background Properties
• You can set background of various HTML
elements:
 The background-color property is used to set the
background color of an element.
 The background-image property is used to set the
background image of an element.
 The background-repeat property is used to
control the repetition of an image in the
background.
 The background-position property is used to
control the position of an image in the background.
 The background-attachment property is used to
control the scrolling of an image in the background.
3
background-color
• <p style=“background-color: yellow;” >
This text has a yellow background. </p>
• Output:
• Possible values:
any color in a valid format.
4
background-image
• <table style=“background-image:url(images/css.gif);” >
<tr><td>
this table has background image which repeats
multiple times.
</td></tr>
</table>
• Output:
• Possible values:
any image with valid format
5
background-repeat
• <table style=“background-image: url(images/cat.gif);
background-repeat: no-repeat; ” >
<tr><td>
by default background-repeat property have repeat
value.
</td></tr>
</table>
• Output:
• Possible values:
repeat, repeat-y, repeat-x, no-repeat
6
background-size
• <table style=“background-image: url(images/cat.gif);
background-repeat: no-repeat;
background-size: 200px 200px; ” >
<tr><td>
background-size property is used to expand the
background image.
</td></tr>
</table>
• Output:
• Possible values:
repeat, repeat-y, repeat-x, no-repeat
7
background-position
• <table style=“background-image: url(images/css.gif);
background-position: 100px 200px; ” >
<tr><td>
this table has background image positioned 100 pixels
away from the left and 200 pixels from the top.
</td></tr>
</table>
• Output:
• Possible values:
X% Y%, top left, Xpx Ypx
left
top
center
top
left
bottom
center
bottom
right
bottom
8
background-attachment
• <p style=“background-image:url(images/css.gif);
background-attachment: fixed; ” >
This paragraph has fixed background image.
</p>
• Output:
• Possible values:
fixed, scroll
CSS Borders
• You can set following border properties of
an element:
 The border-color property is used to set the
color of the border.
 The border-style property is used to set the
style of border.
 The border-width property is used to set .
 The border property is used to set the width,
style and color of the border in one declaration.
border-style
• <p style=“border-style: none”>
This is a border with none width.</p>
<p style=“border-style: solid”>
This is a solid border.</p>
<p style=“border-style: dashed”>
This is a dashed border.</p>
• Output:
• Possible values:
none, solid, dashed, double, groove, ridge, inset, outset
border-color
• <style>
p.example1 {
border-style: solid;
border-bottom-color: #009900;
border-top-color: #FF0000;
border-left-color: #330000;
border-right-color: #0000CC;
}
</style>
<p class=“example1”>
This example is showing all borders in different colors.
</p>
• Output:
• Possible values:
any color with valid format
border-color
• <style>
p.example1 {
border-style: solid;
border-color: #FF0000;
}
</style>
<p class=“example1”>
This example is showing all borders in same color.
</p>
• Output:
• Possible values:
any color with valid format
border-width
• <p style=“border-width: 4px; border-style:
solid;”>
This is a solid border whose width is
4px.</p>
• Output:
• Possible values:
length in px, pt or cm or it should be thin,
medium or thick.
• You can individually change the width of
the bottom, top, left and right borders of an
element. Using the following properties:
 border-bottom-width changes the width of
bottom border.
 border-top-width changes the width of top
border.
 border-left-width changes the width of left
border.
 border-right-width changes the width of right
border.
14
border-width
• <style>
p.example1 {
border-style: solid;
border-bottom-width: 6pt;
border-top-width: 6pt;
border-left-width: 4pt;
border-right-width: 4pt;
}
</style>
<p class=“example1”>
This example is showing all borders in different widths.
</p>
• Output:
• Possible values:
any color with valid format
This example is showing all borders in different widths.
border
• <p style=“border: 4px solid red;”>
This example is showing shorthand
property for border.</p>
• Output:
CSS Margins
• You can set following margin properties of
an element:
 The margin-bottom property specify the
bottom margin of an element.
 The margin-top property specify the top
margin of an element.
 The margin-left property specify the left margin
of an element.
 The margin-right property specify the right
margin of an element.
 The margin shorthand property for setting
margin properties in one declaration.
margin
• <div style=“margin: 20px;”>
This is a paragraph with a specified margin
from all sides.</div>
• Output:
• Possible values:
auto, length in px, %.
margin-top
• <div style=“margin-top: 10px;”>
This is a paragraph with a specified top
margin.</div>
• Output:
• Possible values:
auto, length in px, %.
margin-bottom
• <div style=“margin-bottom: 10px;”>
This is a paragraph with a specified bottom
margin.</div>
• Output:
• Possible values:
auto, length in px, %.
margin-left
• <div style=“margin-left: 10%;”>
This is a paragraph with a specified left
margin.</div>
• Output:
• Possible values:
auto, length in px, %.
margin-right
• <div style=“margin-right: 10%;”>
This is a paragraph with a specified right
margin.</div>
• Output:
• Possible values:
auto, length in px, %.
23
Margin property
• <style>
p {margin: 15px; }
all four margins will be 15px
p {margin: 10px 5px; }
top and bottom margin will be 10px, left and right
will be 2% of the total width of doc.
p {margin: 10px 8px 20px 15px; }
top margin will be 10px, right margin will be 2%,
bottom
margin will be -10px, left margin will be set by the
browser
</style>
CSS Padding
• Padding property allows you to specify how
much space should appear between the
content of an element and its border :
 The padding-bottom property specify the bottom
padding of an element.
 The padding-top property specify the top padding
of an element.
 The padding-left property specify the left padding
of an element.
 The padding-right property specify the right
padding of an element.
 The padding shorthand property serves as the
preceding properties.
padding-bottom
• <p style=“padding-bottom: 15px; border-
width: 1px solid black;”>
This is a paragraph with a specified bottom
padding.</p>
• Output:
This is a paragraph with a specified bottom
padding.
• Possible values:
length in px, %.
padding-top
• <p style=“padding-top: 15px; border-width:
1px solid black;”>
This is a paragraph with a specified top
padding.</p>
• Output:
This is a paragraph with a specified top
padding.
• Possible values:
length in px, %.
padding-left
• <p style=“padding-left: 15px; border-width: 1px
solid black;”>
This is a paragraph with a specified left
padding.</p>
• Output:
This is a paragraph with a specified top
padding.
• Possible values:
length in px, %.
padding-right
• <p style=“padding-right: 15px; border-width:
1px solid black;”>
This is a paragraph with a specified right
padding.</p>
• Output:
This is a paragraph with a specified top
padding.
• Possible values:
length in px, %.
padding
• <p style=“padding: 15px; border-width: 1px
solid black;”>
This is a paragraph with a specified right
padding.</p>
• Output:
This is a paragraph with a specified
top padding.
• Possible values:
length in px, %.
Padding and Margin Properties
• Values for both the padding and the margin
properties can be expressed using:
• em (em values)
• px (pixels)
• mm (millimeters)
• cm (centimeters)
• in (inches)
• % (percentage of the container element)

More Related Content

What's hot (20)

Kick start @ css
Kick start @ cssKick start @ css
Kick start @ css
Umesh Agarwal
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
Sun Technlogies
 
Cascading style sheets - CSS
Cascading style sheets - CSSCascading style sheets - CSS
Cascading style sheets - CSS
iFour Institute - Sustainable Learning
 
Web Design Course: CSS lecture 5
Web Design Course: CSS  lecture 5Web Design Course: CSS  lecture 5
Web Design Course: CSS lecture 5
Gheyath M. Othman
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
EPAM Systems
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Larry King
 
Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
Reshmi Rajan
 
Css3 Complete Reference
Css3 Complete ReferenceCss3 Complete Reference
Css3 Complete Reference
EPAM Systems
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
Mukesh Kumar
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
tutorialsruby
 
CSS ppt
CSS pptCSS ppt
CSS ppt
Sanmuga Nathan
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
Amit Kumar Singh
 
CSS Selectors
CSS SelectorsCSS Selectors
CSS Selectors
Rachel Andrew
 
Understanding CSS for web development by software outsourcing company india
Understanding CSS for web development by software outsourcing company indiaUnderstanding CSS for web development by software outsourcing company india
Understanding CSS for web development by software outsourcing company india
Jignesh Aakoliya
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
abhilashagupta
 
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
shabab shihan
 
Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2
Nur Fadli Utomo
 
Pemrograman Web 2 - CSS
Pemrograman Web 2 - CSSPemrograman Web 2 - CSS
Pemrograman Web 2 - CSS
Nur Fadli Utomo
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
Sun Technlogies
 
Web Design Course: CSS lecture 5
Web Design Course: CSS  lecture 5Web Design Course: CSS  lecture 5
Web Design Course: CSS lecture 5
Gheyath M. Othman
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
EPAM Systems
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Larry King
 
Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
Reshmi Rajan
 
Css3 Complete Reference
Css3 Complete ReferenceCss3 Complete Reference
Css3 Complete Reference
EPAM Systems
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
Mukesh Kumar
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
Understanding CSS for web development by software outsourcing company india
Understanding CSS for web development by software outsourcing company indiaUnderstanding CSS for web development by software outsourcing company india
Understanding CSS for web development by software outsourcing company india
Jignesh Aakoliya
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
abhilashagupta
 
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
shabab shihan
 
Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2
Nur Fadli Utomo
 

Viewers also liked (20)

Need for Web Engineering
Need for Web EngineeringNeed for Web Engineering
Need for Web Engineering
Nosheen Qamar
 
Web Engineering - Web Application Testing
Web Engineering - Web Application TestingWeb Engineering - Web Application Testing
Web Engineering - Web Application Testing
Nosheen Qamar
 
Web engineering - Measuring Effort Prediction Power and Accuracy
Web engineering - Measuring Effort Prediction Power and AccuracyWeb engineering - Measuring Effort Prediction Power and Accuracy
Web engineering - Measuring Effort Prediction Power and Accuracy
Nosheen Qamar
 
Css
CssCss
Css
jayakarthi
 
Web engineering - An overview about HTML
Web engineering -  An overview about HTMLWeb engineering -  An overview about HTML
Web engineering - An overview about HTML
Nosheen Qamar
 
PROGRESS - CSS BASIC
PROGRESS - CSS BASICPROGRESS - CSS BASIC
PROGRESS - CSS BASIC
UKM PROGRESS
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
Nosheen Qamar
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
vijayta
 
Week 12 CSS - Review from last week
Week 12 CSS - Review from last weekWeek 12 CSS - Review from last week
Week 12 CSS - Review from last week
Katherine McCurdy-Lapierre, R.G.D.
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
AakankshaR
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginners
Munir Hoque
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags
Hyejin Oh
 
[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags
Hyejin Oh
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
Ravinder Kamboj
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
Michael Jhon
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
Doncho Minkov
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
joilrahat
 
CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - IntroductionCSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
Mukesh Tekwani
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
Rex Wang
 
Need for Web Engineering
Need for Web EngineeringNeed for Web Engineering
Need for Web Engineering
Nosheen Qamar
 
Web Engineering - Web Application Testing
Web Engineering - Web Application TestingWeb Engineering - Web Application Testing
Web Engineering - Web Application Testing
Nosheen Qamar
 
Web engineering - Measuring Effort Prediction Power and Accuracy
Web engineering - Measuring Effort Prediction Power and AccuracyWeb engineering - Measuring Effort Prediction Power and Accuracy
Web engineering - Measuring Effort Prediction Power and Accuracy
Nosheen Qamar
 
Web engineering - An overview about HTML
Web engineering -  An overview about HTMLWeb engineering -  An overview about HTML
Web engineering - An overview about HTML
Nosheen Qamar
 
PROGRESS - CSS BASIC
PROGRESS - CSS BASICPROGRESS - CSS BASIC
PROGRESS - CSS BASIC
UKM PROGRESS
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
Nosheen Qamar
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
vijayta
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
AakankshaR
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginners
Munir Hoque
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags
Hyejin Oh
 
[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags
Hyejin Oh
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
Michael Jhon
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
Doncho Minkov
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
joilrahat
 
CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - IntroductionCSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
Mukesh Tekwani
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
Rex Wang
 
Ad

Similar to Web Engineering - Basic CSS Properties (20)

Web Development - Lecture 6
Web Development - Lecture 6Web Development - Lecture 6
Web Development - Lecture 6
Syed Shahzaib Sohail
 
Css presentation lecture 4
Css presentation lecture 4Css presentation lecture 4
Css presentation lecture 4
Mudasir Syed
 
CSS Box Model
CSS Box ModelCSS Box Model
CSS Box Model
kjkleindorfer
 
Dimensions of elements.pdf
Dimensions of elements.pdfDimensions of elements.pdf
Dimensions of elements.pdf
Kongu Engineering College, Perundurai, Erode
 
cascading style sheets explaining about borders
cascading style sheets explaining about borderscascading style sheets explaining about borders
cascading style sheets explaining about borders
Hshhdvrjdnkddb
 
Css margins
Css marginsCss margins
Css margins
AbhishekMondal42
 
Css3
Css3Css3
Css3
Evolution Network
 
CSS Topic wise Short notes ppt by Navya.E
CSS Topic wise Short notes ppt by Navya.ECSS Topic wise Short notes ppt by Navya.E
CSS Topic wise Short notes ppt by Navya.E
NavyaEnugala
 
INTERNET PROGRAMMING UNIT I REMAINING -SECOND HALF.docx
INTERNET PROGRAMMING UNIT I REMAINING -SECOND HALF.docxINTERNET PROGRAMMING UNIT I REMAINING -SECOND HALF.docx
INTERNET PROGRAMMING UNIT I REMAINING -SECOND HALF.docx
psaranya21
 
CSS Cascade Style Sheet
CSS Cascade Style SheetCSS Cascade Style Sheet
CSS Cascade Style Sheet
Adeel Rasheed
 
Margin
MarginMargin
Margin
Ankit Dubey
 
Chapter 14: Box Model
Chapter 14: Box ModelChapter 14: Box Model
Chapter 14: Box Model
Steve Guinan
 
Unit - 3 CSS(Cascading Style Sheet).pptx
Unit - 3 CSS(Cascading Style Sheet).pptxUnit - 3 CSS(Cascading Style Sheet).pptx
Unit - 3 CSS(Cascading Style Sheet).pptx
kushwahanitesh592
 
Css borders
Css bordersCss borders
Css borders
AbhishekMondal42
 
Unit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptxUnit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptx
Tanu524249
 
Css
CssCss
Css
Vijay Raj Yanamala
 
11--CSS-Box-Model.pdf for second college
11--CSS-Box-Model.pdf for second college11--CSS-Box-Model.pdf for second college
11--CSS-Box-Model.pdf for second college
shwan it
 
HTML ,CSS ,JQuery Cheat Sheet
HTML ,CSS ,JQuery Cheat Sheet HTML ,CSS ,JQuery Cheat Sheet
HTML ,CSS ,JQuery Cheat Sheet
Shiva Saxena
 
Quarter 3_Lesson_One_CSSheets_Paddings.pdf
Quarter 3_Lesson_One_CSSheets_Paddings.pdfQuarter 3_Lesson_One_CSSheets_Paddings.pdf
Quarter 3_Lesson_One_CSSheets_Paddings.pdf
RobilynBPataras
 
06. session 06 css color_andlayoutpropeties
06. session 06   css color_andlayoutpropeties06. session 06   css color_andlayoutpropeties
06. session 06 css color_andlayoutpropeties
Phúc Đỗ
 
Css presentation lecture 4
Css presentation lecture 4Css presentation lecture 4
Css presentation lecture 4
Mudasir Syed
 
cascading style sheets explaining about borders
cascading style sheets explaining about borderscascading style sheets explaining about borders
cascading style sheets explaining about borders
Hshhdvrjdnkddb
 
CSS Topic wise Short notes ppt by Navya.E
CSS Topic wise Short notes ppt by Navya.ECSS Topic wise Short notes ppt by Navya.E
CSS Topic wise Short notes ppt by Navya.E
NavyaEnugala
 
INTERNET PROGRAMMING UNIT I REMAINING -SECOND HALF.docx
INTERNET PROGRAMMING UNIT I REMAINING -SECOND HALF.docxINTERNET PROGRAMMING UNIT I REMAINING -SECOND HALF.docx
INTERNET PROGRAMMING UNIT I REMAINING -SECOND HALF.docx
psaranya21
 
CSS Cascade Style Sheet
CSS Cascade Style SheetCSS Cascade Style Sheet
CSS Cascade Style Sheet
Adeel Rasheed
 
Chapter 14: Box Model
Chapter 14: Box ModelChapter 14: Box Model
Chapter 14: Box Model
Steve Guinan
 
Unit - 3 CSS(Cascading Style Sheet).pptx
Unit - 3 CSS(Cascading Style Sheet).pptxUnit - 3 CSS(Cascading Style Sheet).pptx
Unit - 3 CSS(Cascading Style Sheet).pptx
kushwahanitesh592
 
Unit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptxUnit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptx
Tanu524249
 
11--CSS-Box-Model.pdf for second college
11--CSS-Box-Model.pdf for second college11--CSS-Box-Model.pdf for second college
11--CSS-Box-Model.pdf for second college
shwan it
 
HTML ,CSS ,JQuery Cheat Sheet
HTML ,CSS ,JQuery Cheat Sheet HTML ,CSS ,JQuery Cheat Sheet
HTML ,CSS ,JQuery Cheat Sheet
Shiva Saxena
 
Quarter 3_Lesson_One_CSSheets_Paddings.pdf
Quarter 3_Lesson_One_CSSheets_Paddings.pdfQuarter 3_Lesson_One_CSSheets_Paddings.pdf
Quarter 3_Lesson_One_CSSheets_Paddings.pdf
RobilynBPataras
 
06. session 06 css color_andlayoutpropeties
06. session 06   css color_andlayoutpropeties06. session 06   css color_andlayoutpropeties
06. session 06 css color_andlayoutpropeties
Phúc Đỗ
 
Ad

Recently uploaded (20)

State institute of educational technology
State institute of educational technologyState institute of educational technology
State institute of educational technology
vp5806484
 
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
Julián Jesús Pérez Fernández
 
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly WorkshopsLDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDM & Mia eStudios
 
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANASTUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
Kweku Zurek
 
LDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-inLDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-in
LDM & Mia eStudios
 
Coleoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptxColeoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptx
Arshad Shaikh
 
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
wygalkelceqg
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
YSPH VMOC Special Report - Measles Outbreak Southwest US 5-30-2025.pptx
YSPH VMOC Special Report - Measles Outbreak  Southwest US 5-30-2025.pptxYSPH VMOC Special Report - Measles Outbreak  Southwest US 5-30-2025.pptx
YSPH VMOC Special Report - Measles Outbreak Southwest US 5-30-2025.pptx
Yale School of Public Health - The Virtual Medical Operations Center (VMOC)
 
Dashboard Overview in Odoo 18 - Odoo Slides
Dashboard Overview in Odoo 18 - Odoo SlidesDashboard Overview in Odoo 18 - Odoo Slides
Dashboard Overview in Odoo 18 - Odoo Slides
Celine George
 
Multicultural approach in education - B.Ed
Multicultural approach in education - B.EdMulticultural approach in education - B.Ed
Multicultural approach in education - B.Ed
prathimagowda443
 
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdfTechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup
 
Search Engine Optimization (SEO) for Website Success
Search Engine Optimization (SEO) for Website SuccessSearch Engine Optimization (SEO) for Website Success
Search Engine Optimization (SEO) for Website Success
Muneeb Rana
 
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSELET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
OlgaLeonorTorresSnch
 
POS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 SlidesPOS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 Slides
Celine George
 
Writing Research Papers: Guidance for Research Community
Writing Research Papers: Guidance for Research CommunityWriting Research Papers: Guidance for Research Community
Writing Research Papers: Guidance for Research Community
Rishi Bankim Chandra Evening College, Naihati, North 24 Parganas, West Bengal, India
 
Order Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptxOrder Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptx
Arshad Shaikh
 
Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..
faizanaltaf231
 
How to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 WebsiteHow to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 Website
Celine George
 
Types of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo SlidesTypes of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo Slides
Celine George
 
State institute of educational technology
State institute of educational technologyState institute of educational technology
State institute of educational technology
vp5806484
 
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly WorkshopsLDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDM & Mia eStudios
 
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANASTUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
Kweku Zurek
 
LDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-inLDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-in
LDM & Mia eStudios
 
Coleoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptxColeoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptx
Arshad Shaikh
 
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
wygalkelceqg
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
Dashboard Overview in Odoo 18 - Odoo Slides
Dashboard Overview in Odoo 18 - Odoo SlidesDashboard Overview in Odoo 18 - Odoo Slides
Dashboard Overview in Odoo 18 - Odoo Slides
Celine George
 
Multicultural approach in education - B.Ed
Multicultural approach in education - B.EdMulticultural approach in education - B.Ed
Multicultural approach in education - B.Ed
prathimagowda443
 
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdfTechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup
 
Search Engine Optimization (SEO) for Website Success
Search Engine Optimization (SEO) for Website SuccessSearch Engine Optimization (SEO) for Website Success
Search Engine Optimization (SEO) for Website Success
Muneeb Rana
 
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSELET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
OlgaLeonorTorresSnch
 
POS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 SlidesPOS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 Slides
Celine George
 
Order Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptxOrder Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptx
Arshad Shaikh
 
Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..
faizanaltaf231
 
How to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 WebsiteHow to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 Website
Celine George
 
Types of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo SlidesTypes of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo Slides
Celine George
 

Web Engineering - Basic CSS Properties

  • 1. 1 Web Engineering Lecture 06 Basic CSS Properties University of Lahore Nosheen Qamar
  • 2. CSS background Properties • You can set background of various HTML elements:  The background-color property is used to set the background color of an element.  The background-image property is used to set the background image of an element.  The background-repeat property is used to control the repetition of an image in the background.  The background-position property is used to control the position of an image in the background.  The background-attachment property is used to control the scrolling of an image in the background.
  • 3. 3 background-color • <p style=“background-color: yellow;” > This text has a yellow background. </p> • Output: • Possible values: any color in a valid format.
  • 4. 4 background-image • <table style=“background-image:url(images/css.gif);” > <tr><td> this table has background image which repeats multiple times. </td></tr> </table> • Output: • Possible values: any image with valid format
  • 5. 5 background-repeat • <table style=“background-image: url(images/cat.gif); background-repeat: no-repeat; ” > <tr><td> by default background-repeat property have repeat value. </td></tr> </table> • Output: • Possible values: repeat, repeat-y, repeat-x, no-repeat
  • 6. 6 background-size • <table style=“background-image: url(images/cat.gif); background-repeat: no-repeat; background-size: 200px 200px; ” > <tr><td> background-size property is used to expand the background image. </td></tr> </table> • Output: • Possible values: repeat, repeat-y, repeat-x, no-repeat
  • 7. 7 background-position • <table style=“background-image: url(images/css.gif); background-position: 100px 200px; ” > <tr><td> this table has background image positioned 100 pixels away from the left and 200 pixels from the top. </td></tr> </table> • Output: • Possible values: X% Y%, top left, Xpx Ypx left top center top left bottom center bottom right bottom
  • 8. 8 background-attachment • <p style=“background-image:url(images/css.gif); background-attachment: fixed; ” > This paragraph has fixed background image. </p> • Output: • Possible values: fixed, scroll
  • 9. CSS Borders • You can set following border properties of an element:  The border-color property is used to set the color of the border.  The border-style property is used to set the style of border.  The border-width property is used to set .  The border property is used to set the width, style and color of the border in one declaration.
  • 10. border-style • <p style=“border-style: none”> This is a border with none width.</p> <p style=“border-style: solid”> This is a solid border.</p> <p style=“border-style: dashed”> This is a dashed border.</p> • Output: • Possible values: none, solid, dashed, double, groove, ridge, inset, outset
  • 11. border-color • <style> p.example1 { border-style: solid; border-bottom-color: #009900; border-top-color: #FF0000; border-left-color: #330000; border-right-color: #0000CC; } </style> <p class=“example1”> This example is showing all borders in different colors. </p> • Output: • Possible values: any color with valid format
  • 12. border-color • <style> p.example1 { border-style: solid; border-color: #FF0000; } </style> <p class=“example1”> This example is showing all borders in same color. </p> • Output: • Possible values: any color with valid format
  • 13. border-width • <p style=“border-width: 4px; border-style: solid;”> This is a solid border whose width is 4px.</p> • Output: • Possible values: length in px, pt or cm or it should be thin, medium or thick.
  • 14. • You can individually change the width of the bottom, top, left and right borders of an element. Using the following properties:  border-bottom-width changes the width of bottom border.  border-top-width changes the width of top border.  border-left-width changes the width of left border.  border-right-width changes the width of right border. 14
  • 15. border-width • <style> p.example1 { border-style: solid; border-bottom-width: 6pt; border-top-width: 6pt; border-left-width: 4pt; border-right-width: 4pt; } </style> <p class=“example1”> This example is showing all borders in different widths. </p> • Output: • Possible values: any color with valid format This example is showing all borders in different widths.
  • 16. border • <p style=“border: 4px solid red;”> This example is showing shorthand property for border.</p> • Output:
  • 17. CSS Margins • You can set following margin properties of an element:  The margin-bottom property specify the bottom margin of an element.  The margin-top property specify the top margin of an element.  The margin-left property specify the left margin of an element.  The margin-right property specify the right margin of an element.  The margin shorthand property for setting margin properties in one declaration.
  • 18. margin • <div style=“margin: 20px;”> This is a paragraph with a specified margin from all sides.</div> • Output: • Possible values: auto, length in px, %.
  • 19. margin-top • <div style=“margin-top: 10px;”> This is a paragraph with a specified top margin.</div> • Output: • Possible values: auto, length in px, %.
  • 20. margin-bottom • <div style=“margin-bottom: 10px;”> This is a paragraph with a specified bottom margin.</div> • Output: • Possible values: auto, length in px, %.
  • 21. margin-left • <div style=“margin-left: 10%;”> This is a paragraph with a specified left margin.</div> • Output: • Possible values: auto, length in px, %.
  • 22. margin-right • <div style=“margin-right: 10%;”> This is a paragraph with a specified right margin.</div> • Output: • Possible values: auto, length in px, %.
  • 23. 23 Margin property • <style> p {margin: 15px; } all four margins will be 15px p {margin: 10px 5px; } top and bottom margin will be 10px, left and right will be 2% of the total width of doc. p {margin: 10px 8px 20px 15px; } top margin will be 10px, right margin will be 2%, bottom margin will be -10px, left margin will be set by the browser </style>
  • 24. CSS Padding • Padding property allows you to specify how much space should appear between the content of an element and its border :  The padding-bottom property specify the bottom padding of an element.  The padding-top property specify the top padding of an element.  The padding-left property specify the left padding of an element.  The padding-right property specify the right padding of an element.  The padding shorthand property serves as the preceding properties.
  • 25. padding-bottom • <p style=“padding-bottom: 15px; border- width: 1px solid black;”> This is a paragraph with a specified bottom padding.</p> • Output: This is a paragraph with a specified bottom padding. • Possible values: length in px, %.
  • 26. padding-top • <p style=“padding-top: 15px; border-width: 1px solid black;”> This is a paragraph with a specified top padding.</p> • Output: This is a paragraph with a specified top padding. • Possible values: length in px, %.
  • 27. padding-left • <p style=“padding-left: 15px; border-width: 1px solid black;”> This is a paragraph with a specified left padding.</p> • Output: This is a paragraph with a specified top padding. • Possible values: length in px, %.
  • 28. padding-right • <p style=“padding-right: 15px; border-width: 1px solid black;”> This is a paragraph with a specified right padding.</p> • Output: This is a paragraph with a specified top padding. • Possible values: length in px, %.
  • 29. padding • <p style=“padding: 15px; border-width: 1px solid black;”> This is a paragraph with a specified right padding.</p> • Output: This is a paragraph with a specified top padding. • Possible values: length in px, %.
  • 30. Padding and Margin Properties • Values for both the padding and the margin properties can be expressed using: • em (em values) • px (pixels) • mm (millimeters) • cm (centimeters) • in (inches) • % (percentage of the container element)