src/style.scss
. Paste the following code into this file:How does the project know to look at this file? In the Angular CLI configuration fileangular.json
underprojects.todo-list.architect.build.options.styles
, you can state the files for the build tool to take and add to the project. You can open the browser's dev tools and see the style inside the element:<html>...<head>...<style type="text/css">...Your style is here</style>...</head>...</html>
html, body, div, span, h1, p, ul, li
) which will affect our app immediately. We also added styles using css-class selectors. We need to add these class names to the relevant elements.app-root
add the class app-title
to the h1
element:input-button-unit
add the btn
class to the button
element:input-button-unit.component.scss
:input-button-unit
component? Look at the file input-button-unit.component.ts
. One of the properties in the object passed to the @Component
decorator is styleUrls
. It's a list of stylesheets to be used by Angular, which encapsulates the style within the component.<app-input-button-unit>
. This element is not a part of this component's template. It appears in its parent's template. This is how we can control its style from within the component.todo-input
class to the input
element:list-manager
component. Open the file list-manager.component.scss
and paste the following style inside:<div>
element with the todo-app
class.todo-item.component.scss
:todo-item
component with a div
element with the todo-item
class:todo-checkbox
and todo-title
classes later on.