CSS fundamentally transforms
Enabling the creation of maintainable sites and apps that look great across a variety of different devices and contexts.
Choose your Learning Path. Our new Learning Paths will help you get where you want to go, whether it’s learning a programming language, developing new skills, or getting started with something entirely new.
CSS is different. Cascading Style Sheets provide a text-based way to describe what web pages should look like, but it isn’t a programming language and it relies on HTML document structures as a foundation. You need to have a grasp of HTML before you start CSS, but CSS doesn’t look anything like HTML. Nor does it look like JavaScript, the most common programming language on the Web. Whatever your background, getting comfortable with CSS’ unique approach can take some work.
Learn faster. Dig deeper. See farther.
CSS’ declarative model can be uniquely efficient, but requires an understanding not only of the features you want to use but the approach you want to take in decorating a document tree. That means understanding the document tree (and there may be many variations as you apply the same style sheet to multiple documents), the selectors used to identify points on the tree, the cascade that resolves conflicts among selectors, and the properties applied to that tree. Of course, the properties interact with each other and a shared model, so you’ll need to understand how the properties how to make those interactions produce your vision.
Over the years, a lot of people have learned CSS the “view source” way, starting from a set of files and figuring out how they fit together. In the last few years, though, CSS has added a broad range of new capabilities, adding tremendous power but also making it harder to decipher a collection of parts. Starting from other people’s CSS – while still a common challenge – may now be the hardest way to learn CSS. (Some CSS out there is carefully tended and pruned, cleaned up and documented for the next maintainer, but much of it is a tangle of selectors and properties with an order determined by when it was written rather than by function.)
The other fun challenge in teaching CSS is that people come to it from different backgrounds. Designers used to working visually will have a different set of issues than programmers used to structuring program logic in text. In both cases a slow and steady pace can help build familiarity.
O’Reilly’s CSS Fundamentals Learning Path takes you from the basics through common advanced features to give you a solid start on web styling. If you’re starting from the very beginning and haven’t yet explored HTML and CSS, the short Introduction to Web in HTML & CSS lays out the basics you need to understand markup and its relationship to style sheets.
Once you have the very basics down, Adrian Mendoza walks you through CSS’ core capabilities, demonstrating the basics of CSS for color, text, and basic margins before diving into the more complex issues of styling divs and creating layout.
The Learning Path also includes three videos which take you further into specific CSS capabilities. CSS Properties explores a wide range of styling tools, showing new features from basic unit and color handling to flexbox layout, new text effects, and transitions and animations. CSS Dropdown Menus takes a deep dive into a common user interface component. Closing the set, CSS Transformations and Animations explores areas where CSS is rapidly replacing JavaScript, making it easier for hardware acceleration to bring developers smoother performance and reduced ‘jank.’
When you finish the set, you’ll be ready to create maintainable sites and apps that look great across a variety of different devices and contexts. You’ll also know the ins and outs of applying decoration to documents – you’ll be prepared to create documents that are easy to style and understand how to add decoration to existing style sheets.