Is it possible to create a single CSS style class that can be used for various section tiles on a website?

I am currently working on a website that includes different section titles such as About, Projects, Contact, and more.

To make these titles stand out against the background image, I have decided to fill them with white. The text color of the titles is dark blue.

However, simply setting a background-color causes the elements to stretch across the page. I need each title to have a custom width, along with 3px padding of white around them. Do I have to create a separate CSS style class for each title and specify a width for them?

All the titles are formatted as < h3 > elements.

Below is the CSS style I am currently using:

.sectionTitle {
    background-color: #ffffff;
    padding: 3px;
}
htmlcss

Answer №1

The reason your h3 tags are stretching across the page is because they are naturally block elements, taking up 100% width of their parent.

If you switch your h3 elements to display as inline-block, their width will adjust to fit the text content inside - which seems like the effect you want to achieve.

body {
  background: #e6e6e6;  
}

.sectionTitle {
  background-color: #ffffff;
  padding: 3px;
  display: inline-block;
}
<h3 class="sectionTitle">
  Some title
</h3>

This change might cause layout issues depending on the surrounding markup, so consider wrapping your h3 in a block element like a div to maintain its own row.

body {
  background: #e6e6e6;  
}

.sectionTitle {
  background-color: #ffffff;
  padding: 3px;
  display: inline-block;
}
<div>
    <h3 class="sectionTitle">
      Some title
    </h3>
</div>

Answer №2

To ensure that each title has unique padding, simply create distinct classes for both the color and padding styles.

    .sectionTitle{
      background-color: #ffffff;
    } 
    .padding2{
      padding: 2px;
    } 
    .padding3{
      padding: 3px;
    }

Apply the color class and specific padding class to each heading element.

    <h3 class="sectionTitle padding2">Hello</h3>
    <h3 class="sectionTitle padding3">Hello</h3>

If you prefer the same padding for all headings, assign them to the existing CSS class provided above.

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

AngularJS does not update values properly if there is a style applied to the parent container

I'm struggling to find the best approach to handle this situation. This is how my AngularJS code looks: <span class="something" ng-hide="onsomecondition"> {{value}} </span> .something{ text-align:left; padding:10px;} Issue: The value ...

javascriptcssangularjs

Ways to get rid of the white horizontal line generated by bootstrap framework?

I'm currently working on a responsive navbar design and I want it to appear transparent over a background image. However, my front-end knowledge is limited as I've only been learning for a week. Can anyone advise me on how to remove the white bar ...

htmlcsstwitter-bootstrapbootstrap-5

What is the proper way to eliminate the top margin from a div that has the display table-cell property?

There are two div elements with display: table-cell property: <div> This is a table cell </div> <div> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Som ...

htmlcss

Switching between fixed and unfixed divs causes two absolute divs to alternate

I am currently working on a code to keep a fixed div ("two") in place between two absolute positioned divs ("one" and "footer") while scrolling. However, there is an issue that arises when the browser window is resized. The distance between the footer and ...

javascriptjquerycss

Is it true that document.execCommand only works with buttons and not links?

Below is the code snippet I am working with: <div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div> <a class='bold' style="height:10px;width:10px;">B</a> $(function(){ ...

javascriptjquerycssrich-text-editor

The Masonry Grid is leaving empty spaces unfilled

I've been experimenting with Sveltekit and SCSS to create a Masonry grid. However, I'm facing an issue where the items in my grid are not filling in the empty space as expected. Instead, they seem to be following the size of the largest image, le ...

cssflexboxsveltekit

What is preventing me from using JavaScript to remove this class?

Struggling to implement a skeleton loading screen with CSS classes and JavaScript. The idea is to apply the 'skeleton' class to elements, style them accordingly, then remove the class using a timeout set in JavaScript. However, I'm encounter ...

javascripthtmlcss

Utilizing box-sizing for the creation of an internal border

Looking to create an HTML table with clickable cells, each containing a div that adds a border upon clicking. The challenge is ensuring the border stays within the boundaries of the td without altering the size of the table or its cells. Struggling to achi ...

htmlcss

Guide to generating dynamic arrays in JavaScript when a button is clicked

I am working on a JavaScript program where I dynamically generate buttons and div tags, as well as retrieve data from a local JSON file. My goal is to implement a new feature where clicking a button will create an array with the same name as the button, al ...

javascripthtmlbootstrap-4

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

javascripthtml

Personalizing the User Interface of Azure AD B2C using dynamic HTML

After customizing my own html and CSS for Azure AD B2C sign-up and sign-in policy using the steps outlined in this resource, I have successfully created custom Sign-Up and Sign-In pages. However, my next goal is to make the sign-up page dynamic by passing ...

htmlcssazureazure-ad-b2c

CSS navigation menu with drop-down functionality

I am currently learning CSS and HTML as I work on the CCTCcart project. When running the code in the bottom menu section, I noticed that when clicking on any menu item such as Products, the white background color merges with blue. I need to find a solution ...

htmlcss

Adding Jquery content to HTML templates using Jinja2: A Simple Guide

Looking at my HTML code Base.html <title> {% block title %}{% endblock %} </title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse na ...

pythonhtmljqueryflask

What is the best way to justify list items to the left?

Having trouble aligning my list content to the left. Any suggestions are welcome! Here is a snippet of the code: <div class="col-md-4 mb-1"> <i class="fas fa-hiking fa-4x"></i> <h4 class="my-4" font-weight-bold&g ...

htmlcsshtml-lists

Troubleshooting: Why is my JPG Image not displaying in React JS?

I've encountered an issue while trying to set a background image for a div. Some images display correctly, while others do not. I attempted various methods such as directly specifying the image path in the background-image property in CSS, importing ...

cssreactjs

What is the process for converting a hexadecimal color to rgba when using the Less compiler?

Here's the code snippet I'm working with: @shade : #d14836; .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, ri ...

cssless

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

cssruby-on-railsnavbarbootstrap-4

I have created a textbox with a button, but I am unsure of how to delete it

var emailFields = document.getElementById('emails'), addLinkButton = document.createElement('a'), fieldTemplate = emailFields.getElementsByTagName('div'), currentFieldCount = fieldTemplate.length, maxFields ...

javascripthtml

Navigational Scroll Parallax Issues

I have been trying to implement a basic 2 layer parallax effect using ScrollMagic on my index page. The layout consists of a large image with content below it, but I am facing some challenges. Despite going through the documentation and source code multipl ...

jqueryhtmlcssparallaxscrollmagic

tips on toggling div visibility based on data filtering

<script> function toggleContent(str) { if(str == 'recent' || str == 'old' && !($(".main_content").is(':visible'))) { $(".main_content").show(); } else if( str == 'newComment') { ...

htmlhideshow