Come on a tour of “modern” CSS in 2020. This example-driven book demonstrates the concepts by showing code examples, screenshots, and diagrams to help clearly communicate the information.
You'll start with the very basics of CSS: box model, colors, selectors and combinators, and specificity. Then gradually move through more intermediate topics - styling text, positioning, Z-index and stacking contexts, gradients, borders, and then to more advanced topics such as transforms, transitions, animations, flexbox, and CSS grid. Some features are only available in modern browsers (Chrome, Edge, Safari, and Firefox), but information about IE11 compatibility is included where possible.
There is a lot of discussion about how hard CSS is, and how intimidated some people are by it, but it doesn’t have to be this way. Modern CSS uses a logical and understandable approach to break down and clearly explain the ins and outs of CSS.
What You'll Learn
Work with the syntax of CSS selectors and calculate specificity
Use styling techniques, fonts and text styling
Review custom properties (variables)
Explore the different ways an element can be transformed
Use animating elements with CSS transitions
Position elements using Flexbox layout
Understand the basics of responsive design
Who This Book Is For
Anyone who has some experience with HTML, and some CSS, but might not be familiar with some of the newer concepts like flexbox or grid. Also, those looking for a refresher in those areas.
AI Reading Assistant
Whole-book reading guide from stratified index samples; jump to passages in the text
Tip the Site
Support this siteYour recognition and a small knowledge-service contribution help keep this technical work open source.Scan the WeChat Pay or Alipay code below. Logged-in and guest visitors can both tip.
WeChat Pay
Alipay
Open WeChat or Alipay and scan. No login required.
Brief outline
【One-Line Pitch】
Come on a tour of “modern” CSS in 2020. This example-driven book demonstrates the concepts by showing code examples, …
【Book Arc】
- **Opening (~0%–12%)**: You'll start with the very basics of CSS: box model, colors, selectors and combinators, and specificity.; ntroduction In this book, we will take a tour of modern CSS.
- **Early (~12%–35%)**: y rankings 28 Calculating specificity 29 The escape hatch: !; rankings 28 Calculating specificity 29 The escape hatch: !
- **Middle (~35%–65%)**: e Attardi is a software engineer specializing in front-end development.; a collection of multiple values, depending on the property.
- **Late (~65%–88%)**: all div elements with a class of my-class .; eans the mouse button has been pressed but not yet released.
- **Ending (~88%–100%)**: height properties of an inline element will have no effect.; Similarly, CSS has units such as px , em , and rem .
【Key Takeaways】
- **You'll start with the…** (Opening): You'll start with the very basics of CSS: box model, colors, selectors and combinators, and specificity.
- **ntroduction In this book** (Opening): ntroduction In this book, we will take a tour of modern CSS.
- **I appreciate their pat…** (Opening): I appreciate their patience with me as a first-time author.
- **y rankings 28 Calculat…** (Early): y rankings 28 Calculating specificity 29 The escape hatch: !
- **rankings 28 Calculatin…** (Early): rankings 28 Calculating specificity 29 The escape hatch: !
- **nkings 28 Calculating…** (Early): nkings 28 Calculating specificity 29 The escape hatch: !
【Reading Tips】
- Use Passage locations below to jump into the text and set reading anchors
- If this is a brief outline, click Regenerate (top right) for a synthesized guide
【Coverage Limits】
Compressed outline without the model (~42 index chunks). Full structured guide needs AI available.
Excerpt 1
1 . For more detailed information, please visit http://www.apress.com/source-code . ISBN 978-1-4842-6293-1 e-ISBN 978-1-4842-6294-8 https://doi.org/10.10...
used There are several ways to use CSS in an HTML document. They all have the end result: a style sheet that is applied to the document. Inline styles Every...
, to determine each element's size and location on the page. At the layout stage, however, nothing is actually shown on screen yet. Once layout is complete,...
y four items with the selector .my-list > li:nth-child(4n) . We can even select all odd-numbered children with the selector .my-list > li:nth-child(odd) or e...
box will shrink to 76 pixels, as visualized in Figure 3-5 . Figure 3-5 The full rendered size of the element using border-box Block and inline elements There...
s using vw units will have their sizes adjusted accordingly. Because vw and vh are relative to the viewport size, they are a good choice when using responsiv...
Support this siteYour recognition and a small knowledge-service contribution help keep this technical work open source.
Scan the WeChat Pay or Alipay code below. Logged-in and guest visitors can both tip.
WeChat PayAlipay
Open WeChat or Alipay and scan. No login required.
Add Tag
Enter tag name (max 50 characters)
Share E-Book
Modern CSS Master the Key Concepts of CSS for Modern Web Development (Joe Attardi)（Z-Library）
Scan QR code with your phone to access
Copy the link or scan the QR code to access this e-book on your phone
Share E-Book via Email
Please enter email address
Donation Statistics
¥.00
Total Donations
0
Donation Count
Modern CSS Master the Key Concepts of CSS for Modern Web Development (Joe Attardi)（Z-Library）
Find Your Favorite Books
Only registered users can comment after logging in. Comments need to be reviewed by administrators before being displayed
Loading comments...
Reply to Comment
Edit Comment