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.
Related
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
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>
I am styling a wordpress child-theme and the code below is what I am dealing with. each div is within the previous. It ends with a div then a h2. the last two our my additions to the code. I want to style the text in the h2 tag. when I use a id or class and go into the style sheet and type
#tag {
**Styles i want here**
}
or do it as a class, it wont register. How do I format it? I left the div and h2 without an id or class because idk how to format it like I said
<head>
<body>
<div clas="main-container">
<div id="page">
<div class="content">
<aside class="sidebar c-4-12">
<div id="sidebars">
<div class="sidebar_list">
<div>
<h2>TEXT HERE I WANT TO STYLE</h2>
ID of element should be unique. And because it's unique, you just have a CSS codes like below:
#your-id {
// Your css codes
}
It should work, but we should not use ID for styling element, class name instead.
In your case, your codes should be something like:
.content h2 {
// your css codes
}
Somehow, your h2 tag have a styling with higher priority. Then you can use !important in each of properties. But it's not a best practice for us.
.content h2 {
color: #fff !important; //Example code
}
By the way, I see wrong syntax in your code: clas="main-container", please correct class attribute
Thanks
Is that possible to include styles of one css class to another? I mean SASS #extends pretty much does a similar thing, but it also styles extended class, which is not required. See example:
<style>
.myclass1{
background:red;
}
.myclass2{
color:blue;
#extend .myclass1;
}
</style>
<div>
<p class="myclass2">Hello i am class 2, my text is blue and background is red</p>
</div>
<div>
<p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p>
</div>
Posted example is inspired by article of CSS-tricks Web, but here everything is very confusing it is not working as it should. myclass2 should give myclass1 according to article. However, it is giving strange output. Am I heading in the right direction? or is the article wrong?
Update:
Question is only about the actual concept behind #extend of SAAS, and including other CSS class to another, and what is the difference?
CSS without pre-processors (SASS, LESS etc.):
.myclass1{
background:red;
}
.myclass2{
color:blue;
}
<div>
<p class="myclass1 myclass2">Hello, I am of class 2 (my text is blue) and of class 1 (my background is red)</p>
</div>
<div>
<p class="myclass1">Hello, I am only of class 1 (my background is red)</p>
</div>
You can add multiple classes to the same element.
You can use a comma to match multiple selectors:
.myclass1, .myclass2 {
background: red;
}
.myclass2 {
color: blue;
}
<p class="myclass2">Hello i am class 2, my text is blue and background is red</p>
<p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p>
SASS is a CSS preprocessor which basically means the SASS syntax gets compiled into plain CSS. The features that SASS offers such as #extend as well as establishing variables with the $ syntax etc. are only possible using SASS (not possible with CSS3)
That being said, you would be able to accomplish the result of the #extend feature of SASS in regular CSS simply by chaining classes together:
.blue, .green {
<your css here>
}
<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