Unable to adjust font for headings using CSS and Bootstrap

Looking to expand my skills in HTML and CSS, I've encountered a bit of a hiccup.

Utilizing Bootstrap for my webpage, here's the simplified version of what I have so far:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="div">
      <h3>Title</h3>
      <p>Description</p>
    </div>
  </body>
</html>

main.css:

h, p {
    font-family: "Times New Roman", serif;
}

The text inside <p> displays correctly in Times New Roman, but the text within <h3> stubbornly refuses to change.

Could someone shed some light on why this is happening, and provide guidance on how to resolve it? Apologies if this seems like an obvious inquiry.

htmlcsstwitter-bootstrap

Answer №1

To apply the font style to both h3 and p tags, you should use the following CSS:

h3, p {
    font-family: "Times New Roman", serif;
}

If you want to include all heading tags from h1 to h6, you need to specify them all in the rule like this:

h1, h2, h3, h4, h5, h6, p {
    font-family: "Times New Roman", serif;
}

There are a total of six heading tags from h1 to h6.

Snippet

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
h3, p {font-family: 'Times New Roman', serif;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="div">
  <h3>Title</h3>
  <p>Description</p>
</div>

Answer №2

In addition to what Praveen mentioned:

Every CSS element selector needs to correspond to an element on the HTML page. In this particular HTML element, all three types of selectors are utilized:

<h3 class="header-3" id="page-title">Test</h3>

These include:

  • h3, which represents the element itself
  • header-3, indicating the class
  • page-title, denoting the ID

To apply styles to these elements using CSS, you would target them like so:

h3 { font-weight: bold; }
.header-3 { font-weight: bold; }
#page-title { font-weight: bold; }

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

Having trouble with the tooltip feature in Bootstrap?

I've searched high and low, including on this site! I've experimented with all sorts of code, but nothing seems to make the tooltips function in BootStrap. It's beginning to really frustrate me!! Does anyone happen to have the working js co ...

javascripttwitter-bootstraptooltiptwitter-bootstrap-3

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

I'm attempting to determine the number of columns in a specific table, but some are disabled - I'd like to know if it's possible to get the count without including the disabled ones (only counting the visible columns). As you can see in the ...

javahtmlcssseleniumxpath

Guide on setting up a shortcut key for an input field

Currently, I have a collection of images each with its own HTML page. I added an input button that when clicked, takes you to the next image. However, I would like to enhance user experience by allowing them to use keyboard arrows for navigation. Being new ...

htmljquerybuttonkeyboard-shortcutshotkeys

Picture is currently not showing up in the division

I am currently working on an HTML page and I'm having trouble displaying an image within a division element. Below is the code snippet I tried: Here is the JavaScript part of my code: var filename = "andrew.png"; $("#detected").show().html('< ...

javascriptjqueryhtml

Adjust font size using jQuery

Hey there! I have a small question. I want to resize all HTML elements using jQuery, but the current code allows me to increase and decrease the size infinitely. var originalSize = $('html').css('font-size'); // Reset ...

jqueryhtmlcssfont-size

Attempting to showcase JSON response within an HTML page using JavaScript

Can anyone help me troubleshoot my code for displaying JSON data on a web page? Here's what I have so far: <button type="submit" onclick="javascript:send()">call</button> <div id="div"></div> <script type="text/javascript ...

javascripthtml

Refresh the content with an embedded iframe

I am attempting to update the body content by removing all existing content and inserting an iframe: function create_custom_iframe(target){ var iframe = document.createElement('iframe'); iframe.setAttribute('id', 'target_u ...

javascripthtmldomnode.jsiframe

How can you show several copies of an image on an HTML page?

I am trying to show an image multiple times in a row using a combination of HTML, PHP, and CSS. Here is my code snippet: for ($i=20; $i<=320; $i=$i+300) { echo "<style> " . ".test{" . "position: absolute; left: " . $i . ...

phphtmlcss

What is the best way to align these Iframes in the center?

This is the html <div class="main_content"> <section class="episodio"> <article class="contenedor_episodios"> <h2>Episodios</h2> <div class="episodio_spotify" ...

htmlcss

What is the best method for populating a text area in Pharo with HTML content?

When logging in through Pharo using an HTML form, you can utilize the method of Znclient called formAt:add: followed by a post. I'm interested to know how I can fill a textArea in an HTML form and then make a post request. Is there a specific method f ...

htmlsmalltalkpharopharo-5

Ways to implement material-ui button design on an HTML-native button

I am using pure-react-carousel which provides me an unstyled HTML button (ButtonBack). I would like to customize its style using material-ui. Trying to nest buttons within buttons is considered not allowed. An approach that works is manually assigning th ...

javascriptcssreactjstypescriptmaterial-ui

When inserting <img>, unwanted gaps appear between div elements

When I have <img> in the child divs, there is some space between them and a blue stripe appears under the image. How do I make them stack perfectly without any gaps? I am new to HTML and CSS and trying to learn for marketing purposes. Any help or ad ...

htmlcss

Python script for connecting to mWebSocket Server using WebSocket client

I am in the process of developing a WebSocket client using python that establishes a connection to an Arduino Uno via an Ethernet cable every second. The Arduino Uno is equipped with a WebSocket server using the mWebSocket library. The operational code for ...

pythonhtmlsocketswebsocketarduino

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

So, besides using Ajax, is there another solution to achieve the same result? Can a font-awesome icon be turned into a button without Ajax? In case you're unfamiliar with what I mean by a font-awesome icon, here's an example: <i id="like1" on ...

javascriptphpjqueryhtmlajax

The click event is activated following the :active selector being triggered

My Angular application features a button with a slight animation - it moves down by a few pixels when clicked on: &:active { margin: 15px 0 0 0; } The button also has a (click)="myFunction()" event listener attached to it. A common issue arises w ...

javascriptcssangularbuttonclick

Using jquery and Ajax to extract data from nested JSON structures

Need help with modifying a code snippet for parsing nested JSON format [ { "name":"Barot Bellingham", "shortname":"Barot_Bellingham", "reknown":"Royal Academy of Painting and Sculpture", "bio":"Barot has just finished his final year at T ...

javascriptjqueryhtmljsonajax

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

I have a method that retrieves margin top value from the backend. It works perfectly on the first page of print, but on the second page, the margin top space is missing. initializePrintingSettings() { this.printService.fetchPrintSettings().subscribe(respon ...

javascripthtmlcssangulartypescript

Is it possible for me to route a URL to a particular content generated by Ajax on a separate webpage?

I appreciate anyone taking the time to help with this, especially since I already had to get 12 stitches. Here's what I'm dealing with: mysite.com/documentation - page with a menu and content section (content will load dynamically via Ajax w ...

javascripthtmlajax

Issue with the overall layout in Bootstrap 4 involving the main content area and sidebar

I am encountering challenges with the overall design of my website, particularly with how the main content area and sidebar are positioned. The layout I have in mind is: Below is the code snippet I am using to implement this design (spread across multiple ...

htmlcssbootstrap-4

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog

I am facing an issue where I have brought a span to display a loading image inside the v-Dialog of a vuejs screen. The problem is that the v-dialog has a z-index of 220 set as inline style, causing my new span (loading image) to appear below the v-dialog. ...

jquerycssvue.jsz-index