CSS describes how structured HTML content is presented. In Angular applications, styles can be defined globally, attached to individual components, or supplied by a component library. External component styles keep presentation separate from templates and code, although inline styles can be simpler for small changes. section 16.3.1 section 16.5
Common CSS tasks in Angular projects include:
- Define selectors such as .tableContainer and .fullWidth to add padding or control an element's width. section 2.5.1
- Associate a component with one or more external CSS files through the styleUrls property. section 16.3.1
- Add global stylesheets such as Bootstrap to the Angular build configuration so they become part of the styles bundle. section 5.1.1 section 20.1.1
- Use routerLinkActive to style an element when its route is active, and account for conflicts between stylesheet frameworks. section 25.0 section 28.1.2
Component-specific stylesheet
Create productForm.component.css with rules for the component's div elements, then reference it from the component decorator with styleUrls: ["productForm.component.css"]. The resulting styles affect the content produced by that component rather than unrelated application content. section 16.3.1 section 16.5
Listing 2.18. Defining styles in the app.component.css file in the src/app folder
.spacer { flex: 1 1 auto }
.tableContainer { padding: 15px }
.fullWidth { width: 100% }
Inspect a compact stylesheet that combines a flex spacer with class selectors for container padding and full-width layout. section 2.5.1
