Styling Explained - CSS Rules & Best Practices

Styling in Angular

Styling means designing the UI of an application by controlling:

  1. Colors
  2. Height & width
  3. Layout & positioning
  4. Font size and appearance
  5. Spacing (padding, margin)

CSS stands for Cascading Style Sheets.

It is used to define how HTML elements should look on the screen.


Types of Styling in Angular

Angular supports multiple ways to apply styles:

Component Styles

Global Styles

Inline Styles

Internal Styles

External Styles

Multiple CSS files per component

Each approach has a specific use case.


Component Styles

What Are Component Styles?

  1. Styles written inside a component’s .css file
  2. Example: app.component.css, user-data.component.css
  3. Styles apply only to that component

Example

<h1 class="heading">App Heading</h1>

.heading {
background-color: orange;
color: white;
padding: 10px;
border-radius: 10px;
}

Key Points

  1. Component styles do not affect other components
  2. Best for component-specific UI
  3. Angular uses style encapsulation by default

Global Styles

What Are Global Styles?

  1. Styles written in styles.css
  2. Apply to the entire application
  3. Affect all components


When to Use Global Styles?

  1. Common headings
  2. Buttons
  3. Typography
  4. Theme styles
  5. Reusable UI elements

Example

.heading {
background-color: orange;
}

Applies to all components

Breaks isolation if overused


Styling Multiple Components (Common Scenario)

Problem

Same style repeated in:

  1. app.component.css
  2. user-data.component.css
  3. admin-data.component.css


Code duplication

Hard to maintain


Solution

Move common styles to styles.css

Clean

Reusable

Scalable


Creating Multiple Global CSS Files

Example Use Cases

  1. buttons.css
  2. themes.css
  3. common.css

Steps to Use Extra Global CSS Files

  1. Create CSS file inside src
  2. Register it in angular.json

"styles": [
"src/styles.css",
"src/buttons.css"
]

Restart the server after changes


Button Styling (Real-world Example)

Base Button

.btn {
padding: 8px 12px;
border: none;
cursor: pointer;
border-radius: 4px;
color: white;
}


Button Variants

.btn-primary { background: blue; }
.btn-warning { background: red; }
.btn-success { background: green; }


Usage

<button class="btn btn-primary">Login</button>
<button class="btn btn-warning">Delete</button>
<button class="btn btn-success">Submit</button>

✔ Bootstrap-like structure

✔ Scalable styling system


Inline Styles

What Are Inline Styles?

  1. Written directly inside HTML

<div style="border:1px solid green;">
Mid Area
</div>

Use Case

  1. Very small, one-time styling
  2. Quick debugging

Not recommended for large apps


Internal Styles

What Are Internal Styles?

  1. Written inside <style> tag
<style>
.box { color: red; }
</style>

Not recommended in Angular

Component CSS is better


Inline Template & Styles (Small Components)

When Component Is Very Small

You can write HTML & CSS directly in .ts file.

@Component({
template: `<h1>User Data</h1>`,
styles: [`h1 { color: red; }`]
})

Useful for small components

Avoid for large layouts


Loading Multiple CSS Files in One Component

Default

styleUrl: './app.component.css'


Multiple Files

styleUrls: [
'./app.component.css',
'./common.css'
]

Helps organize styles

Keeps code clean


Important Styling Rules (Best Practices)

Use component styles for component-specific UI

Use global styles for reusable elements

Avoid repeating CSS

Separate large styles into multiple files

Follow naming conventions (btn-primary, btn-warning)

Avoid inline styles for large applications