Style not being applied to CSS class

Question

Style not being applied to CSS class

When using the 'p' tag by itself, the first CSS rule works fine. However, when I apply the 'article' class with or without the 'p' tag, it does not work. Any thoughts on why that might be? Interestingly, the 'hr' tag with the 'one' class is functioning properly (indicating that the CSS file is functional). It seems like a basic issue, but I can't figure out why it's not working.

HTML

<p class=article>{{ post.body|truncatewords:30|linebreaks }}</p>

-- Also tried this

<p class="article">{{ post.body|truncatewords:30|linebreaks }}</p>

external CSS file

p.article { 
    color:red; 
}

hr.one {
    border:none;
    height: 2px;
    background: #cec4c4;
}

HTML Output

<div>

        <h1 class=display-4><a href="/blog/2020/5/28/gdddsasddsg/">gdddsasddsg</a></h1>

        <h6><span class="font-italic font-weight-normal">By: </span>gdorman619&nbsp;&nbsp;<span
                class="font-italic font-weight-normal">Published Date: </span> May 28, 2020, 12:24 p.m.</h6>

        <p class="article"><p>sdadfsdsfdsfa</p></p>

        <hr class="one">

    </div>

https://i.sstatic.net/KMbvV.jpg

html css django

Answer 1

Answer №1

Are you copying text from a rich-text editor or another source that contains more than just plain text? If so, the formatting from that source may override any external stylesheets as inline HTML has higher specificity. Using !important to force styles feels like a last resort, but sometimes it's necessary.

Answer 2

Are you copying text from a rich-text editor or another source that contains more than just plain text? If so, the formatting from that source may override any external stylesheets as inline HTML has higher specificity. Using !important to force styles feels like a last resort, but sometimes it's necessary.

Answer 3

Answer №2

Looks like your code is in good shape overall. Remember, when adding a class attribute, make sure to include the class name within quotes, just like this:

<p class="article"> Your content here</p>

I hope this information proves helpful.

Answer 4

Looks like your code is in good shape overall. Remember, when adding a class attribute, make sure to include the class name within quotes, just like this:

<p class="article"> Your content here</p>

I hope this information proves helpful.

Answer 5

Answer №3

Consider using the following CSS styling:

.content { 
    color:blue; 
}

.section {
    border:solid;
    height: 5px;
    background: #f1f1f1;
}

This code snippet could be beneficial for your needs.

Answer 6

Consider using the following CSS styling:

.content { 
    color:blue; 
}

.section {
    border:solid;
    height: 5px;
    background: #f1f1f1;
}

This code snippet could be beneficial for your needs.

Style not being applied to CSS class

Answer №1

Answer №2

Answer №3

Similar questions

Web Audio API functions are encountering a playback issue on iOS 13.3, despite working smoothly on previous iOS versions

Once the database fetches and displays 500 results, the HTML/CSS formatting begins to

Discovering the screen width and increasing its value using CSS

The mouseover animation doesn't reset to its original position during quick movements, but instead continues to move without interruption

Evaluate the user's answers to a database using a SQLite 3 C++ Quiz

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

Extracting the input data from a JSON source

Is there a way to determine if the tab has been muted by the

Secure Files with Django Encrypted File Field

Getting the last six months report in Django can be done by querying the database for the relevant data, even if there are

Design images with rounded corners using CSS

Designing a collection of inline divs that automatically stretch to fit the parent container, while also wrapping to a new line if the minimum width is reached

Highlighting the active nav-item in Bootstrap-5 is proving to be a challenge

Having trouble with jQuery modal not adjusting its height properly

Transfer information to a different html page and store it

Use Angular mat-table to dynamically insert data by specifying the row index and column index

What could be causing the CSS issue following the recent webpack update?

Retrieve a div element using Ajax from the result of an If statement

Checking forms for standard regulations with jQuery

What is the most effective way to address duplicate title/meta tags on paginated pages? Can you share some recommended strategies for handling this