Styling Angular Applications
When it comes to styling Angular applications, there’s a lot to know. This course will teach you how styles work in Angular, how to apply maintainable systems using CSS/SCSS, component theming techniques, and more.
What you'll learn
Angular requires you to change the way you architect CSS. But before you can become a master at styling Angular applications, you need to understand the different ways things can be done. In this course, Styling Angular Applications, you'll explore how the framework aligns with web components and what that means for adding styles to components and apps. First, you'll develop systems geared towards organization, scale, and maintainability for HTML and CSS. Then, you'll see how to add and style components within these systems. Finally, you'll learn about component themes and the ways you can transform their look under certain circumstances. By the end of this course, you'll have a strong knowledge of how Angular processes CSS and how it can be leveraged as part of a design system for creating beautiful, organized, maintainable, and future-proof web applications.
Table of contents
- Introduction 2m
- Global Styles: A Traditional Approach 5m
- Global Styles: A More Modular Approach 12m
- Simplifying Global Imports for Preprocessors 2m
- Naming Conventions 7m
- Predictable Sizing with Relative Units 4m
- CSS Selectors and Style Overrides 6m
- Component CSS Structure and Organization 5m
- Local Mixins and Variables 3m
- Styling the Pre-boostrap Loading Screen 2m
- Summary 2m