Chris Farrugia Chris Farrugia - 6 months ago 8
HTML Question

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

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

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>