CODEWITHSUNDEEP
css
Madeline
Madeline

Reputation: 39

Using Styles and in CSS

I'm very new to CSS and trying not to create more styles than I need but getting a bit caught up when trying to apply multiple things to one element.

Basically I have a document with 10 chapters I'm using CSS to create output for. Each chapter looks the same but has different coloured headings and headers and footers. So I created a generic class for each chapters colour and have applied that to the headings in the relevant chapters (eg, h1.Operation applies the Operation chapter colour to the heading 1 style).

But then I needed style to right align the header so I created that style (eg, td.RightAlignHeaderFooter) but now I can't apply the chapter colour using the generic class for the chapter.

Basically, I'm trying to avoid creating 10 identical styles where the only difference is the colours. Is using a generic class the right way to go about this?

Upvotes: 0

Views: 32

Answers (1)

Justinas
Justinas

Reputation: 43441

Yes, using generic class is right way to use CSS classes.

.header-red {
  color: red;
}

.header-blue {
  color: blue;
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}
<div class="header-red align-center">TEXT</div>
<div class="header-red align-right">TEXT</div>
<div class="header-blue align-center">TEXT</div>
<div class="header-blue align-right">TEXT</div>

Upvotes: 1

Related Questions