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>

Seems like you answer to your question yourself : you can use a class :) — Vincent G, May 17 '16 at 21:06

dippas · Accepted Answer · 2016-05-17T21:13:09.610

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>

score 0 · Answer 2 · answered May 17 '16 at 21:11

there are loads of different ways.. Instead of adding classes to every h1 tag though I'd probably use a class on the body of the pages I wanted to style the h1 tag with and then target the h1's in the css.

for example

<body class="styleThisPage">

and in the css

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

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

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



  body.styleThisPage h1:before {
        left: 0;
    }

but it's just personal preferences and depends on the site.

score 0 · Answer 3 · answered May 17 '16 at 21:44

If you want that one pages have styled H1 and others does not have it you also can write this styles in file and include this file in pages which need it. Or as was answered before, you can use class for marking your H1 - then you need to write styles for class.

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

3 Answers3