0

hi I want to add css in title sections in my page

I have a different sections in 1 page

but I want to change in each section fonts and color of title text

but not sure about how to do that

enter image description here

Sumner Evans
  • 8,951
  • 5
  • 30
  • 47
Nurik kom
  • 21
  • 1
  • 1
  • Can you not add a class per section you want to change and then write custom rules for each of those CSS classes? – Seb Cooper Aug 16 '17 at 16:36

3 Answers3

2

Give each section a class, and then apply the stylings to the children of that class. For example:

.section-1 h2{
  color:#fff;
}
.section-1{
  background-color:orange;
}
.section-1 p{
  color:blue;
}
.section-2 h2{
  color:#fff;
}
.section-2{
  background-color:peachpuff;
}
.section-2 p{
  color:black;
}
.section-3 h2{
  color:#fff;
}
.section-3{
  background-color:pink;
}
.section-3 p{
  color:purple;
}
<html>
<head></head>
<body>
<div class="section-1">
   <h2>Section 1</h2>
   <p>Filler paragraph text</p>
</div>
<div class="section-2">
   <h2>Section 2</h2>
   <p>Filler paragraph text</p>
</div>

<div class="section-3">
   <h2>Section 3</h2>
   <p>Filler paragraph text</p>
</div>

<div class="section-4">
   <h2>Section 4</h2>
   <p>Filler paragraph text</p>
</div>

</body>
</html>
Sensoray
  • 2,360
  • 2
  • 18
  • 27
1

You can make separate css options via Id attribute.

Check out https://www.w3schools.com/html/html_css.asp. "The id Attribute"

Phillip Bussart
  • 11
  • 1
0

You can use the style attribute https://www.w3schools.com/tags/att_style.asp

<h1 style="color:blue;text-align:center">This is a header</h1>
<p style="color:green">This is a paragraph.</p>
Austin Poole
  • 652
  • 6
  • 11
  • 1
    Inline css styles are bad. You should read the answers to [this question](https://stackoverflow.com/q/2612483/5894241). – Nisarg Shah Aug 16 '17 at 16:31
  • Managing them becomes a nightmare in large applications if you are working with vanilla javascript and html. Thats not the case with however with React Native where you have styles injected per tag and also react components for used in broswers have styles injected instead of having class conflicts like with material-ui. – Austin Poole Aug 16 '17 at 16:37