Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Basic HTML CSS Slides
Semelhante a Basic HTML CSS Slides (20)
Último
Último (20)
Basic HTML CSS Slides
- 1. 1
- 3. Allyson Wehrs Who am I? Web Engineer with LuminFire Experience Interests
- 4. Overview • HTML • CSS • CSS and WordPress • CSS Preprocessors
- 5. HTML
- 7. • html • head • title • body HTML Elements <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> </body> </html>
- 8. Paragraphs Hello World <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <p>Hello World</p> </body> </html>
- 9. 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>
- 10. 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>
- 11. 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>
- 12. 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>
- 13. 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>
- 14. 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>
- 15. Buttons <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <button type=”button”>Click Me!</button> </body> </html> Click Me!
- 16. • 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>©</p> </footer> </body> </html>
- 17. • 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>
- 18. CSS
- 19. 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
- 21. 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
- 22. Block & Inline Elements <body> <p>Page <span>content</span></p> <p>Page content</p> </body> Page content Page content span { display: block; }
- 23. 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.
- 24. Some Commonly Used Selectors color background-color height width font-family font-size font-weight text-align • left • right • center
- 25. How to use CSS on you WordPress Site • Child Theme ◦ Text Editor ◦ FTP • Theme Editor
- 26. 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. ?!
- 27. 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>
- 29. 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; }
- 30. 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; }
- 31. 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>
- 32. 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>
- 33. 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; }
- 34. Flexbox
- 35. 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
- 36. Sass
- 37. 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; } }
- 38. 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; }
- 39. 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; }
- 40. 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; }
- 41. Sass CSS .content { float: left; width: 600px / 960px * 100%; } .content { float: left; width: 62.5%; }
- 42. 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)
- 43. 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/)
- 44. Questions