SlideShare une entreprise Scribd logo
1  sur  9
Unit III: Adding Styles
and Interactivity Using
  CSS and Javascript
What is the CSS properties being describe by the
 statement.

1.    Insert image as background.
2.    Insert foreground color.
3.    Set the font to inclined.
4.    Set the font to bold.
5.    Applies first line indent.
6.    Set the text to the left
7.    Applies underline to text.
8.    Specifies spacing between text
9.    Capitalized the letter of each word.
10.   Set the font face to Algerian.


REVIEW
 The CSS Margin properties
 set the space around
 elements while padding
 properties set the space
 between the element border
 and the element content.

  CSS MARGIN AND PADDING
        PROPERTIES
Top/bottom
                          margin
              padding


Left margin
                        right margin
PROPERTY         DESCRIPTION                   EXAMPLE
margin-top     Sets the top margin    Body{margin-top: 75px;}
               of an element          Body{margin-top: 50%;}

margin-right   Sets the right margin Body{margin-right: 50px;}
               of an element         Body{margin-right: 80%;}

margin-        Sets the bottom      Body{margin-bottom: 20px;}
bottom         margin of an element Body{margin-bottom: 50%;}

margin-left    Sets the left margin   Body{margin-left: 50px;}
               of an element          Body{margin-left: 80%;}

margin         Sets all margin        Body{ margin: 75px 50px
               properties in one      20px}
               declaration; but
               follows arrangement
               from, top, right,
               bottom, and left.
PROPERTY              DESCRIPTION                       EXAMPLE
padding-top      Sets the distance between        Body{padding-top: 75px;}
                 the top border and the           Body{margin-top: 50%;}
                 content of an element
padding-right    Sets the distance between        Body{margin-right: 50px;}
                 the right border and the         Body{margin-right: 80%;}
                 content of an element
padding-bottom   Sets the distance between        Body{margin-bottom:
                 the bottom border and the        20px;}
                 content of an element            Body{margin-bottom:
                                                  50%;}

padding-left     Sets the distance between        Body{margin-left: 50px;}
                 the left border and the          Body{margin-left: 80%;}
                 content of an element

padding          Sets all padding properties in   Body{ margin: 75px 50px
                 one declaration; but follows     20px}
                 arrangement of values from,
                 top, right, bottom, and left.
USE HEADER 1 AS SELECTOR
1. Set the top margin to 20 pixels
2. Set the right margin to 10 pixels
3. Set the bottom margin to 20 pixels
4. Set the left margin to 10 pixels
5. Set all the margins in one declaration.
6. Set the top padding to 20 percent
7. Set the right padding to 10 percents
8. Set the bottom padding to 20 percents
9. Set the left padding to 10 percents
10. Set all the paddings in one declaration


COMPUQUIZ/EXERCISES
1.  h1{margin-top: 20px;}
2. h1{margin-right: 10px;}
3. h1{margin-bottom: 20px;}
4. h1{margin-left: 10px;}
5. h1{margin: 20px 10px 20px 10px;}
6. h1{padding-top: 20%;}
7. h1{padding-right: 10p%;}
8. h1{padding-bottom: 20%;}
9. h1{padding-left: 10%;}
10. h1{padding: 20% 10% 20% 10%;}




ANSWER

Contenu connexe

Tendances (20)

Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
CSS Positioning Elements.pdf
CSS Positioning Elements.pdfCSS Positioning Elements.pdf
CSS Positioning Elements.pdf
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Css position
Css positionCss position
Css position
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Scratch Lesson 1 – Basics
Scratch Lesson 1 – BasicsScratch Lesson 1 – Basics
Scratch Lesson 1 – Basics
 
html-table
html-tablehtml-table
html-table
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
HTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgroundsHTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgrounds
 
HTML Frameset & Inline Frame
HTML Frameset & Inline FrameHTML Frameset & Inline Frame
HTML Frameset & Inline Frame
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
 
Introduction to flexbox
Introduction  to  flexboxIntroduction  to  flexbox
Introduction to flexbox
 
Intro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyIntro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS Property
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Links in Html
Links in HtmlLinks in Html
Links in Html
 

Similaire à Css margin and padding property

Similaire à Css margin and padding property (16)

Web Layout
Web LayoutWeb Layout
Web Layout
 
Margin
MarginMargin
Margin
 
CSS Position and it’s values
CSS Position and it’s valuesCSS Position and it’s values
CSS Position and it’s values
 
響應式網頁實作坊
響應式網頁實作坊響應式網頁實作坊
響應式網頁實作坊
 
Css 101
Css 101Css 101
Css 101
 
Class 10
Class 10Class 10
Class 10
 
Web Design Course: CSS lecture 4
Web Design Course: CSS  lecture 4Web Design Course: CSS  lecture 4
Web Design Course: CSS lecture 4
 
Css margins
Css marginsCss margins
Css margins
 
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
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
 
Css advanced – session 4
Css advanced – session 4Css advanced – session 4
Css advanced – session 4
 
Lecture-8.pptx
Lecture-8.pptxLecture-8.pptx
Lecture-8.pptx
 
Css tips & tricks
Css tips & tricksCss tips & tricks
Css tips & tricks
 
Liquid column layout final
Liquid column layout finalLiquid column layout final
Liquid column layout final
 
Css Positioning Elements
Css Positioning ElementsCss Positioning Elements
Css Positioning Elements
 
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016
 

Plus de Jesus Obenita Jr.

Plus de Jesus Obenita Jr. (20)

Organization and management 3 a Evolution of Management Theory
Organization and management 3 a Evolution of Management TheoryOrganization and management 3 a Evolution of Management Theory
Organization and management 3 a Evolution of Management Theory
 
Organization and management 2 Management Function
Organization and management 2 Management FunctionOrganization and management 2 Management Function
Organization and management 2 Management Function
 
Organization and management 1
Organization and management 1Organization and management 1
Organization and management 1
 
Designing web page marquee and img tag
Designing web page  marquee and img tagDesigning web page  marquee and img tag
Designing web page marquee and img tag
 
Ms excel 2013 formatting worksheets
Ms excel 2013 formatting worksheetsMs excel 2013 formatting worksheets
Ms excel 2013 formatting worksheets
 
Ms excel 2013 data management
Ms excel 2013 data managementMs excel 2013 data management
Ms excel 2013 data management
 
Microsoft Excel introduction
Microsoft Excel introductionMicrosoft Excel introduction
Microsoft Excel introduction
 
Word 2013 working with pictures
Word 2013 working with picturesWord 2013 working with pictures
Word 2013 working with pictures
 
Word 2013 Formatting Page
Word 2013 Formatting PageWord 2013 Formatting Page
Word 2013 Formatting Page
 
Word 2013 8
Word 2013 8Word 2013 8
Word 2013 8
 
Ms word 2013 7
Ms word 2013 7Ms word 2013 7
Ms word 2013 7
 
Ms word 2013 6
Ms word 2013 6Ms word 2013 6
Ms word 2013 6
 
Ms word 2013 4
Ms word 2013 4Ms word 2013 4
Ms word 2013 4
 
Ms word 2013 2
Ms word 2013 2Ms word 2013 2
Ms word 2013 2
 
Ms word 2013
Ms word 2013Ms word 2013
Ms word 2013
 
Parts of the ms word 2013 screen and
Parts of the ms word 2013 screen andParts of the ms word 2013 screen and
Parts of the ms word 2013 screen and
 
Word processor
Word processorWord processor
Word processor
 
Session 2 test construction.mt's
Session 2   test construction.mt'sSession 2   test construction.mt's
Session 2 test construction.mt's
 
Cooking ingredients
Cooking ingredientsCooking ingredients
Cooking ingredients
 
Color theory
Color theoryColor theory
Color theory
 

Dernier

Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfAyushMahapatra5
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxVishalSingh1417
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxnegromaestrong
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 

Dernier (20)

Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 

Css margin and padding property

  • 1. Unit III: Adding Styles and Interactivity Using CSS and Javascript
  • 2. What is the CSS properties being describe by the statement. 1. Insert image as background. 2. Insert foreground color. 3. Set the font to inclined. 4. Set the font to bold. 5. Applies first line indent. 6. Set the text to the left 7. Applies underline to text. 8. Specifies spacing between text 9. Capitalized the letter of each word. 10. Set the font face to Algerian. REVIEW
  • 3.
  • 4.  The CSS Margin properties set the space around elements while padding properties set the space between the element border and the element content. CSS MARGIN AND PADDING PROPERTIES
  • 5. Top/bottom margin padding Left margin right margin
  • 6. PROPERTY DESCRIPTION EXAMPLE margin-top Sets the top margin Body{margin-top: 75px;} of an element Body{margin-top: 50%;} margin-right Sets the right margin Body{margin-right: 50px;} of an element Body{margin-right: 80%;} margin- Sets the bottom Body{margin-bottom: 20px;} bottom margin of an element Body{margin-bottom: 50%;} margin-left Sets the left margin Body{margin-left: 50px;} of an element Body{margin-left: 80%;} margin Sets all margin Body{ margin: 75px 50px properties in one 20px} declaration; but follows arrangement from, top, right, bottom, and left.
  • 7. PROPERTY DESCRIPTION EXAMPLE padding-top Sets the distance between Body{padding-top: 75px;} the top border and the Body{margin-top: 50%;} content of an element padding-right Sets the distance between Body{margin-right: 50px;} the right border and the Body{margin-right: 80%;} content of an element padding-bottom Sets the distance between Body{margin-bottom: the bottom border and the 20px;} content of an element Body{margin-bottom: 50%;} padding-left Sets the distance between Body{margin-left: 50px;} the left border and the Body{margin-left: 80%;} content of an element padding Sets all padding properties in Body{ margin: 75px 50px one declaration; but follows 20px} arrangement of values from, top, right, bottom, and left.
  • 8. USE HEADER 1 AS SELECTOR 1. Set the top margin to 20 pixels 2. Set the right margin to 10 pixels 3. Set the bottom margin to 20 pixels 4. Set the left margin to 10 pixels 5. Set all the margins in one declaration. 6. Set the top padding to 20 percent 7. Set the right padding to 10 percents 8. Set the bottom padding to 20 percents 9. Set the left padding to 10 percents 10. Set all the paddings in one declaration COMPUQUIZ/EXERCISES
  • 9. 1. h1{margin-top: 20px;} 2. h1{margin-right: 10px;} 3. h1{margin-bottom: 20px;} 4. h1{margin-left: 10px;} 5. h1{margin: 20px 10px 20px 10px;} 6. h1{padding-top: 20%;} 7. h1{padding-right: 10p%;} 8. h1{padding-bottom: 20%;} 9. h1{padding-left: 10%;} 10. h1{padding: 20% 10% 20% 10%;} ANSWER