CSS Tutorial

3,801 views

Published on

A tutorial on CSS for a Web Development class.

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,801
On SlideShare
0
From Embeds
0
Number of Embeds
327
Actions
Shares
0
Downloads
146
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS Tutorial

  1. 1. CSSCascading Style Sheets
  2. 2. Parts of a CSS ruleh2 {color: #000000;}
  3. 3. Parts of a CSS ruleh2 {color: #000000;} SELECTOR
  4. 4. Parts of a CSS ruleh2 {color: #000000;} CURLY BRACKETS
  5. 5. Parts of a CSS ruleh2 {color: #000000;} PROPERTY
  6. 6. Parts of a CSS ruleh2 {color: #000000;} VALUE
  7. 7. Parts of a CSS ruleh2 {color: #000000;} START WITH SELECTOR
  8. 8. Three Kinds of SelectorsTYPE SELECTORS CLASS SELECTORS ID SELECTORSdiv .headlines #containerp .paragraphs #first-­‐articleh2 .bylines #footerstrong .summary #sidebar
  9. 9. Type Selectors <body>h2 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-style: bold; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>p{ <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-family: Helvetica; <p>This is a related story.</p> </div>} </div> </body>
  10. 10. Type Selectors <body>h2 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-style: bold; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>p{ <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-family: Helvetica; <p>This is a related story.</p> </div>} </div> </body>
  11. 11. Class Selectors <body>.headline { <div id=“container”> <h2 class=“headline”>Hello World</h2> text-decoration: underline; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>.byline { <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-size: 8px; <p>This is a related story.</p> </div>} </div> </body>
  12. 12. Class Selectors <body>.headline { <div id=“container”> <h2 class=“headline”>Hello World</h2> text-decoration: underline; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>.byline { <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-size: 8px; <p>This is a related story.</p> </div>} </div> </body>
  13. 13. ID Selectors <body>#container { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>#sidebar { <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-size: 8px; <p>This is a related story.</p> </div>} </div> </body>
  14. 14. ID Selectors <body>#container { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>#sidebar { <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-size: 8px; <p>This is a related story.</p> </div>} </div> </body>
  15. 15. More ways to use selectors
  16. 16. More Selector Options <body>.headline{ <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
  17. 17. More Selector Options <body>h2.headline { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
  18. 18. More Selector Options <body>#sidebar p { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>A space means <div id=“sidebar”>descendant. <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
  19. 19. More Selector Options <body>#container #sidebar h3 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
  20. 20. More Selector Options <body>#container #sidebar h3 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
  21. 21. More Selector Options <body>#container #sidebar h3 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
  22. 22. More Selector Options <body>#container #sidebar h3 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p>} <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
  23. 23. NOT to be confused with...
  24. 24. HTML vs CSS HTML CSS<div class=“headline lead-story article”> .headline p { } These spaces give multiple classes This space means a <p> tag inside another tag with class .headline
  25. 25. Example from Richmond Site<div id="post-38661" class="hentry p1 post publish author-lexi-pandell category-education category-featured category-fronttag-big-brother-big-sister tag-mentoring tag-nonprofit tag-youth y2012 m02 d07 h13">
  26. 26. A few others <div id=“container”>h3, p { color:orange; } <h3>Here is one headline</h3> <div> <h3>Another</h3> <p>Some text here</p> </div> <p>Another paragraph.</p> <h3>Last graph.</h3> </div>
  27. 27. A few others <div id=“container”>#container > h3 { color:orange; } <h3>Here is one headline</h3> <div> <h3>Another</h3> <p>Some text here</p> </div> <p>Another paragraph.</p> <h3>Last graph.</h3> </div>
  28. 28. A few others <div id=“container”>h3 + p { color:orange; } <h3>Here is one headline</h3> <div> <h3>Another</h3> <p>Some text here</p> </div> <p>Another paragraph.</p> <h3>Last graph.</h3> </div>
  29. 29. A few others <div id=“container”>h3:first-child { color:orange; } <h3>Here is one headline</h3> <div> <h3>Another</h3> <p>Some text here</p> </div> <p>Another paragraph.</p> <h3>Last graph.</h3> </div>
  30. 30. The Cascade
  31. 31. What happens if there is a conflict?External Style Sheet Embedded Style Sheet Inline Styles <head> <style> .headlines { <div style= “color:black;”> color:black; } </style> </head> The more specific rules take precedence.
  32. 32. Which rule wins out?#container { <div id="container"> font-size: 30px; <div id="headline">} <p>My headline</p>#headline { </div> font-size: 10px; </div>}
  33. 33. Which rule wins out?#container { <div id="container"> font-size: 30px; <div id="headline">} <p>My headline</p>#container { </div> font-size: 10px; </div>} Because it comes last
  34. 34. Cascade RecapStylesheet Order Last Rule Inheritance1. External Rules that come last Specificity2. Embedded (<head>)3. Inline
  35. 35. Properties
  36. 36. Text Color color:  #ee3e80;COLOR NAMES RGB VALUES Hexadecimal147 predefined Values for red, Six or three digitnames green and blue alpha-numeral.DarkCyan rgb(100,100,90); #FFFFFF;Purple rgb(255,255,255); #000000;Black rgb(0,0,0); #000;Red rgb(30,44,200); #AF0;
  37. 37. Backgroundsbackground-­‐color:  #ee3e80; background-­‐image:url(‘image.jpg’); background-­‐position:0px  50%; background-­‐repeat:repeat;Short codebackground:  url(‘path_to_image.jpg’)  no-­‐repeat  0px  0px;
  38. 38. Font Family font-­‐family:  Helvetica,  Arial,  san-­‐serif;FALL BACK QUOTES END WITH GENERICA comma Use quotes whenseparated list of a font is multiple End with afonts to use if the words, like generic font, likesystem doesnʼt “Times New serif or san-serif.have the font Roman.” This way theinstalled. browser will pick for you.
  39. 39. Font Size font-­‐size:  12px;PIXELS PERCENTAGES EMPixels are Percentages are EM is anotherconsidered a relative from the way of doingfixed font size. default size of the relativeFonts will appear text. 100% measurement.at this size means the default Varies onlyrelative to the size. slightly from %.screen size.
  40. 40. Othersfont-­‐weight:  normal; line-­‐height:  1em;font-­‐weight:  bold; line-­‐height:  1.4em;font-­‐style:  normal; letter-­‐spacing:  1em;font-­‐style:  italic; word-­‐spacing:  1em;font-­‐style:  oblique; text-­‐decoration:none;text-­‐transform:  uppercase; text-­‐align:  left;text-­‐transform:  lowercase; text-­‐align:  right;text-­‐transform:  capitalize; text-­‐aling:  center
  41. 41. Linksa:link a:link a:visiteda:visited Before a user After a user clicksa:hover clicks on a link. on a link.a:active a:hover a:active When a user When the user hovers over a clicks down on a link. link.
  42. 42. Border, Margin and Paddingmargin-­‐top:10px;margin-­‐right:10px;margin-­‐bottom:10px;margin-­‐left:10px; hello Margin Border Paddingmargin:5px  10px  6px  5px; Width
  43. 43. bordersborder-­‐colorborder-­‐width Single sides border-­‐top-­‐color:#ffffff;border-­‐style border-­‐left-­‐width:  20px;soliddotted Combineddashed border:1px  solid  #000000;groove...
  44. 44. Inline vs Block Inline block Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad <img> List of the best pies <p>minim veniam, quis nostrud exercitation ullamco laboris <span> • Apple <div>nisi ut aliquip ex ea commodo consequat. Duis aute • Cherryirure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur <strong> • Pumpkin <li>sint occaecat cupidatat non proident, sunt in culpa quiofficia deserunt mollit anim id est laborum. <em> <h1>
  45. 45. Inline vs Blockdisplay:inline;display:block;display:none;display:block; display:inline;• Apple• Cherry • Apple • Cherry • Pumpkin• Pumpkin
  46. 46. Visibilityvisibility:visible; visibility:hidden; Hi Mom!
  47. 47. CSS Reset
  48. 48. CSS Resethtml,  body,  div,  span,  applet,  object,  iframe,  h1,  h2,  h3,  h4,  h5,  h6,  p,  blockquote,  pre,  a,  abbr,  acronym,  address,  big,  cite,  code,  del,  dfn,  em,  img,  ins,  kbd,  q,  s,  samp,  small,  strike,  strong,  sub,  sup,  tt,  var,  b,  u,  i,  center,  dl,  dt,  dd,  ol,  ul,  li,  fieldset,  form,  label,  legend,  table,  caption,  tbody,  tfoot,  thead,  tr,  th,  td,  article,  aside,  canvas,  details,  embed,  figure,  figcaption,  footer,  header,  hgroup,  menu,  nav,  output,  ruby,  section,  summary,  time,  mark,  audio,  video  {   margin:  0;   padding:  0;   border:  0;   font-­‐size:  100%;   font:  inherit;   vertical-­‐align:  baseline;}

×