Different styles for different pages

HTML-CSS
1

Hi guys,

I’m currently implementing everything I’m learning with my own desktop.html website.

I’ve a Home, Register & about page. I’ve used ‘class’ to give each it’s own background but now I want to change some of the other elements such as font but obviously when changing ‘p’ to red, it changes across the 3 pages.

If I wanted to have the content inside a ‘p></p’ different style on each page would I use class, inline styles or other?

I’ve spent all day on this so far, it’s frustrating but I’m learning!

body.home { background-image: url(cool.jpg); }
body.register { background-image: url(dool.jpg); }
body.about { background-image: url(fool.jpg); }

p { color: #0A4600; } (ideally I want all 'p' across the 3 sites to be different colors and eventually I want to mess with the headers/borders.

2

Instead of changing it on the p element, why not use a class and apply it only where you want?

1 Like
3

Thank you, how would this look exactly? I’m messing around with it and can only change the text to blue with the following. This is where I get confused, without the ‘p’ nothing changes, I’m assuming something to do with parents/children etc.

#div1 p {
color: blue;

html:
div id=“div1”
p>Lorem ipsum<p
div

4

What you have is correct if you are specifically targeting p tags within a specific div.

A couple of alternatives:

1. Define your colours as separate classes e.g.

.red {
  color: red
}

then where you want a red p tag, p class=“red”.

If you have other copy e.g. headings that you also want red within the same container element, apply the class to the container itself e.g. div class=“red”

In practice, if you are likely to want to set other styles at the same time, having a class named ‘red’ is a bit restrictive. A more generic class name would be better so you can do more than one thing.

2. Take the lead from your existing classes, and define the colour for all p’s on the page:

body.home  p {
  color: red
}

or, set all text on the page to be red:

body.home  {
  background-image: url(cool.jpg);
  color: red
}
2 Likes
5

Super, thank you. I both love and hate this part of learning! Bookmarked.

I used the first example on all 3 pages. :slight_smile:

1 Like