7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Global Styling

Following on from component styling, in this lesson we'll see how we can add global styles at the application level.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


2.5 Global Styling

Hi folks. In this lesson we're going to see how we can add global styling for our application as opposed to the highly specific component styling that we looked at in the last lesson. To add application-level styling, the CLI has already added a file to the root of our application called styles.scss. Any styles that we add to this file will be global and will not be scoped to a particular component. I like to keep this file free from any actual CSS, and use it just for imports. So we currently have a folder in the app folder called assets. At the moment, it only contains this .gitkeep file. And that just makes sure that the empty folder gets included by Git. So we can go ahead and delete this file now. And let's add a new folder inside this assets folder called styles. Inside this new folder, let's add a new file. We'll call it _variables.scss. So inside this new file, let's add some Sass variables. So we've added four variables here. Three different colors, which are used throughout the application, and the last is the font family. So next let's add a folder in the assets folder called fonts. I've got some font files ready on my desktop, so I'm gonna drag these into this new fonts folder that I've just created. So these are all open source and free fonts. You can download them all from Google Fonts. So now let's add another Sass file to the styles folder, this one called _fonts.scss. Inside this file, we can add some CSS for the custom font that we're going to be using. So note that the paths to the font files are relative to the root src folder, not the styles folder that this file currently resides in, because we're going to be importing this file into other files. So let's add one final new file now to the styles folder. This one is called _app.scss and we'll use this for some global styling. So this file uses some of the variables that we've defined in the other Sass files that we've added. So now we can import all of these files. We need to do this in the styles.scss file in the root of the application. Let's just make sure everything's saved. So let's get rid of this generic comment. So let's go back to the browser now. And we can see that the appearance of the page has changed again, specifically the font that we're using for the title of the application. And let's take a look at the head of the page once again. And again, we've got two style elements here in the head. And when we open up the first one now, we see all of the global styling that we added and imported into the style.scss file. So in this lesson, we saw that to add global styling for our application, we need to add styles to the style.scss file in the root of the src folder. We also saw that we can use imports in this file in order to help keep our Sass nice and modular. Thanks for watching.

Back to the top