Angular - global styles css and component css

Question

In an Angular project I want to have many tables with a defined style. So for each table in the components I need to write the css for the table styling.

Take this StackBlitz example: StackBlitz

As you can see I have master table with black border, and an agent table with red border, and they are in two separate components. I want that my master table continue black, but the agent table, and all new table I will create latter on in other components had for example an green border.

So my question is, what I need to do if I want use a specific style for a table and use the "global" style for other tables?

Update: how this works also with buttons?

Please post your code in the question itself, in a minimal, complete, and verifiable example. — Obsidian Age
– Obsidian Age, Commented Jan 17, 2019 at 22:53
Rather than styling all buttons, it's better to style a class and then use that for all the buttons you would like to style with this default style. Else you'll have to override the styles every time you want to change something. Does that make sense? — user1247034
– user1247034, Commented Jan 17, 2019 at 22:53

DeborahK · Accepted Answer · 2019-01-17 23:30:04Z

3

You can put any global styles that you want in the styles.css file in your src folder. These styles are global to every template in your application.

Then put any component unique styles in a css file in the same folder as the component and reference it in the @Component decorator.

@Component({
  selector: 'pm-star',
  templateUrl: './star.component.html',
  styleUrls: ['./star.component.css']
})

Styles defined in the @Component decorator are encapsulate for use with the component.

answered Jan 17, 2019 at 23:30

DeborahK

60.9k12 gold badges115 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Seyhmus Gokcen · Accepted Answer · 2019-01-17 23:47:34Z

Let's say you have two css file, one for global and the other one for the specific component and you just want to style a button or a table etc..

global.css

.styledbutton { background-color : Red }

component.css

.styledbutton { background-color : green !important }

Link the global css file to all of your component and the specific css together in the component like

@Component({
   selector: 'component',
   templateUrl: 'component.html',
   styleUrls: ['global.css', 'component.css']
})

If you delete all the css from the component.css the button will get the global.css and if not it will take overriden css

Hope this helps

score 1 · Accepted Answer · 2019-01-17 23:19:42Z

For example when styling a button, if you have a general style you would like to use across the page or the site, use a class, rather than styling the HTML element. Else you'll have to override those styles any time you don't want to use them. This way you can easily extend your styles so that a button can inherit the styles and have changes. Notice how .button-extended inherits the :hover styles from .button. By styling the class rather than the element, you are free to use it on any HTML element, rather than being restricted to one. I also recommend you look into learning SASS (SCSS). This is an example of the HTML and CSS:

.button
{
    display: inline-block;
    width: auto;
    background: #000;
    color: #fff;
    border: solid #39f;
    border-radius: 5px;
    padding: 1em;
    text-decoration: none;
    text-align: center;
    margin-bottom: 0.5em;
}
    .button:hover
    {
        background: #fff;
        color: #000;
    }

.button-specific
{
    display: inline-block;
    background: #fff;
    color: #000;
    border: solid;
    border-radius: 5px;
    padding: 1em;
    text-decoration: none;
    text-align: center;
    margin-bottom: 0.5em;
}
    .button-specific:hover
    {
        color: #39f;
        background: #000;
    }

.button-extended
{
    display: block;
    border: solid #ff0000;
    text-transform: uppercase;
    padding: 2em;
    background: #ccc;
}

<a href="#" class="button">.button</a>
<br>
<a href="#" class="button-specific">.button-specific</a>
<br>
<a href="#" class="button button-extended">.button, .button-extended</a>

Collectives™ on Stack Overflow

Angular - global styles css and component css

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related