This question already has answers here:
Why would I use an ID selector instead of a class?
(6 answers)
Closed 1 year ago.
For example I want this:
<link rel="stylesheet" href="stylus.css">
only for this code:
Buy!
If you use it for only one, then use id with #, for multiple elements you use class with .
#only-this {
color: red;
}
<a id="only-this" href="yeet">Buy!</a>
Sell!
You need to make an identification on your html and then select it on the CSS page , like :
HTML :
<a id="buyButton">Buy!</a>
Then on CSS:
#buyButton
{
color : blue;
}
You can just have a class in your CSS and then you apply it to your object:
.my-stylus-class {
color: blue;
}
<a class="my-stylus-class" href="yeet">Buy!</a>
I wanted to add that a class or ID is not neccesseraly required, you can of course also just define the element itself in CSS, so for example this would be also possible:
a {
color: blue;
}
Buy!
you can't tell the browser to use a specific stylesheet (file) only for a certain element.
you have to give the element a specific ID, or class, and use that in your css for example:
.yeet {
/* CSS Properties go here */
}
Buy!
Inline css.
Buy!
This is what the question was: one element. A class can be more than one element. Here, using inline CSS which is not any worse than stylesheet CSS, you can make your yeets differently styled.
Buy!
<br>
Buy!
<br>
Buy!
<br>
Buy!
<br>
Buy!
<br>
Buy!
<br>
Buy!
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
This question already has answers here:
Using two CSS classes on one element
(9 answers)
Closed 4 months ago.
Can I apply 2 classes to a single div or span or any HTML element? For example:
<a class="c1" class="c2">aa</a>
I tried and in my case c2 does not get applied. How can I apply both classes at once?
1) Use multiple classes inside the class attribute, separated by whitespace (ref):
<a class="c1 c2">aa</a>
2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):
.c1.c2 {
}
Include both class strings in a single class attribute value, with a space in between.
<a class="c1 c2" > aa </a>
As others have pointed out, you simply delimit them with a space.
However, knowing how the selectors work is also useful.
Consider this piece of HTML...
<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>
Using .a { ... } as a selector will select the first and third. However, if you want to select one which has both a and b, you can use the selector .a.b { ... }. Note that this won't work in IE6, it will simply select .b (the last one).
<a class="c1 c2">aa</a>
This is very clear that to add two classes in single div, first you have to generate the classes and then combine them. This process is used to make changes and reduce the no. of classes. Those who make the website from scratch mostly used this type of methods. they make two classes first class is for color and second class is for setting width, height, font-style, etc.
When we combine both the classes then the first class and second class both are in
effect.
.color
{background-color:#21B286;}
.box
{
width:"100%";
height:"100px";
font-size: 16px;
text-align:center;
line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}
<div class="box color">orderlist</div>
Separate 'em with a space.
<div class="c1 c2"></div>
.color
{background-color:#21B286;}
.box
{
width:"100%";
height:"100px";
font-size: 16px;
text-align:center;
line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}
<div class="box color">orderlist</div>
In practice, two classes are used for an element when the two classes format different non-overlapping areas, e.g., one class specifies the color and the other the alignment of text. Then you use these two classes for an element and don't need to write a third class that is the amalgam of the other two, see my source code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<style>
.color-red {color: red; }
.center-align-text {text-align: center;}
</style>
</head>
<body style="width:500px; background-color:lightgray">
<p style="width:400px;background-color:white"
class="color-red center-align-text">Centered pepperoni</p>
</body>
</html>
I have this code that styles the <a href="#">:
<div class="styled">
link
<div class="notStyled">
another link
</div>
</div>
The first link have one style and the second link have the same style, I want it to be default like a clean link.
Here, try this JSFiddle example,
.styled > a {
color:black;
}
The > used in this means it only selects direct children of .styled and not ALL children.
What you are probably doing is .styled a, which selects all children (even nested within others), and you don't want to do that...
Without seeing your code I can only guess what you have done.
From your question I get you want to style the first, but not the second a tag.
You could use this to style only the first a tag:
.styled > a {
/* your styling */
}
The > selects the direct children of .styled so this will not style your .notStyled a.
Try this :
.styled > a {
color:red; /*custom style for the first link*/
}
live exemple : http://jsfiddle.net/72bQM/1/
I don't know if this is what you did, but it looks like the second <div> is there just as a try to let the second link have no-style.
I suggest, instead, to give have this code
<div>
<a href="#" class="styled">
<a href="#">
</div>
And then in CSS just
.styled{
/* Give the style you want */
}
This way you just have to add the class="styled" to the link you want to be styled, without using many DIVs.
<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
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.