Defining Stylesheets in Angular 4

Key Takeaways

[Music] so when you use the angular command-line interface to generate an angular project by default it's going to set the project up to work with standard CSS so if we run or at least type it out I'm not actually going to execute this ng new your project name and hit enter you'll see that by default it will set up the project just to work with straight-up normal CSS now if you wanted to set it up so that you can use the power of sass then we add the - - style equal isn't binded to SAS or scss and then when you hit enter it's going to structure the project to work with sass which is a preprocessor which has a lot of different handy features that standard CSS simply doesn't have so if you're working with a bigger project you can use s CSS which I personally like to use and it will help your CSS code as you're writing along now we already started a project from the screen angular for course so I'm just going to CD into it and then I'm going to run and you serve okay so this is the code that we had from the previous lesson that we've been working on and I'm just going to quickly get rid of everything in the template and we don't need this event down here as well okay so when you use the angular command line interface to generate a project by default it will set up your components to work with external CSS stylesheets so whether you're using inline or external CSS they're both defined within the component decorator right here okay so an external stylesheet is defined within the style URLs property right here maybe as you can see it's linking to a specific file called app components CSS and this is what the command line interface generates and by default this is blank this is where all your CSS rule sets will go all right so I this way all the CSS that is specific to this components template will be placed in that file so it's useful when you're dealing with a lot of CSS and you don't want your CSS cluttering your component code now should you prefer to write inline CSS within the component decorator itself you have to change the style URLs property to styles and then we can remove this right here and if we want to run or allow yourself to write multi-line CSS we use backticks which is the tilde key and then our CSS rule sets will go right here so we'll create one for h1 we'll make this text-decoration:underline and also we need to designate an actual h1 tag appear in the template and we'll make this hello we'll save it and there we go we can see that it is underlined so again to recap like HTML you can choose to write your CSS in line through the Styles property but it's usually best to keep your CSS in an external style sheet so that things are kept more organized especially when you have a decent amount of CSS rule sets okay so in the next lesson we're going to take a look at class binding