Saturday, August 8, 2015

Learning CSS

CSS HTML
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. * {
  2. padding-left: 10px;
  3. }
  4. p {
  5. color: green;
  6. size: 18px;
  7. }
  8. div {
  9. background: grey;
  10. }
  11. #Age {
  12. background: orange;
  13. }
  14. .marks {
  15. background: yellow;
  16. }
  17. #Preference ul {
  18. color: gold
  19. }
  20. .Gender p {
  21. color: blue;
  22. }
  23. .Gender p:first-letter {
  24. font-size: 40px;
  25. }
  26. a:link {
  27. color: magenta;
  28. }
  29. a:visited {
  30. color: green;
  31. }
  32. a:hover {
  33. color: lightblue;
  34. }
  35. a:active {
  36. color: black;
  37. }
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <html>
  2. <head>
  3. <title> Chumma CSS </title>
  4. <link rel="stylesheet" href="style.css" />
  5. <style type="text/css" rel="stylesheet">
  6.     #preference p {
  7.     color: white;
  8.     }
  9. </style>
  10. </head>
  11.  
  12. <body>
  13.  
  14. <ul>
  15.     <li> <a href="index.html"> Link1 </a> </li>
  16.     <li> <a href="index.html"> Link2 </a> </li>
  17.     <li> <a href="index.html"> Link3 </a> </li>
  18.     <li> <a href="index1.html"> Link4 </a> </li>
  19. </ul>
  20.  
  21. <p style="color: red">
  22.     This is my First Paragraph. I am red in color due to inline style sheet.
  23. </p>
  24.  
  25. <p> This is my Second Paragraph. I am green in color due to linked style sheet </p>
  26.  
  27. <div id="preference">
  28.   <p>
  29.     This is my Third Paragraph. I am White in color due to embedded style sheet <br>
  30.   </p>
  31.     <ul>
  32.     <li>1. Preference for inline styles <br> </li>
  33.     <li>2. Embedded styles <br> </li>
  34.     <li>3. External Style sheets <br> </li>
  35.     </ul>
  36. </div>
  37.  
  38. <div id="user">
  39. <p> Balasubramaniam SN. This color is grey as all default div will get grey background color </p>
  40. </div>
  41.  
  42. <div id="Age">
  43. <p> 25. This color is orange as all div with ID AGE will get orange background color </p>
  44. </div>
  45.  
  46. <div class="marks">
  47. <p>English: 96. This color is Yellow as all class with mark will get orange background color</p>
  48. </div>
  49.  
  50. <div class="Gender">
  51. <p> There are two main Gender, Masculine and Feminine </p>
  52. </div>
  53.  
  54. <p> This is my Sixth Paragraph </p>
  55.  
  56. </body>
  57. </html>
This is my output.


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)