Establishing a font style for all text with the exception of a specific CSS class

Below is the CSS code I am currently using

html:not(.stylenotneeded), body:not(.stylenotneeded), form, fieldset, table, tr, td, img {
   font: 100%/150% calibri;
}

Here is the corresponding HTML:

<div class="stylenotneeded">
  <font face="Impact" size="9" color="8C003D"><b>Some Text</b></font><br>
  <font face="verdana" size="4" color="8C003D"><b>Sometext 2</b></font>
</div>

<div>
  <font face="Impact" size="9" color="8C003D"><b>Some Text</b></font><br>
  <font face="verdana" size="4" color="8C003D"><b>Sometext 2</b></font>
</div>

I want the font-style specified in the CSS to be applied to all text excluding the content within the stylenotneeded div.

I have already attempted a solution found on this website, but it was not successful. Can someone please provide guidance on how to achieve this?

htmlcss

Answer №1

div:not(.stylenotneeded) font, 
form,
fieldset,
table,
tr,
td,
img {
   font: 100%/150% calibri;
}
<div class="stylenotneeded">
  <font face="Impact" size="9" color="8C003D"><b>Some Text</b><br>
  <font face="verdana" size="4" color="8C003D"><b>Sometext 2</b></font>
</div>

<div>
  <font face="Impact" size="9" color="8C003D">Strong emphasis on this text.</font><br>
  <font face="verdana" size="4" color="8C003D"><b>Another example of styled text</b></font>
</div>

Answer №2

Your code contains a lot of outdated elements. It's advisable to establish a default set of font properties for your entire document and then selectively override them using class names:

body{
    font-size: 14px;
    font-family: Verdana, sans-serif;
    font-weight: 400;
}

.stylenotneeded{
    font-size: 15px;
    font-family: serif;
    font-weight: 700;
}
.stylenotneeded b{
    color: #8C003D;
    font-size: 9px;
}

This approach allows you to keep your HTML cleaner and separate it from the style definitions:

<div class="stylenotneeded">
  <b>Some Text</b><br>
  <b>Sometext 2</b>
</div>

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

Dynamic layout problem with navigation pills

I currently have 2 navigation pill buttons designed to alter the layout upon being clicked. Both layouts always include the sidebar which remains constant throughout. Clicking on Nav pill 1 will display the layout as follows: sidebar | column 1 | column ...

htmlcsstwitter-bootstrapbootstrap-5

Remove any HTML tags or formatting from the body of an email using PHP in Laravel

Currently, while using an IMAP package in Laravel to extract email bodies, I am still encountering HTML artifacts despite attempting some stripping. The functions being utilized are as follows: $styles_removed = preg_replace('/(<(script|st ...

phphtmllaravel

Adaptive design exhibits varying appearances across various screen sizes

Currently, I am working on a responsive design WordPress site and here is the markup: <div class="contact-wrap"> <div class="contact-number">123-456-7890</div><!--.contact-number--> <div class="user-login"><a href="#"& ...

htmlcssresponsive-design

"Header not displaying in Internet Explorer due to HTML/CSS compatibility issues

Recently, I launched a new website with a navigation element that overlaps the header image. Unfortunately, in Internet Explorer (all versions less than 10), both the header and navigation disappear completely. Everything coded using traditional row-by-row ...

phphtmlcssinternet-explorer

Ways to conceal an HTML element using CSS

I am working with two images, but I only want to display one at a time. When I hover over the image, I want it to change. .sidenav { height: 100%; /* 100% Full-height */ width: 100px; position: fixed; /* Stay in place */ z-index: 2; top: 0 ...

htmlcss

Creating a corner ribbon for a Material UI Card: A step-by-step guide

Can anyone provide pointers on incorporating a corner ribbon to a Material-UI card? Currently, I am utilizing makeStyles for styling from Material UI. ...

javascriptcssreactjsmaterial-ui

Unusual CSS columns glitch discovered

While experimenting with columns, I noticed a peculiar issue when I added a hover-over image. The hover effect works fine on the left side of the column but is disabled on the right side. I thoroughly reviewed my code and layout but could not detect any ...

htmlcsshtml-listscss-multicolumn-layout

What is the best way to retrieve the innerHTML content from several Quill instances that share the same class identifier?

I have successfully implemented multiple Quill text editor instances on a single page. However, I am now facing a challenge in retrieving the innerHTML of each instance. When creating a single instance and assigning its innerHTML to a hidden input field, I ...

javascripthtmlquill

Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

Is there a way to ensure that all images maintain the same height and width using CSS percentages, rather than set pixel values? I'm working on displaying images in circles, where most are uniform in size but a few outliers distort the shape. The wide ...

javascripthtmlcssimagegoogle-maps-api-3

Top strategies for creating a fully responsive HTML design

Currently, I am exploring the concept of responsiveness in my small projects for educational purposes. I have been researching websites such as: w3schools-mediaquery While I have come across some interesting insights, I am curious about how to effectivel ...

htmlresponsive-designresponsive

Prevent the footer from overlapping with the text when printing several pages

Is there a way to prevent text from overlapping the footer when printing a page containing both? I have tried using CSS and HTML to adjust the positioning of the footer, but it still overlaps with long blocks of text. Any suggestions on how to fix this i ...

htmlcssbootstrap-5

What is the best way to turn an entire table into a clickable link that leads to a different HTML page?

I have created a table that I want to turn into a button linking to another page. The table's values need to be changeable based on data from a database, such as changing the parameter to pH and the value to 7. However, the button should redirect to t ...

javascripthtmlcss

Adjust the CSS for the "a" tag's "title" attribute

I am using jquery.fancybox to create an image modal on my website. I have noticed that I can add a description using the title attribute. However, when the description is too long, the text is displayed on a single line and some of it disappears. How can ...

javascriptjqueryhtmlcssangularjs

Are there any CSS hacks available to address the combination of position: sticky and overflow within the parent element?

I've encountered a sticky position issue when the overflow property is set to auto on a parent element. I've tried various solutions like adding an extra wrapper or using clip instead of auto, but none have worked. While I did find a solution usi ...

javascripthtmlcssreactjs

Utilize jQuery to automatically assign numbers to <h1-h6> headings

Looking to develop a JavaScript function that can automatically number headings (h1- h6) for multiple projects without relying on CSS. Currently achieving this with CSS: body { counter-reset: h1; } h1 { counter-reset: h2; } h2 { counter-reset: h3; } ... T ...

javascripthtmljquerycssfunction

Implementing a delegator with ExtJS 4.1: A step-by-step guide

As a newcomer to javascript, I've recently been tasked with maintaining an application built in Sencha ExtJS 4. One of the components I need to modify is a tooltip feature that displays information when hovering over certain elements. This tooltip app ...

javascriptcssextjsdelegation

Challenges encountered while entering text into the Discord message box using Selenium with Python

I've developed a program that automates the login process on Discord, navigates to a specified channel, and waits for a text channel to appear. Once the required text channel is visible, it clicks on the channel, inputs the command $claim, and hits en ...

pythonhtmlcssseleniumselenium-webdriver

Ways to unmark the "select all" checkbox when any one of its children is no longer selected

Is there a way to automatically uncheck the "Select All" checkbox when any of its child checkboxes are deselected? In the code snippet provided, the goal is for the "Select All" checkbox to be unchecked if not all child checkboxes are selected. The script ...

javascripthtmlcheckboxcheckboxlist

IN to CM Conversion Size Chart

I'm just starting out and I want to make a size chart table that can convert between metric units. For example, I have table data with values in "inches" and I want to be able to switch it to "centimeters" with the click of a button. Some of the data ...

javascripthtmljqueryhtml-table

Seeking clarification on the distinction between using an input of type button versus an input of type submit when triggering a jQuery form submission

This particular code is designed to execute the following actions upon being clicked: Submit the form Disable the button in order to prevent double clicks Add a spinner to the button to indicate to the user that something is happening If the form is inva ...

javascripthtmljquery