Successfully reported this slideshow.
Your SlideShare is downloading. ×

Basic HTML CSS Slides

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 44 Ad

Basic HTML CSS Slides

Download to read offline

Some slides on basic HTML, CSS, and WordPress and links to learning resources. Originally presented at the MSPWP user group meet up February 22, 2018 by Allyson Wehrs at the LuminFire office space.

Some slides on basic HTML, CSS, and WordPress and links to learning resources. Originally presented at the MSPWP user group meet up February 22, 2018 by Allyson Wehrs at the LuminFire office space.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Basic HTML CSS Slides (20)

Advertisement

Recently uploaded (20)

Basic HTML CSS Slides

  1. 1. 1
  2. 2. Allyson Wehrs Who am I? Web Engineer with LuminFire Experience Interests
  3. 3. Overview • HTML • CSS • CSS and WordPress • CSS Preprocessors
  4. 4. HTML
  5. 5. HTML Tags <tag></tag> <tag />
  6. 6. • html • head • title • body HTML Elements <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> </body> </html>
  7. 7. Paragraphs Hello World <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <p>Hello World</p> </body> </html>
  8. 8. Headings Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>
  9. 9. Div Title Hello World <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <div> <h1>Title</h1> <p>Hello World</p> </div> </body> </html>
  10. 10. Unordered List • Item 1 • Item 2 • Item 3 <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html>
  11. 11. Ordered List 1. Item 1 2. Item 2 3. Item 3 <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> </body> </html>
  12. 12. Links Click Me <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <a href=” https://luminfire.com/”>Click Me</a> </body> </html>
  13. 13. Images <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <img src=”picture.jpg” width=”200” height=”200” alt=”orange sunset” /> </body> </html>
  14. 14. Buttons <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <button type=”button”>Click Me!</button> </body> </html> Click Me!
  15. 15. • header • nav • main • aside • footer Semantic Elements <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <header> <nav></nav> </header> <main> <p>Page content</p> <aside></aside> </main> <footer> <p>&copy;</p> </footer> </body> </html>
  16. 16. • Classes • IDs Uniquely Identify Elements <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <h1 id=”page-title”>Title</h1> <h2 class=”section-title”>Section Title</h2> <p>content</p> <p class=”secondary-content”>content</p> <h2 class=”section-title”>Section Title</h2> <p>content</p> <p class=”secondary-content”>content</p> <h2 class=”section-title”>Section Title</h2> <p>content</p> </body> </html>
  17. 17. CSS
  18. 18. CSS Block .content p { font-family: ‘Open Sans’, sans-serif; font-size: 16px; color: blue; } #page-title { margin-bottom: 20px; } h1 {color:pink; opacity:1;} Selector Declaration Declaration Property Property Value Value
  19. 19. CSS Box Model Margin Border Padding Content
  20. 20. Block & Inline Elements <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <p>Page <span>content</span></p> <p>Page content</p> </body> </html> Page content Page content
  21. 21. Block & Inline Elements <body> <p>Page <span>content</span></p> <p>Page content</p> </body> Page content Page content span { display: block; }
  22. 22. Floats <body> <img src=”picture.jpg” alt=”orange sunset”/> <p>Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem.</p> </body> img { float: left; } Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem.
  23. 23. Some Commonly Used Selectors color background-color height width font-family font-size font-weight text-align • left • right • center
  24. 24. How to use CSS on you WordPress Site 
 • Child Theme
 ◦ Text Editor ◦ FTP • Theme Editor

  25. 25. Floats <body> <img id=”post-image” src=”picture.jpg” alt=”orange sunset” /> <p>Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem.</p> </body> img { float: left; } Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. ?!
  26. 26. Floats #post-image { float: none; } img { float: left; } Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <main.css> <plugin.css>
  27. 27. Specificity Wars!
  28. 28. Specificity Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <main.css> p { color: blue; } p { color: red; }
  29. 29. Specificity Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <main.css> #post-paragraph { color: blue; } p { color: red; }
  30. 30. Specificity #post-paragraph { color: blue; } p { color: red; } Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <main.css> <body> <img id=”post-image” src=”picture.jpg” alt=”orange sunset”/> <p id=”post-paragraph” style=”color:purple”>Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem.</p> </body>
  31. 31. Specificity #post-paragraph { color: blue !important; } p { color: red; } Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <main.css> <body> <img id=”post-image” src=”picture.jpg” alt=”orange sunset”/> <p id=”post-paragraph” style=”color:purple”>Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem.</p> </body>
  32. 32. Specificity Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <plugin.css> <main.css> .post-image { float: none; } body .post-image { float: left; }
  33. 33. Flexbox
  34. 34. Flexbox <body> <div class=”flexbox-parent”> <div class=”flexbox-child”><p>Box 1</p></div> <div class=”flexbox-child”><p>Box 2</p></div> <div class=”flexbox-child”><p>Box 3</p></div> </div> </body> .flexbox-parent { display: flex; flex-wrap: wrap; justify-content: space-between; } .flexbox-child { width: 33%; } Box 1 Box 2 Box 3
  35. 35. Sass
  36. 36. Sass .product-page { color: #333; } .product-page .product-description { margin: 0 auto; } .product-page .product-description p { padding: 20px; font-weight: normal; } .product-page .product-footer { margin-top: 30px; color: white; } CSS .product-page { color: #333; .product-description { margin: 0 auto; p { padding: 20px; font-weight: normal; } } .product-footer { margin-top: 30px; color: white; } }
  37. 37. Sass CSS $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } body { font: 100% Helvetica, sans-serif; color: #333; }
  38. 38. Sass CSS @mixin border-radius($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
  39. 39. Sass CSS %equal-heights { display: flex; flex-wrap: wrap; } .columns { @extend %equal-heights; justify-content: space-between; } .columns { display: flex; flex-wrap: wrap; justify-content: space-between; }
  40. 40. Sass CSS .content { float: left; width: 600px / 960px * 100%; } .content { float: left; width: 62.5%; }
  41. 41. Learning Resources - HTML/CSS Basics • freeCodeCamp (www.freecodecamp.org) • Codecademy (www.codecademy.com) • W3schools - CSS Tutorial (www.w3schools.com/css/default.asp) • Mozilla Developer Network - Intro to CSS (https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS) • The 30 CSS Selectors you must memorize (https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)
  42. 42. Learning Resources - Advanced CSS • Scalable and Modular Architecture for CSS (smacss.com)
 • CSS Preprocessors
 ◦Sass (sass-lang.com)
 ◦Less (lesscss.org)
 ◦Stylus (stylus-lang.com)
 • A Complete Guide to Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) • Specifics on CSS Specificity (https://css-tricks.com/specifics-on-css-specificity/)
  43. 43. Questions

×