7- Learn CSS Fundamentals / Simple selectors
•
0 j'aime•70 vues
Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to use CSS selectors to select and style HTML elements. - How to apply type selectors, classes, IDs and universal selector. - How to apply multiple classes. - Use class with semantics in mind. - CSS architecture solutions (BEM, SUIT, SMACSS, OOCSS). READY-TO-USE CODE: http://inarocket.com/courses/css/css-fundamentals/selectors-simple.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
Recommandé
Recommandé
Contenu connexe
Plus de In a Rocket
Plus de In a Rocket (9)
Dernier
Dernier (20)
7- Learn CSS Fundamentals / Simple selectors
- 1. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS SelectorsSimple (TYPE / CLASS / ID | UNIVERSAL)
- 2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CLASS Selector ID Selector TYPE Selector (aka Element selector)
- 3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TYPE SELECTOR With this code all paragraphs are shown in green. A CSS type selector allows you to select and style a HTML element. p {color: green} Syntax element {style properties}
- 4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser TYPE SELECTOR <body> <p>CSS rocks!</p> <p>Hello world.</p> </body> p { color: green; } Web page title index.html CSS rocks! Hello world.
- 5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CLASS Selector ID Selector TYPE Selector
- 6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CLASS SELECTOR Only the elements with the “ready” class are shown in orange. A CSS class selector allows you to select and style the elements with the specified class. .ready {color: orange} Syntax .classname {style properties}
- 7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser CLASS SELECTOR <body> <h1 class="ready">CSS rocks!</h1> <p>Hello world.</p> <p class="ready">More content.</p> </body> Web page title index.html .ready { color: orange; } CSS rocks! Hello world. More content.
- 8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser CLASS SELECTOR: APPLY MULTIPLE CLASSES <body> <p class="ready">CSS rocks!</p> <p class="ready important">Hello world.</p> </body> .ready { color: orange; } .important { font-weight: bold; } Web page title index.html CSS rocks! Hello world.
- 9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser CLASS SELECTOR: TARGET MULTIPLE CLASSES <body> <p class="ready">CSS rocks!</p> <p class="ready important">Hello world.</p> </body> .ready { color: orange; } .ready.important { font-weight: bold; } Web page title index.html CSS rocks! Hello world.
- 10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com REFERENCE: W3C - USE CLASS WITH SEMANTICS IN MIND
- 11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CSS ARCHITECTURE BEM: Block — Element — Modifier SUIT CSS: Style tools for UI components SMACSS: Scalable and Modular Architecture for CSS OOCSS: Object Oriented CSS
- 12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CLASS Selector ID Selector TYPE Selector
- 13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ID SELECTOR Only the element with the “promo” id is shown in red. A CSS id selector allows you to select and style the element with the specified id. #promo {color: red} Syntax #id_value {style properties}
- 14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser ID SELECTOR <body> <p id="promo">CSS rocks!</p> <p>Hello world.</p> </body> #promo { color: red; } Web page title index.html CSS rocks! Hello world.
- 15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CLASS Selector ID Selector TYPE Selector
- 16. in a ROCKET UNIVERSAL SELECTOR ~ ~ ~
- 17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com UNIVERSAL SELECTOR With this code all HTML elements are shown in red. A CSS universal selector allows you to select and style all elements on a page. * {color: red} Syntax * {style properties}
- 18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser UNIVERSAL SELECTOR <body> <h1>CSS rocks!</h1> <p>Hello world.</p> <ul> <li>First.</li> <li>Second.</li> </ul> <footer>All rights reserved.</footer> </body> * { color: red; } Web page title index.html CSS rocks! Hello world. • First. • Second. All rights reserved.
- 19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com SOURCE: Selectors Level 3 by W3C.
- 20. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com YOU CAN CONTINUE THIS COURSE FOR FREE ON + READY TO USE CODE + QUIZZES + FREE UPDATES
- 21. We respect your time No more blah blah videos. Just straight to the point slides with relevant information. Ready to use code Real code you can just copy and paste into your real projects. Step by step guides Clear and concise steps to build real use solutions. No missed points. Learn front-end development at rocket speed inarocket.com
- 22. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS SelectorsSimple (TYPE / CLASS / ID | UNIVERSAL)