Intro to WebSite Development ( Text properties and margins )

821 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
821
On SlideShare
0
From Embeds
0
Number of Embeds
339
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to WebSite Development ( Text properties and margins )

  1. 1. PRESENTATION MEMBERSABDUL BASIT KAYANI B-16729KALEEM WAHEED B -16857
  2. 2. TOPIC• TEXT Properties• Margin Properties
  3. 3. TEXT PROPERTIES• Text Color.• Text Alignment.• Text decoration.• Text Transformation.• Text Indentation.• Text Spacing.
  4. 4. TEXT COLORThe color property is used to set the color of the text.With CSS, a color is most often specified by: • a HEX value - like "#ff0000" • an RGB value - like "rgb(255,0,0)" • a color name - like "red"
  5. 5. <!DOCTYPE html> <html> <head> <style> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style>TEXT </head>COLOR <body> <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> <p class="ex">This is a paragraph with class="ex". This text is blue.</p> </body> </html>
  6. 6. RESULT
  7. 7. <html> <head> <style> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}Text </style> </head>Alignment <body> <h1>CSS text-align Example</h1> <p class="date">May, 2009</p> <p class="main">In my younger and more vulnerable years my father gave me some advice that Ive been turning over in my mind ever since. Whenever you feel like criticizing anyone, he told me, just remember that all the people in this world havent had the advantages that youve had.</p> <p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p> </body> </html>
  8. 8. RESULT
  9. 9. <!DOCTYPE html> <html> <head> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;}Text </style> </head>decoration <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p> </body> </html>
  10. 10. Result
  11. 11. <!DOCTYPE html> <html> <head> <style> p.uppercase {text-transform:uppercase;}Text p.lowercase {text-transform:lowercase;}Transformation p.capitalize {text-transform:capitalize;} </style> </head> <body> <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> </body> </html>
  12. 12. Result
  13. 13. <!DOCTYPE html> <html> <head> <style> p {text-indent:100px;} </style> </head>Text <body>Indentation <p>In my younger and more vulnerable years my father gave me some advice that Ive been turning over in my mind ever since. Whenever you feel like criticizing anyone, he told me, just remember that all the people in this world havent had the advantages that youve had.</p> </body> </html>
  14. 14. Result
  15. 15. <!DOCTYPE html> <html> <head> <style> h1 {letter-spacing:2px;} h2 {letter-spacing:-3px;}TEXT </style>SPACING </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> </body> </html>
  16. 16. Result
  17. 17. <!DOCTYPE html> <html> <head> <style>Word p {Spacing word-spacing:30px; } </style> </head> <body> <p> This is some text. This is some text. </p> </body> </html>
  18. 18. Result
  19. 19. MARGIN PROPERTIESThe margin shorthand property sets all the marginproperties in one declaration. This property can havefrom one to four values. Value Description auto The browser calculates a margin length Specifies a margin in px, pt, cm, etc. Default value is 0px % Specifies a margin in percent of the width of the containing element inherit Specifies that the margin should be inherited from the parent element
  20. 20. Margin Properties• Margin Bottom• Margin Left• Margin Right• Margin Top
  21. 21. <!DOCTYPE html> <html> <head> <style> p.ex1 {margin-bottom:2cm} </style>MARGIN </head>BOTTOM <body> <p>A paragraph with no margins specified.</p> <p class="ex1">A paragraph with a 2cm bottom margin.</p> <p>A paragraph with no margins specified.</p> </body> </html>
  22. 22. MARGINBOTTOM
  23. 23. <!DOCTYPE html> <html> <head> <style> p.ex1 {margin-left:2cm;} </style> </head>MARGIN <body> LEFT <p>A paragraph with no margins specified.</p> <p class="ex1">A paragraph with a 2cm left margin.</p> <p>A paragraph with no margins specified.</p> </body> </html>
  24. 24. MARGIN LEFT
  25. 25. <!DOCTYPE html> <html> <head> <style> p.ex1 {margin-right:4cm} </style> </head>MARGIN <body> RIGHT <p>A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with no margins specified.</p> <p class="ex1">A paragraph with a 4cm right margin. A paragraph with a 4cm right margin. A paragraph with a 4cm right margin.</p> </body> </html>
  26. 26. MARGIN RIGHT
  27. 27. <!DOCTYPE html> <html> <head> <style> p.ex1 {margin-top:2cm;} </style> </head>MARGIN <body> TOP <p>A paragraph with no margins specified.</p> <p class="ex1">A paragraph with a 2cm top margin.</p> <p>A paragraph with no margins specified.</p> </body> </html>
  28. 28. MARGIN TOP

×