• 0
Sign in to follow this  
Followers 0

Customising h1

Question

Posted · Report post

Hi Folks

 

I am trying to customise the h1 font settings on my site https://www.magva.com

 

What I have at the moment is a custom font defined in the css:

.meltitle {
font-family: 'Melbourne', sans-serif;
font-size: 22.4px;
font-weight: 600;
color: #925c21;
font-style: normal;
}

In the text of the page this is called by:

<a title="Graphic design and letterpress" href="http://www.magva.com/what-we-do/letterpress/"><span class="meltitle" style="text-align: left;">DESIGN + LETTERPRESS</span></a>

What I want to do is change this to the h1 and have tried:

h1 {
font-family: 'Melbourne', sans-serif;
font-size: 22.4px;
font-weight: 600;
color: #925c21;
font-style: normal;
}

which works, however the color of the font changes to the hyper link color which I what to avoid. In the .meltilte version the font color remains the same and on hover the underline appears. This is what I'd ideally like to achieve.

 

I would also like to remove some of the space between the title and the paragraph of text but cannot figure that one out. 

 

My reason for wanting to define the h1 is for SEO reasons. I don't have h1 on the site and I believe they help with SEO...

 

Any assistance would be appreciated. 

 

Thanks 

Keith

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Hi,

 

If you want to override the default styling effecting a header 1 tag when its used as a link, you will need to use the following:

 

h1 a { }

 

Add your custom styling there, such as color, text decoration and so forth.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Keith

 

I'm not sure i understand the question 100%, you're looking to change that text to be h1? If that's what you mean put the text in <h1> tags.

 

<h1>Design + Letterpress</h1>

 

The spacing is coming from the P tag assigned to span.

 

.span5 p {

    margin: 0; }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi James

 

Thanks, but no. What I am after is to change the font that is currently assigned to the h1 tags. The meltitle that I have defined is exactly what I want, but when I put the h1 tag in as I have it defined in the css and given that it has a URL attached it changes the color to the link color. I want the color to remain as #925c21. 

 

The spacing the P tag, will be changed for all .span5 on the site. Is it possible to only have it affect one particular page row span section?

 

Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Perfect Danny.

 

That worked. On the second question is it possible of the p tag in the span is it possible to have this apply to only one span? Is there a way to define a particular row/span that can then be styled with CSS.

 

Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can add a custom class to the <div> that has span5 in for example:

 

<div class="span5 my-custom-class">

 

You can then add styling to this custom class.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny. Appreciate your help and tuition. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0