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


Tags: html,css,wordpress,fonts,customization

Problem :

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.



Solution :

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.


    CSS Howto..

    How to hide a column in a DataGrid?

    How to get background image from internal css using xpath?

    how to middle vertical-align using bootstrap input-group

    How to Remove the White Space below the Footer in Wordpress Site using CSS

    While scrolling, The current div goes up, and another div under it (under the first div background) shows

    How to allow content area to be expandable to right but not pop under sidebar?

    How to use a JQuery Show/Hide script, to show hidden text

    How to show an image on html page using only css?

    How to add text underneath the centered image

    How to make the contents of a div not wrap?

    How can I force menu items to fit to column width?

    How to layout html CSS in this way? [closed]

    How to set the target images that should go uner this code

    How to alter CSS properties using PHP based on a conditional

    How to place the block on the top of “second” screen using CSS?

    How to insert line breaks in HTML documents using CSS

    how to create circle image wrapper

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    How to avoid line breaks inside `->` operator in `` blocks?

    How to not display common border between two adjacent divs?

    How do I add a custom font to the part of ConvertTo-HTML?

    How do I add inline css to dropdown in Yii?

    How to combine html, js and css from fiddle

    How to reload a css background-image inside a directive

    How to Hide a Textbox with only CSS

    how to append a css class to an element by javascript?

    How do browsers handle unrecognized at-rules?

    How to increase spacing between lines in CSS?

    how can i position text to either side of an image in html5

    How can I size these spans so that the pictures don't extend past them?