yja127 February 2016

How to add custom tag to a header to make the font size larger in WordPress?

I'm a self-taught novice seeking guidance from experts here. I need help with defining CSS in WordPress to change the font size, color and weight of header on a website page.

So far, the code I have is:

<h2><strong><a style="color: #3f51b5">Text for the header I need to be 30 pixels large and in bold. The size here is still too small. </strong></h2>

How do I change it so the font is 30 pixels large and bolder?

Apologies if this was asked and answered before, but all my search results here did not specifically address my issue. I thank you in advance for your help. This is my first question to this group.

Answers


Lajos Arpad February 2016

I would do it as follows:

  1. I would add the following rule to the CSS file being used in the theme under your usage:

.fs30 { font-size: 30px; font-weight: bold; }

  1. This would be the code needed in HTML:

<h2><strong><a class="fs30" style="color: #3f51b5">Text for the header I need to be 30 pixels large and in bold. The size here is still too small. </strong></h2>

If the style is not applied, then you have one of the following problems:

  • your CSS file is not being used
  • your CSS file is being cached
  • a rule with higher priority overrides your rule for fs30

All these problem types are well-documented.

EDIT: You needed the following rule: font-size: 30px; font-weight: bold; You can add the rule in several possible ways:

  1. style="font-size: 30px; font-weight: bold;" inside the tag header

  2. .fs30 {font-size: 30px; font-weight: bold;} inside a <style> tag

  3. .fs30 {font-size: 30px; font-weight: bold;} inside an external CSS file

For approaches 2. and 3. you will need to add the class="fs30" attribute to the target tag(s). Approach 1. is clearly inferior to approach 2. and 3., due to the following facts:

  • the style attribute is not reusable, if you want to reuse it for another tag, you will have to copy it. If you have already copied it 200 times and you want to change the design, you will have to change it for all the 200 cases
  • style attributes are structurally irrelevant, their purpose is solely design-related and unneededly makes your code messy
  • if you want to study your design, then you will have to read HTML code as well, which you are not interested in when you study t

Post Status

Asked in February 2016
Viewed 3,340 times
Voted 10
Answered 1 times

Search




Leave an answer