What is the most effective method to eliminate font tags from a website?

I have been working on an XSLT file and have been writing CSS for elements within it. I am looking to remove font tags from the code in order to adhere to proper conventions. Is there a way to replace these font tags while keeping the CSS classes for my specific elements intact?

        <div class="TitleStyle">
          <font class="WhiteHeader">
            <xsl:value-of disable-output-escaping="yes" select="title" />
          </font>
          <font class="ProviderStyle">
            @ <xsl:value-of disable-output-escaping="yes" select="job_board_provider"/>
          </font>
        </div>
htmlcssfontstags

Answer №1

<strong> (aka bold duct tape for HTML) should do the trick:

<div class="HeaderStyle">
  <strong class="BlueHeading">
    <xsl:value-of disable-output-escaping="yes" select="header_title" />
  </strong>
  <strong class="CompanyStyle">
    @ <xsl:value-of disable-output-escaping="yes" select="company_name"/>
  </strong>
</div>

Answer №2

There are numerous methods to eliminate the font tag, such as using the span tag instead of the font tag and applying your CSS to it.

<span class="WhiteHeader">
        <xsl:value-of disable-output-escaping="yes" select="title" />
      </span>

CSS:

span{
 font-family:abc;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the fastest way to emulate CSS3 box radius for IE in terms of rendering speed?

There are numerous options available in JavaScript, .htc, and jQuery to create rounded corners for IE 6,7,8. (Not compatible with IE 8) http://code.google.com/p/jquerycurvycorners/ http://code.google.com/p/curvycorners/ Which solution offers the faste ...

javascriptjquerycssxhtmlcross-browser

What about a sliding element feature?

Is there a popular slider component that many startups are using, or are these types of sliders typically built from scratch? It seems like they are everywhere on startup websites. I would appreciate it if someone could point me in the right direction with ...

javascripthtmlcssslider

Using HTML5 with Thymeleaf: default placeholder value displayed in an input field of type number is 0

As I work on my Spring Boot application, I'm developing a simple HTML form with Thymeleaf integration. One specific line in the form reads as follows: <input type="number" step="0.1" min="0" max="10" **th:field="*{rating}"** ...

htmlspring-bootspring-mvcbootstrap-4thymeleaf

Bring div button on top of the contenteditable field

I am working on an Angular app for a client and need to implement a clickable button at the bottom right of a contenteditable element, similar to the image shown below : https://i.sstatic.net/J6XdW.png The challenge is that the content needs to be scroll ...

javascripthtmlcssangularjscontenteditable

Tips for displaying HTML content using an array in Vue JS

Hi, I'm a beginner with Vue JS and I'm working on passing an HTML table using this array. I have a dropdown where I can select the option I want, but I'm struggling to figure out how to include HTML within it. Whenever I try, it ends up disp ...

javascripthtmlarraysvue.jsdropdown

Is it possible to dynamically adjust the container size based on its content with the help of *ngIf and additional directives?

I have a single-image container that I need to resize when editing the content. The size should adjust based on the incoming content. See the images of the containers below: Image 1: This is the container before clicking on the edit button. https://i.sst ...

htmlcssangular

Elements shifting positions based on the size of the window

I am facing an issue with positioning the register form on my website. I want it to be fixed at the bottom-right corner of the window, without reaching the top. Although I managed to achieve this, the problem arises when the screen resolution changes. For ...

htmlcss

Pass data to three.js using an input form

I'm trying to figure out how to pass the value of an input form to a three.js workspace. Here's my code where I want to use a slider to change the radius of a sphere, without relying on the built-in controls of three.js since I'm new to HTML ...

javascripthtmlthree.js

Dynamic background featuring a tall vertical image

I have an image that is extremely long, measuring 2263 x 8192 pixels. I want to design a website with a background that spans the width of the window and the full height of the image, all while maintaining responsiveness. The concept is to have this elong ...

jqueryhtmlcssimage

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...

javascriptjqueryhtml

Utilizing PHP to transfer line breaks into a textarea

I am currently working on compiling a list of email addresses, with each address on a separate line. To achieve this, I retrieve the array from my database, split it at the comma delimiter, and iterate through it using a foreach loop. $emailsList = ""; fo ...

phphtml

Using an image instead of a checkbox when it is selected (Angular 4/Ionic 3)

Is there a way to swap out the checkbox for an image? I want this image to change dynamically based on whether the checkbox is checked or not. Unfortunately, adding a class doesn't seem to do the trick as it modifies all icons in the same column. The ...

javascriptcssangularionic-frameworkionic2

how to load CSS and JS files on certain views in Laravel 5.2

Currently, I am facing a situation where I need to ensure that the CSS and JS files are loaded only on specific views in Laravel 5.2. Due to my boss's decision to eliminate RequireJS for loading JS files on our blade templates, we are now exploring a ...

javascriptphpcsslaravel-5

Internet Explorer: JQuery deselects radio button upon its selection

One issue I have encountered is with a listener for a group of radio buttons in IE. When a radio button is selected, it triggers a database call to populate a select element. However, in IE, after the code runs successfully, the selected radio button becom ...

javascriptjqueryhtml

Stop the body from scrolling when the side panel is opened

Whenever I click on my button with the class "cd-btn," it triggers the toggling of my panel with the class "cd-panel.is-visible." jQuery(document).ready(function($){ //open the lateral panel $('.cd-btn').on('click', function(event){ ...

jqueryhtmlcsspanel

Verify the text file for any data, and if it contains any, display it on the web browser using JavaScript

I have a program in C that works with a temperature sensor. It creates a file to store the temperature and indicates whether it falls within specific values. I want to display this data on a web browser and update it every 5 minutes. I'm looking for ...

javascriptjqueryhtml

Is there a way to modify the FixedTableHeader jQuery plugin to include a fixed first column in addition to the fixed header?

I've been experimenting with a jQuery plugin I found at to create a stylish table with fixed headers, sorting options, and other interesting features. While the plugin is great, I also considered using jqGrid for its impressive capabilities. However, ...

javascriptjqueryhtmlcssjquery-plugins

Updating the background image with Jquery is resulting in a distracting flicker effect

Here is a snippet of the script I'm using to create a slider that changes the background image for each image object in a specified time cycle. #Sliderimg - height set to 500px, $("#Sliderimg").css({ "background-image": "url(../Images/" + SliderIma ...

javascriptjquerycss

Styling a list using multiple columns with CSS

My goal is to design a columned list using only HTML and CSS. I have experimented with floats and inline-block, but it seems like inline-block is the best option for me due to these specific requirements: The layout must be in columns; The number of colu ...

htmlcss

What is the reason this text is not utilizing the css property ellipsis?

There is a problem I am facing where the user's name becomes too long, but only in mobile view. I need to apply the text-ellipsis CSS property for this issue. Here's a screenshot: https://i.sstatic.net/T6vi3.png Prior to adding the styles mentio ...

htmlcssfrontend