Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Engineering - Basic CSS Properties

747 views

Published on

Basic CSS Properties

Published in: Education
  • Be the first to comment

  • Be the first to like this

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)

×