The CSS styles are not being applied correctly in the HTML document

I have this snippet in my .css file:

.attachment-label {
    font-size: 10px;
    font-style: italic;
    color: rgba(0,0,0,.5);
}

When I try to use it in my HTML like this:

<div class="card-body">
                    <span class="attachment-label">Attachment</span>
                    <hr style=" margin-top: 0; margin-bottom: .5rem; border: 0; border-top: 1px solid rgba(0,0,0,.1);"/>
                    <div class="text-center">
                        <img class="card-img-top imageThumbnail" src="@TicketHeader.AttachmentPath" />
                    </div>
                </div>

The span doesn't get styled. But if I include the styles inline like this:

<div class="card-body">
                    <span style=" font-size: 10px; font-style: italic; color: rgba(0,0,0,.5);">Attachment</span>
                    <hr style=" margin-top: 0; margin-bottom: .5rem; border: 0; border-top: 1px solid rgba(0,0,0,.1);"/>
                    <div class="text-center">
                        <img class="card-img-top imageThumbnail" src="@TicketHeader.AttachmentPath" />
                    </div>
                </div>

It works. What could be the issue here?

htmlcss

Answer №1

It appears that you forgot to include the link to your .css file

<link rel="stylesheet" href="css/your.css">

Answer №2

Adjust your CSS in the following way

.label-attachment {
font-size: 12px;
font-weight: normal;
color: rgba(0, 0, 0, 0.6);}

To enhance readability, remember to include a space after each comma and always use a leading zero when necessary

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

Using plain JavaScript (without any additional libraries like jQuery), you can eliminate a class from an element

I'm attempting to locate an element by its class name, and then remove the class from it. My goal is to achieve this using pure JavaScript, without relying on jQuery. Here is my current approach: <script> var changeController = function() { ...

javascripthtmlcss

Angular - The connections between deeply nested object models are established

I have an Angular application that is used to display company and contact person information in a text box format. Here is the code for displaying the Company Email address: <label> Company Email address</label> <input type="text& ...

javascripthtmlcssangularangular2-ngmodel

Experience a unique double scrolling effect using the react-spring parallax and react-three-fiber Canvas components

My goal is to create a scrolling box with a parallax effect, but I'm facing an issue where it won't bind with the Canvas element, even when both are included under the same div. In the screenshot provided, you can see div1 and div2 each having t ...

htmlcssnext.jsreact-springreact-three-fiber

Encountering issues with the functionality of my Bootstrap navbar

After diving into the world of bootstrap, I encountered some challenges with the navigation bar in mobile view. Despite adding a navbar and a toggle button, it doesn't seem to be functioning correctly. Following tutorials and examples meticulously, bu ...

htmlcssbootstrap-4

Learn how to display months on a countdown timer and then customize the format with basic JavaScript for a website

Looking to create a countdown page for the upcoming ICC cricket world cup event that displays the remaining days in two different formats: Format #1: 01 months 10 days 10 hours Format 2: 01 hours 20 minutes 10 seconds (If less than 2 days remain) I curr ...

javascripthtmlcountdown

Ways to display and modify chosen and not chosen categories on the product editing page

I have three tables Categories: cat_id ... other ... primary key (cat_id) Product: Product_id ... other ... primary key (Product_id) Product_cat: Product_id foreign key (post.Product_id) cat_id foreign key (Categories.cat ...

phphtmlmysql

Tips for Preventing Page Scrolling When Clicking on a Hashed A Tag in Content with a Fixed

Currently stuck dealing with a challenging problem related to hashed anchor links. Here's a basic representation of the HTML code: <div class="main-wrap"> <header></header> <aside> <nav> <ul> ...

htmlcsscss-positionanchorfragment-identifier

The div is not displaying the background image as intended

.cover-image { margin-bottom: 0px; height: 350px; color: white; text-shadow: black 0.3em 0.3em 0.3em; } <div class="cover-image" style="background: url('~/images/hdpic.jpg') no-repeat; background-size:cover"> </div> I&apo ...

htmlcss

Adjust the dimensions of a box by simultaneously altering both its height and width

I am looking to create a responsive box that automatically adjusts its height when the window width is resized. I have tried using Transform:Translate() to move the picture inside, but so far, the height only changes when I manually adjust the height of ...

htmlcss

Troubleshooting problem with image overlay alignment in Bootstrap 4 Card

I am currently utilizing Bootstrap 4 and am attempting to create a card-based layout for showcasing my stores. Within this design, I have a location marker that should appear over the store image with a 5-star rating positioned on the same line, floating t ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Linking to a Different Tab without Tab Mutation with Bootstrap 3.3.5

I am facing a similar issue to the mentioned questions. I am trying to use a link to change tabs, but the problem is that the link only changes the tab content and not the active tab. The most similar question can be found at: Bootstrap linking to a tab w ...

javascriptjqueryhtmltwitter-bootstraptabs

unable to retrieve element values using class names

I have created multiple h1 elements with the same class names listed below. <h1 class="h1">One</h1> <h1 class="h1">Two</h1> <h1 class="h1">Three</h1> <h1 class="h1">Four</h1> I have also added a button that ...

javascripthtml

Differences in Print Layout Between Chrome and Firefox when Viewing a PHP Website

I have been working on creating a print command to print a specific div, and I have managed to successfully run the print command using default methods like CTRL + P and also with a button click. The Issue: However, I have encountered a problem where the ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Accessing stored web pages / Browser as an interactive interface

I have a couple of questions I need help with. The first one is about how to open a saved HTML file in a browser without an internet connection. Next, I'm looking for advice on using the browser as a user interface for a desktop image viewing program ...

javascripthtmljsonbrowser

What could be preventing my bootstrap class from being applied as expected?

As a newcomer to HTML, CSS, and bootstrap, I am struggling with updating my stylesheet values in the preview. This is the button tag that I am working with: <button class="btn btn-primary btn-xl">Find out More</button> However, when ...

htmlcssbutton

Designs for an HTML5 Cheeseburger navigation interface

I've been struggling to implement a functional and visually appealing hamburger menu on my website. The challenge lies in integrating the menu seamlessly into the page rather than having it just pop up abruptly. Despite trying various webkit tools, I ...

javascripthtmlcsswebkit

The link that has been clicked on should remain in an active state

Is there a way to make the link that is clicked on active? I have attempted various scripts but have had no luck in getting the desired effect. Can anyone identify what might be causing the issue? $("a").click(function () { if ($(this).hasClass("acti ...

javascripthtmljquerycss

How can I determine the remaining amount of scroll left in my HTML document?

Is there a method to determine how many pixels of scroll remain on the page when the scrollbar is set at a specific position? I am currently utilizing jQuery's scrollLeft feature, which can be found here: http://api.jquery.com/scrollLeft/. I want to ...

javascriptjqueryhtmlcss

Tips for deleting directory path from a file name

Similar Question: How to extract file name from full path using PHP? echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? "&nbsp;" : htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImag ...

phphtml

I am looking to display the pop-up exclusively when the page is clicked, but unfortunately it is also appearing when the Menu is clicked

I've been working on this code and trying to make some modifications, but I just can't seem to find the right solution for my issue <!-- Updated main content --> <main> <p> Click on the menu button located in the top right ...

javascripthtmljquery