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

Applying CSS to prevent elements from overlapping by adjusting their vertical positioning

I need some help with a CSS formatting question. My current setup works well, the menu's position adjusts based on screen size to be centered both vertically and horizontally. However, I'm facing an issue where elements start overlapping if the v ...

htmlcss

The jQuery scripts are having trouble cooperating

Currently, I am in the process of developing a website. The main focus at the moment is on creating a responsive menu and incorporating jQuery scripts. However, I seem to be facing some challenges in getting everything to work seamlessly together. Each scr ...

javascripthtml

Easy Steps to Align a Rotated Table Header

I am looking to rotate the header table using CSS while keeping all text together. Here is my CSS code: th.rotate { height: 100px; white-space: nowrap; } th.rotate>div { transform: rotate(-90deg); } Here is how I have applied this CSS: ...

htmlcss

Tips for altering the background of a video on Vonage

Hello everyone, Currently, I am incorporating the Vonage API for video calling into my project. I would like to tweak the video background - does anyone have any ideas on how to accomplish this? I eagerly await your responses! Thank you in advance! ...

javascriptcssvonage

Is it possible to adjust the height of sibling divs within a sequence to match the tallest div?

Do you have a set of inline div containers with hardcoded widths but varying content heights? Is there a way to ensure that all divs maintain the same height without risking content overflowing from its parent container? I've experimented with inher ...

csshtmlheightsiblings

`place the table inside a hidden div`

I am trying to create a non-editable table that can be overlayed with a div under specific conditions. However, it seems like my current implementation is not working as expected. What could be causing this issue? CSS <style type="text/css"> # ...

htmlcss

Show the result of file upload, whether it was successful or not, using ReactJS

I need to implement an Ajax call for uploading a file to the server. I want to display success and failure messages based on the outcome of the file upload process. $.ajax({ url: "https:my_url", data: {my data: my_data}, method : "POST", success: ...

javascriptajaxtwitter-bootstrapreactjs

Use CSS specifically for codeigniter viewpage

I am unsure if it is possible, but I would like to load CSS and JavaScript within a view page instead of on include.php. Currently, the CSS file is loading on include.php and it is working correctly. What I want to achieve now is to load it directly inside ...

javascriptphphtmlcsscodeigniter

Spacing that separates elements vertically within a listing

I'm facing an issue with a list of elements arranged in a row that wraps onto a second line due to space constraints within the container. Is there a way for me to introduce additional spacing between the first and second line of these elements, bear ...

htmlcssspacing

Utilizing border-image property to showcase four dots in each corner of my div container

I'm having trouble applying a gradient color to my border using the border-image property. When I use border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);, I'm only seeing a single dot in each corner of my DIV. Does anyone know why t ...

htmlcssborderborder-image

Refreshing ng-model within a radio input

Currently, I am utilizing a jQuery library for radio/checkbox components. Although I am aware that combining jQuery with Angular is not ideal, the decision to use this particular library was out of my control and cannot be altered. One issue I have encount ...

javascriptjqueryhtmlangularjs

Tips for creating a gap between the <label> element and a form field

I have read through the answers provided, but nothing seems to work for me. My goal is to place a label and 2 small form fields on the same line, with about 90px of space between the label and the fields. I am aiming for a layout similar to the image shown ...

htmlcssformslabel

The margin property in jQuery does not seem to be functioning properly when trying to send

Within the view page, there is jQuery code that sets a margin on a div. Below is the code: <script type='text/javascript'> $('#someID').css('margin-left', '10px'); </script> This code functions proper ...

jqueryruby-on-railscssactionmailer

The canvas's document.getElementById function is unable to find any matching element,

Hello everyone, I am currently diving into the world of javascript and trying to expand my knowledge. However, I have encountered a problem that has me stumped, and I could really use some assistance. While exploring, I came across this page: http://www.w ...

javascripthtmlcanvashtml5-canvas

Dimensions of images on Read the Docs (small image widths)

Using MkDocs along with the Read the Docs theme, I am facing an issue with small images not scaling properly on mobile devices. It seems like this problem is related to the CSS of Read the Docs theme, but I'm unsure how to override the default behavi ...

cssread-the-docsmkdocs

Retrieve information from Node.js using Express

I am working on a server with Node.js and using Express to create a web application. I have successfully implemented a function called rss_interrogDB that retrieves an array from a database. Now, I am trying to use this array to display a list on the HTML ...

javascripthtmlajaxnode.jsexpress

Tips for creating a form with recurring elements efficiently

Currently struggling to summarize the issue at hand with a simple title, so here's the detailed explanation: Imagine I'm inputting information for multiple contacts, and there are various fields involved: Name of the contact Method of Contact ...

jquerypythonhtmlflaskwtforms

Showing the computation outcome on the identical page

I have implemented a table within my PHP code. In the second column of this table, it typically displays "---". However, once I click the submit button, the same page should now display the calculated result. Here is an example: <table> <tr>& ...

phpjavascriptcssajaxcalculator

Unable to submit form with Jquery

Having some trouble with my form submission using Jquery. The submit part of my code seems to be malfunctioning, and I can't pinpoint the issue. <?php if(!isset($_SESSION["useridentity"])){ die(header("Location:index.php")); } ...

javascriptphpjqueryhtml

The dropdown feature within a bootstrap button group is malfunctioning

As part of the web track in cs50, I am working on creating a webpage. My goal is to include options for navigating to the next or previous pages, as well as a dropdown menu with all the pages in between. However, when using Bootstrap's code, the dropd ...

htmlcssbootstrap-4cs50