API tools faq
paste
HTML

howard-classesids.html

HTML
Nov 18th, 2016
153
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.20 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Howard - CSS: classes and ids</title>
  5. <style>
  6. /* Classes are used multiple times to enhances elements that may already have a rule applied to it. Class selectors are identified by a period followed by the classname.
  7.  
  8. We will name a class warm to emphasize fire words. We will name a class cool to emphasize ice words.
  9.  
  10. Ids are special and used only one time to enhance an element. Ids are identified by the hash symbol followed by the id name.
  11.  
  12. Use an id to center the content on the page adn away from the edges of the user window. Use a different id to emphasize what is important for the user to focus on. We will name these IDs #wrapper #poem.
  13.  
  14. Divs are boxes. Divs needs styles. Divs contain elements.
  15. Span is an element. The only purpose for span is to call up a class. */
  16.  
  17. body {
  18.         background-color:gray;
  19.         font-family:"Times New Roman", serif;
  20.         font-size:1.25em;
  21. }
  22. header {
  23.         background-color:red;
  24.         background:linear-gradient(red, yellow);
  25.         padding:1%;
  26.         letter-spacing:4px;
  27.         line-height:250%;
  28.         text-outline:white;
  29. }
  30. footer {
  31.         background-color:white;
  32.         background:linear-gradient(#75A9D1, white, #75A9D1);
  33.         text-align:center;
  34.         padding:10px;
  35. }
  36. p {
  37.         font-size:1.25em;
  38. }
  39. h1,h2,h3 {
  40.         font-family:"Arial", sans-serif;
  41.         vertical-align:china;
  42. }
  43. h2 {
  44.         align:left;
  45. }
  46. #wrapper {
  47.         background-color:#FFF;
  48.         width:600px;
  49.         margin-left:25%;
  50.         margin-right:25%;
  51. }
  52. #poem {
  53.         line-height:50px;
  54.         margin:5%;
  55.         text-size:1.5em;
  56. }
  57. .warm {
  58.         color:red;
  59.         background-color:yellow;
  60. }
  61. .cool {
  62.         color:blue;
  63.         background-color:darkblue;
  64. }
  65. </style>
  66. <head>
  67. <body>
  68. <div id="wrapper">
  69.     <header>
  70.     <h1>Fire and Ice</h1>
  71.     <h2>Robert Frost</h2>
  72.     </header>
  73.         <div id="poem"><p>
  74.         Some say the world will end in <span class="warm">fire,</span><br/>
  75.         Some say in <span class="cool">ice.</span><br/>
  76.         From what I've tasted of desire<br/>
  77.         I hold with those who favor fire<br/>
  78.         But if it had to perish twice,<br/>
  79.         I think I know enough of hate<br/>
  80.         To say that for destruction ice<br/>
  81.         Is also great<br/>
  82.         And would suffice.<br/></p>
  83.         </div>
  84.     <footer>
  85.     <p>CSS practice by Jacob Howard &copy; 2016</p>
  86.     </footer>
  87. </div>
  88. </body>
  89. </html>
Advertisement
Comments
  • User was banned
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!