How can I have a basic heading and a custom one?

Question

I have the following CSS to make an H1 that has a line through the background and it is centered. I have to use a span element between my h1 tag for it to work.

The CSS is

h1 {
    font-size: 28px;
    font-family:'Palatino';
    font-style: italic;
    font-weight:600;
    color: #2D6A97;
    margin-bottom:60px;
    position:relative;
    text-align:center;
}

h1 span {
    background:#FDFCF8;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

h1:before {
    background:#E5DEC6;
    content: "";
    display:block;
    height: 1px;
    position:absolute;
    top:50%;
    width:100%;
}

h1:before {
    left: 0;
}

On other pages though, I want just a normal H1 (without any CSS).

How could I change what I have so that the unstyled H1 still looks normal?

Ideally, I would like to be able to do something like:

   <h1 class="withborder"><span>Here's my H1</span></h1>

Answer 1

you already answered:

• you need to give a class to your h1

But if you want to keep your h1 non-styled then in CSS, you have to apply the styles to the class instead of h1, otherwise it will apply to all h1 you have in your project.

.class {
  font-size: 28px;
  font-family: 'Palatino';
  font-style: italic;
  font-weight: 600;
  color: #2D6A97;
  margin-bottom: 60px;
  position: relative;
  text-align: center;
}
.class span {
  background: #FDFCF8;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}
.class::before {
  background: #E5DEC6;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 50%;
  width: 100%;
  left: 0
}

<h1><span>Here's my H1 non-styled</span></h1>
<h1 class="class"><span>Here's my H1 styled</span></h1>