Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Web Engineering - Basic CSS Properties

749 vues

Publié le

Basic CSS Properties

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Web Engineering - Basic CSS Properties

  1. 1. 1 Web Engineering Lecture 06 Basic CSS Properties University of Lahore Nosheen Qamar
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. border • <p style=“border: 4px solid red;”> This example is showing shorthand property for border.</p> • Output:
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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)

×