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

2 Views

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:

Read More
<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.

Post Views: 2

Related posts

1 comment

  1. 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 the design

    So, instead of a style attribute, you clearly need a style tag or an external css file. However, external css files are superior compared to style tags. Your html code will be smaller this way, also, very important is that the css file will be cached by some browsers, reducing the size of data needed to be downloaded on further extractions, therefore your users will experience bigger speed, while your server will be more scalable. Not to mention the fact that external css files are more reusable than style tags, so you will duplicate only your link tag (1 line of code) instead of thousands of lines if needed.

Comments are closed.