CSS class not applying style - html

In regard to the first CSS rule, it works when i use the 'p' tag by itself. When I apply the 'article' class with or without the 'p' tag, it doesn't work. Why is that? Also the 'hr' tag with the class of 'one' works (which means CSS file is working). This seems so basic. I don't understand why it isn't working. Any ideas?
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>gdddsasddsg</h1>
<h6><span class="font-italic font-weight-normal">By: </span>gdorman619 <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>

Are you printing content from a WYSIWYG-editor or something else that is not a pure string? In that case, that content will likely enforce its own markup as inline HTML and external css is not going to work as inline CSS inside HTML has a higher specificity then CSS placed in an external stylesheet, unless you apply !important to the color, which makes me cringe on my behalf.

Your code looks mostly good. To add a class attribute, you must specify the name of the class with quotes, like this:
<p class="article"> Your code here</p>
Hope this helps

Try with this css.
.article {
color:red;
}
.one {
border:none;
height: 2px;
background: #cec4c4;
}
it may help you

Related

How to call an HTML object with the 'name' tag?

Now this might be a dumb question and if so I sincerely apologise for wasting your time.
I was wondering how one was to call an HTML object with the 'name' tag.
Here an example to explain what I mean:
HTML: <p id="one"></p>
CSS: #one{}
HTML: <p class="two"></p>
CSS: .two{}
HTML: <p name="three"></p>
CSS: ?
I need this because I'm working with commercial JavaScript UI components and they have a naming system based on name.
Thank you for taking the time to answer.
Try
[name='three'] {
color: red
}
<p name="three">x</p>
p[name="three"] { color:red }
you can select css by attribute tag
Use CSS attribute selector. p[name] css will affect all your <p></p> element with name attribute.
p[name] {
background: green
}
p[name="three"] {
background: red
}
<p name="two">text</p>
<p name="three">text</p>

Change color of A element inside a div using inline css

I have a HTML like the following :
<p style="color:red">go here</p>
Where A element is produced by Server Side code I haven't access .
In the browser go is red but here isn't due to some CSS code in the page's head element.
I'm wondering is there a way to make the link color inherit without adding style tags or JS codes in inappropriate place of HTML doc that would be stinky . Note that I have no access to whole document but just this section.
You can put style-tags in your body.
<style>
.red, .red a {
color: red !important;
}
<style>
<p class="red">go here</p>
You can use inherit for color property, which means that color property value will be inherited from it's parent
In your case you can do:
<p style="color:inherit">go here</p>
give a name to that div like this
<style>
.vhd p, a{color:red}
</style>
<div class="vhd">
<p>go here</p>
</div>
hope it will work for you
As far as I know, What you are trying to do is not possible INLINE,
You can add style tags in your page if you are able to.
<p class="red">go link</p>
<style>
.red a{
color: red
}
.red{
color: red;
}
</style>
<style>
red.a {
backgrond-color: red;
}
</style>
<div>
<p class="red">here</p>
</div>
or u can use <p class="red"><a href="#" style="color:red;>"here</a></p>

CSS class selector won't work

I'm new in coding and I'm having some noob issues...
Whenever I style my elements inside my HTML file (style="...") everything works fine, but when I do it the correct way, i.e. I give them a class and style them in the CSS file, it won't work at all.
This is my HTML:
<div class="4u 12u(mobile)">
<section class="highlight">
<a href="football.html">
<span class="image fit"><img src="images/pic02.jpg" alt=""></span>
<header>
<h2>Football</h2>
<p><img class="miniflag" src="images/flag_en.png"> <img class="miniflag" src="images/flag_de.png"> <img class="miniflag" src="images/flag_nl.png"> <img class="miniflag" src="images/flag_es.png"></p>
</header>
</a>
</section>
</div>
And this is my CSS, where I try to give them a 6px margin all around:
.miniflag {
margin: 6px 6px 6px 6px;
}
Can you help me find the problem? Thank you very much!
Edit: Yes, both my HTML and CSS file are linked within the head section (it is a running website), so the problem must be elsewhere...
As an answer to your own solution: Most likely you had another piece of CSS that was overwriting your .miniflag CSS.
Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.
You are correct, a specific class attribute will overwrite a generic class attribute. But I think you're confused about which is which:
.miniflag : generic class attribute, the lowest level
.highlight p .miniflag : a more specific class attribute, with 3 levels
The more specific one will be applied.
Furthermore, the position of your css rules matters as well:
.miniflag {
color: red;
}
.miniflag {
color: blue;
}
This will set the color to blue, since the last rule is applied and overwrites the previous rule.
Your CSS code and HTML is looks fine to me, may be you should check head section into your HTML file, and if you have not included your CSS file into your HTML file, then following code will help you to do that.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Tip: make sure you specify the location of style.css properly as follows
href="location/style.css"
you can do this:
<head>
<link rel="stylesheet" type="text/css" href="foldername/style.css">
</head>
Solved! In my CSS, before the .miniclass I also specified the parent class, so now it looks like this
.highlight p .miniflag {
padding: 2px;
background-color: white;
width: 35px;
}
And it works perfectly. Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.

how to select a class which is children of many elements

<div class="rightsidebox">
<div class="item-info-list">
<p>Model: AIDCU</p>
<div class="product-details">
<p></p>
<div class="price-box"> <span class="regular-price" id="product-price-1617-related">
<span class="price">$8.99</span></span>
</div>
<p></p>
</div>
</div>
I want to make a style for price and make the color green just in a case it is in the rightbox div and I want to use css , I cannot change the structure because it is a theme and it should not have conflict with other prices in other themes
I can use div.rightsidebox>div.item-info-list
but I cannot go further because of the paragraph in there
how can I solve it? I have weakness in using ">" and multiple classes in each other
This I believe is what you are looking for:
div.rightsidebox>div.item-info-list>div.product-details {
background:#ff0000;
}
JSFiddle: http://jsfiddle.net/RF5e7/
If you merely just want to select the price and make it green if it is contained by rightbox:
.rightsidebox .price {
color: green !important;
}
.rightsidebox .price { color: green !important; } // important to override other styles
EDIT: Usage of > - selectorr
The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected. More info
div.rightsidebox>div.item-info-list .price{
color: green;
}
JSFiddle example.
.rightsidebox .item-info-list p {
/* code */
}
This would go down to the paragraph element inside the classes defined there inside the stylesheet (above off course).
You don't need to be using div.rightsidebox that is required only if you're having class names for multiple elements. Otherwise only .rightsidebox is OK.
You can learn more about the CSS child selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

How can I prevent hardcoding of some attributes in HTML?

I have following statement:
<font color="#2B547E">
Now I don't want to hard code it in my html; instead I want to apply a css class. I don't want this color for all fonts in my page, only for a specific part. I tried the following:
<font class="xyz" >
But it's not working. I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.
How can I move that hard coded value to css?
If you can add a CSS class for this <font> element, you should be able to switch over to using a <span>:
HTML:
<span class="coloredText">text</span>
CSS:
.coloredText {
display: inline; /* will stop spans creating a new line */
color: #2B547E;
}
If you still find the span creates a line break, you can change the rule to
display: inline !important; - this will increase the precendence of this rule so it will take effect. I'm not sure if the use of !important is frowned upon by CSS-pedants, but it might help.
Should be:
HTML:
<font class="xyz">...</font> <!-- or any other tag -->
CSS:
font.xyz {color:#2B547E;} /* or just .xyz */
See also: Class and ID Selectors
First off, use a reset css to reset all your styles to a default of your choice.
I use this one, but there are others around : http://meyerweb.com/eric/tools/css/reset/
Then, write your css and use targeting to apply the styles to different elements
This link explains CSS specificity : http://www.htmldog.com/guides/cssadvanced/specificity/
<link rel='stylesheet' href='reset.css'>
<style>
#top p {
color: blue;
}
#bottom p {
color: red;
}
.black {
background: #000;
}
</style>
<div id='top'>
<p>This text will be blue</p>
<span class='black'>I have a black background</span>
<div>
<div id='bottom'>
<p>This text will be red</p>
<span class='black'>I have a black background too!</span>
<div>
You can use a combination like this:
<div class="xyz">Your content goes here...</div>
and the CSS can be:
.xyz {display: inline; color: #2B547E;}
This will solve the problem of new line and also give the desired color.
HTML
<p>Lorem ipsum dolor sit amet, <span class="xyz">consectetur adipiscing elit.</span> Mauris ultrices arcu eu velit euismod pulvinar.</p>
CSS
.xyz {
color: #66CD00; }
View a live example
I'm sort of lost as to what you can and can't do here ;) but I'll put this in incase
font[color="#2B547E"] {color: red;}
<p>I have following statement: <font color="#2B547E">I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.</font></p>
Unfortunately IE7 has problems with this but it does target if you use font[color] {color: red;} - This will of course not enable you to specifically target by existing colors if that's what you're after - but it will target them all to bring them in line if that's all you require, a mixture of the two might provide a decent enough fallback?
Your problem might be a case of CSS specificity, i cant tell from the details provided. if your style for spans is defined through an ID such as
#somediv span{ display:block}
That css will overwrite something like
span.myspan{display:inline}
because the ID style is more specific, you can solve this a few ways, first you can set the style inline in the html.
<span style"display:inline; color:#2b547e;">some text</span>
or you can make a class and use a more specific style by including the parent ID in the css
#somediv span.myclass{display:inline}
Be more specific with your selector, instead of just div, use div.class, or div.id
<div class="Foo">
Bar
</div>
div.Foo {
color:#2B547E;
margin:0; /* overriding the predefined styles in other sheet */
padding:0; /* overriding the predefined styles in other sheet */
}
replace margin / padding with whatever is causing the new line.
Also I'd always recommend not using style tags; such as Font. Your Html should use declarative only tags. Not to mention the Font tag is deprecated.