10- Learn CSS Fundamentals / Pseudo-elements
•
0 likes•103 views
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: - Pseudo-elements as a way to refer to content that does not exist in the source document. - How to style the first letter or line of a text. - How to use CSS to generate content before/after an element’s content. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/pseudo-elements.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
More Related Content
What's hot
What's hot (20)
Similar to 10- Learn CSS Fundamentals / Pseudo-elements
Similar to 10- Learn CSS Fundamentals / Pseudo-elements (20)
More from In a Rocket
More from In a Rocket (12)
Recently uploaded
Recently uploaded (20)
10- Learn CSS Fundamentals / Pseudo-elements
- 1. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Pseudo-element
- 2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com “Pseudo-elements create abstractions about the document tree beyond those specified by the document language. They may also provide authors a way to refer to content that does not exist in the source document.” SOURCE: Selectors Level 3 by W3C.
- 3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Pseudo-elements ::first-letter ::first-line ::before ::after
- 4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-ELEMENTS / FIRST-LETTER With this code the first letter of all paragraphs is shown in green. Represents the first letter of an element, if it is not preceded by any other content on its line. p::first-letter {color: green} Syntax selector::first-letter {style properties}
- 5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-ELEMENTS / FIRST-LETTER <body> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur eveniet dicta, deleniti eos.</p> <p>Debitis vitae minus magnam quod porro numquam officia! Natus, culpa tenetur.</p> </body> p::first-letter { color: red; } Web page title index.html Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur eveniet dicta, deleniti eos. Debitis vitae minus magnam quod porro numquam officia! Natus, culpa tenetur. READY TO USE CODE
- 6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Pseudo-elements ::first-letter ::first-line ::before ::after
- 7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-ELEMENTS / FIRST-LINE With this code the first line of all paragraphs is shown in green. Describes the contents of the first formatted line of an element. p::first-line {color: green} Syntax selector::first-line {style properties}
- 8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-ELEMENTS / FIRST-LINE <body> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur eveniet dicta, deleniti eos.</p> <p>Debitis vitae minus magnam quod porro numquam officia! Natus, culpa tenetur.</p> </body> p::first-line { color: green; } Web page title index.html Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur eveniet dicta, deleniti eos. Debitis vitae minus magnam quod porro numquam officia! Natus, culpa tenetur. READY TO USE CODE
- 9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Pseudo-elements ::first-letter ::first-line ::before ::after
- 10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-ELEMENTS / BEFORE With this code all paragraphs are preceded by "★". Describes generated content before an element’s content. p::before {content: "★"} Syntax selector::before {style properties}
- 11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-ELEMENTS / BEFORE <body> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur eveniet dicta, deleniti eos.</p> <p>Debitis vitae minus magnam quod porro numquam officia! Natus, culpa tenetur.</p> </body> p::before { content: "★"; } Web page title index.html ★ Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur eveniet dicta, deleniti eos. ★ Debitis vitae minus magnam quod porro numquam officia! Natus, culpa tenetur. READY TO USE CODE
- 12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Pseudo-elements ::first-letter ::first-line ::before ::after
- 13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com PSEUDO-ELEMENTS / AFTER With this code all paragraphs are finished with ✔. Describes generated content after an element’s content. p::after {content: "✔"} Syntax selector::after {style properties}
- 14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-ELEMENTS / AFTER <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> li::after { content: "✔"; } Web page title index.html • Item 1 ✔ • Item 2 ✔ • Item 3 ✔ READY TO USE CODE
- 15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser PSEUDO-ELEMENTS / BEFORE + AFTER <body> <q>To be, or not to be,</q> Shakespeare said, <q>that is the question.</q> </body> q::before { content: "“"; } q::after { content: "”"; } Web page title index.html “To be, or not to be,” Shakespeare said, “that is the question.” READY TO USE CODE
- 16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com REFERENCE: W3C SOURCE: Selectors Level 3 by W3C.
- 17. 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
- 18. 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
- 19. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Pseudo-element