Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I'm not sure how to affect only one <p when trying to customize the color or font. For example if I write
p {
Color: red;
}
It'll affect every <p in the code. What if I only want to affect one set of <p and not the rest. How do I specify to the code that I only want that one certain pair to be affected.
You can define an ID or class in your HTML code.
#test {
color: red;
}
.example {
color: green;
}
<p id="test">Hello World</p>
<p class="example">Hello World</p>
You can use selectors: https://www.w3schools.com/cssref/css_selectors.asp
Small example: https://codesandbox.io/s/vibrant-keldysh-o5wek?file=/index.html
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
there is a problem that I have had since I started using CSS everything selector [*] with multiple [:not()].
Examples below does not work as I tried:
.post-body *:not(.has-color):not(.has-bg){
color: red
}
.post-body *:not(.has-color)*:not(.has-bg){
color: red
}
.post-body *:not(.has-color .has-bg){
color: red
}
.post-body *:not(.has-color , .has-bg){
color: red
}
Imagine something like WordPress post content; I can not change the content whole structure but I do need to set a primary color for texts which do not have a specific background or text color. So I am trying to set Red Color to any element except elements that contain ".has-color" or ".has-bg" that is it there is no relation between them.
Has somebody solved this issue or even seemed to something like this?
Your first example should work, as shown in this CodePen, but as Louys notes, it’s hard to tell without any markup.
.post-body *:not(.has-color):not(.has-bg) {
color: red;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I have the following text displayed on a website
<h2 font-weight="33">H2 Heading which I want thinner</h2>
The above doesn't work.
<h2><font-weight="33">H2 Heading which I want thinner</font></h2>
I know I can use the CSS like so:
h2 {
font-weight: bold;
color: #fff;
font-size: 24px;
}
but I have several complex and different internal and external existing css already in place, hence the requirement to override it in-line.
What is the best way to make the H2 tag thinner. I also ask the question because I read that font-weight is depreciated in html5.
Best practices and a solution in line with modern requirements would be appreciated.
try this it:
<h2 style="font-weight: 33">H2 Heading which I want thinner</h2>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a page in which many elements of the same class are to the left, some in the center and some to the right, I also have many elements that sometimes are display:inline and sometimes display:block.
I ran a CSS validator that told me to put it into the stylesheet, but I don't feel like creating class1 left, class1 center, class1 right, class1 inline,...
Can I have something in my stylesheet so that I can do this
<div class="class1 left inline"></div>
Instead of this
<div class="class1" align="left" display="inline"></div>
Keep in mind that I have almost zero experience in CSS
Create your html structure like this u want to use.
<div class="class1 left inline"></div>
And in Css file create classes for the same like following:
left{
float:left;
}
right{
float:right;
}
inline{
display:inline;
}
class1{
/*all your style elements*/
}
Read these for more information:
https://css-tricks.com/all-about-floats/
https://css-tricks.com/centering-css-complete-guide/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm thinking about css refacto in my job, and i'm wondering if it's a good idea (considering best practices) to create css class with only one property.
A simple example, is it usefull to create many classes this way
.center-text {
text-align: center;
}
What's the best between doing this or using small libs like Knacss (if you know it) for example.
BIGGEST PROBLEM WITH CSS CLASSES: THEIR LOCATION INSIDE YOUR FILE / CODE MATTERS!!
lets assume we have this html element:
<div class="test altr">some text</div>
this css file:
.test
{
color: red;
}
.altr
{
color: blue;
}
will result in a blue text (the div has those 2 classes). BUT this file will result with a red color:
.altr
{
color: blue;
}
.test
{
color: red;
}
the order of command in css is determine by the css file (and not the order inside the html class attribute)
not to mention that the physical order between and tags inside your html alo affects the order of commands in css (last command override all previous commands)
so.. whatever you do - please be careful with that
One minor drawback I see is the amount of text in your HTML will increase slightly due to pile up of classes. Not best SEO practices, but it's minor.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Two different paragraph can be given two different type of colours using the below css code.
.paraStyle1{
color: rgb(100,100,100);
}
.paraStyle2{
color: rgb(200,200,200);
}
Now, In the html code i can Specify
<p class="paraStyle1">Hello</p>
<p class="paraStyle2">Hello There</p>
The above CSS code can be modified to as Shown below, So which one should be used, considering best coding Technique(Design).
p.paraStyle1{
color: rgb(100,100,100);
}
p.paraStyle2{
color: rgb(200,200,200);
}
Classes can be duplicated which means a p tag and a div tag can have same class.
But if you want to style only the p tag then you should follow the second style. If you are not using your class anywhere else except for the p tag you can use the first style.
.paraStyle1{
color: rgb(100,100,100);
}
.paraStyle2{
color: rgb(200,200,200);
}
will not be limited to p tags....it can be allocated to any tag having the class paraStyle1 or paraStyle2, it can be a,p or even a div... see demo here
p.paraStyle1{
color: rgb(100,100,100);
}
p.paraStyle2{
color: rgb(200,200,200);
}
is specifically for the p tags having classes paraStyle1 or paraStyle2....no other html tag can avail the style of these classes except p tags.... see demo here !!
The second syntax (p.paraStyle1) applies the contained css only to p tags with the paraStyle1 class. You should use this syntax if you are planning on reusing that class name with different styling for different tags.
When you specify your CSS selector to be p.<class>, it means that you only want the p tags with that class to be styled. However, if you need this same style to be applied to other tags as well (eg a <div> tag), then use the first method.