How to create global styles in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Every Angular application needs global styles for typography, spacing, colors, and reusable utility classes that apply across all components.
As the creator of CoreUI with over 12 years of Angular development experience since 2014, I’ve architected styling systems for numerous enterprise applications.
Angular provides a dedicated styles.scss file (or styles.css) in the project root specifically for global styles that affect the entire application.
This approach ensures consistent design while keeping component-specific styles isolated.
Add global styles directly to the styles.scss file in your Angular project root.
/* src/styles.scss */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.btn-primary {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
Best Practice Note
The styles.scss file is automatically included in your angular.json configuration under the styles array, making these styles available throughout your application. You can also import additional global stylesheets or third-party CSS libraries here. For larger applications, organize global styles into partials like _variables.scss, _mixins.scss, and _utilities.scss, then import them into styles.scss. This is exactly how we structure CoreUI for Angular templates—with a centralized theme configuration that can be customized through SCSS variables while maintaining component isolation.
