Documentation/en/Frameworks/Angular/Styling

Angular Styling Guide

Angular provides a variety of tools and techniques for styling your applications. This guide will help you understand how to apply styles to your Angular components.

Overview

Angular uses CSS for styling components. You can apply styles directly to components, use external stylesheets, or leverage CSS-in-JS libraries.

Inline Styling

You can apply styles directly to your Angular components using inline styles.

<div class="example" style="color: red;">This is red text!</div>

External Stylesheets

You can create external stylesheets for your Angular components.

<!-- styles.css -->
.example {
  color: red;
}

<div class="example">This is red text!</div>

CSS-in-JS

CSS-in-JS libraries like Emotion or Styled-Components allow you to write styles inline with your component code.

import styled from 'styled-components';

const RedText = styled.div`
  color: red;
`;

<RedText>This is red text!</RedText>

Angular Material

Angular Material is a library of pre-designed UI components for Angular. It provides a wide range of styling options.

<md-card>
  <md-card-header>
    <md-card-title>Angular Material</md-card-title>
  </md-card-header>
  <md-card-content>
    Angular Material provides a rich set of styling options.
  </md-card-content>
</md-card>