CSS Tutorial with Angular 9/8: ngClass, ngStyle & ViewEncapsulation

In this tutorial, we'll learn about CSS and how to use it in Angular apps. We'll see by example how an Angular 8 application generated by Angular CLI is styled.

We'll also see how to use ngClass and ngStyle built-in directives for applying styles dynamically in Angular 9

We'll also see the various APIs and configurations related to CSS in Angular.

CSS for Angular 9 Developers

In a nutshell, we'll learn:

The basics of CSS for Angular 9 developers,
How to use CSS styles in components,
Global CSS styles,
CSS and View encapsulation in Angular,
Component selector,
How to import CSS and how to use a CSS framework like Bootstrap or Tailwind with Angular 9,
The :host pseudo-class selector
How to style parent and child components,
How to share CSS between components, and much more.

You can either use Angular CLI as the tool for initializing and working with your Angular 9 project or Stackblitz, the online IDE for front-end development.

What is CSS?

So, what is CSS?

Let's refer to Wikipedia for the definition of CSS.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS allows developers to separate the presentation from the content. This has many benefits such as enabling multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, reduce complexity and repetition in the structural content.

Thus we can see that CSS tries to solve the common problems in general software and web development such as reusability and separation of concerns.

If you know that HTML is the very first language that you need to learn as a web (frontend or backend) developer then you'll also want to know that CSS is the second language that you should know. In most cases, you don't have to be a CSS expert but you should at least have the basics!

How Does CSS Relate to HTML?

HTML is a markup language that is used to create the structure of web pages by allowing you to add headlines, paragraphs, forms, and tables and embed images, videos and other types of media. CSS is on the other hand concerned with styling the web pages such as layouts, colors and fonts, and much more.

How Is CSS Used?

CSS is deeply related to HTML as it's applied to HTML element tags using various ways such as external CSS files, internal CSS styles or inline styles.

For instance, let's take the <body> element tag in HTML which defines the main content of the HTML document that will be directly visible on your web page.

If you want to make the background of the web page appear black and the color of any text within the body appear white, you’ll need to use CSS styles as follows:

body  {  color: white;  background-color:black;  }

In this example, body is the CSS selector which defines the HTML element tag to which the CSS styles will be applied.

In CSS, you need to place the element selector on the left and the CSS properties like the color and background-color and their values between curly brackets in the right. The right part is called a CSS declaration.

Note: In our example, color and background-color are CSS properties while white and black are values. A CSS property can have more than one accepted value in most cases.

In our example, we used a simple CSS selector for selecting the HTML body in a document but CSS provides complex and powerful selectors that can select multiple HTML elements based on various rules.

How Is CSS Applied to HTML Elements?

Now that you have seen a simple example of a CSS selector and declaration, how do we apply the defined CSS code to an actual HTML document?

As we said previously, CSS is deeply related to HTML. As such, HTML does provide more than one way for attaching CSS styles to HTML documents.

HTML provides three ways that you can use to attach CSS styles to your HTML pages, such as:

Using external CSS stylesheets (simple text files with the .css extension),
Using internal CSS styles via the HTML <style> tag element,
Using inline CSS styles via the style attribute suported by HTML element tags.

External stylesheets can be attached to an entire website, while internal styles can be attached to individual pages and finally inline styles can be only attached to individual HTML element tags. The two latter methods should only be used for small use cases.

In most cases, all the previous are combined to style websites.

Now, how to attach an external stylesheet file to an HTML file? You simply need to use the <link> tag in the <head> section of the document and point the href tag to the URI of the CSS file:

<head>
<link rel=”stylesheet”  type=”text/css”  href="styles.css”>
</head>

Internal styles are CSS instructions which are added in the <head> of an HTML document via the <style> tag:

<head>
<style>
body {  color: white; background-color: blue;  }
</style>
</head>

Inline styles are CSS code that's added directly into the HTML element, and applicable only to that element. For example:

<h1  style=”color: white;”>CSS Tutorial</h1>

Note: Angular adds more ways to attach CSS to HTML templates and provides more features for working with CSS.

Conclusion

As a recap of our CSS tutorial, we have seen what CSS is and what is used for.