How to change body, html and * in component?-CodePudding

I would like to be able to modify the body, html and the * of the login component but impossible to do this. I'm desperate, do you have a solution please?

Stackblitz

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    }


body {
    background-color: red;
}
...

CodePudding user response：

First of all you need to read and understand the login html structure before trying to apply any css. The login.component.html have a container class, divs and inputs that have background-color, so you need to enter the css file and write based on that information.

Here is my solution, copy it to login.component.css, you can work based on that:

.container div, .container input {
    background-color: white;
}

This css will target .container div and .container input separated by a comma, you can have different targets with the same css so the css code doesn't get messy

CodePudding user response：

The elements you wish to style are not in your login.component.html, they are in your index.html.

You can add your desired styling to your root styles.css file and they will be applied globally.

styles.css:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: red;
}

CodePudding user response：

I assume you are developing in browser in stackblitz and when you inspect the element you see the tags "html" and "body". For changing "body" background you need to change it in app.component.css but with the name you gave it in that component which is "container". That way the whole background will be red. In order to avoid that error, try some code editor as Visual Code.

You need to understand the structure of the app. The app-root in index contains which is in app.component.html. That is your "body". In order to define every element css (*) i would do it in app.component.css.