I'm pretty new to CSS/HTML and I need a little help with styling. So I have a CSS style sheet where I did something like this
p{
color:black;
}
Then in my HTML, inside of my footer tag, I have a paragraph.
The problem I am having is that I want the color of the paragraph inside of my footer to be blue.
I tried doing something like this:
footer{
color: blue !important;
}
but it didn't work so I was wondering how I can get just the paragraph in my footer to be blue because I want the rest of my paragraphs to be black.
If the !important method is the wrong approach I was wondering why? From my research, I thought it was supposed to override any previous styling.
Answer:
Why is !important not working on my stylesheet?
It is working perfectly as it is designed.
How I can get just the paragraph in my footer to be blue
For this, please use the appropriate selector.
footer p{
color: blue;
}
That is a bad practice
Try doing something like this
For your Footer
HTML
<div class="footer">
<p>This is a paragraph.</p>
</div>
CSS
.footer p {
color: blue ;
}
Don't use important tags.
Related
I'm doing some tests on a new theme and it has a dark mode, but some texts have a white background (my shit when making posts). Is there any code that makes the background of all texts transparent? Because it's a lot post.
code
background color
I would suggest using CSS to do this. Probably all your text is in some type of element with some class, like for example:
<div class="text-container">
If this is the case, then use CSS to target those elements, something like:
.text-container p{
background: none;
}
Maybe a good idea is to add a class to your main "container" element when dark mode is active (use JS toggle() for example) and then using CSS you can change all the styles of your text only when this class is in the HTML (so basically when dark mode is on).
Take a look at this page to know more about CSS selectors. Play around with your CSS code and I'm sure you will manage to solve this!
As the commenter said, a code example would be a great help. However, as a general solution, this should work fine:
<style>
p, h1, h2, h3, h4, h5, h6 {
background-color: transparent;
}
</style>
If it doesn't work fine, either:
There is an inline style overriding it
It is something other than the tags listed above
We'll need more context (ie, a code example) to assist further
Please, can you add some lines of your code in your question? Just to see if there's something inside your css code that's messing around your text.
Be careful making <span> tags inside p, h1, h2... and then adding an css style onto it. For instance:
h1 {
width:250px;
color:purple;
}
h1>span {
background-color:white;
}
body {
background-color:black;
}
<body>
<h1><span>White background text here</span></h1>
<h1>Normal "transparent" text here</h1>
</body>
Imagine that I've been creating a website for 2-3 weeks now and suddenly I decide that I don't like the default black color of all text elements which don't have any CSS applied to them and that I want to change their color to something like #333333 which is a less black black.
Is adding color: #333333; to the body tag the correct way to do it? Could that have any negative effects on other elements that I have custom styling?
CSS prioritises the code lower down, for example, this:
<style>
p {
color: blue;
}
p {
color: green;
}
</style>
<p>Hello</p>
Would result in the color of the paragraph element becoming green.
So to answer your question, anything above your CSS properties for body would be overridden.
Also, id and class attributes take priority over position, so if you wanted to give the elements that you don't want to get changed a class and keep it as black that would work also.
Hope it helped.
I don't think it'll have any negative affects on any elements, however i would just reference the tags specifically to be sure like
p, h1, h2, h3, h4, h5, h6 {
color: #333333
}
But like the comment, give it a try and see how it turns out.
This is enough, as it allows for the color to be 'passed down' through the cascade. Place this at the start of your stylesheet:
body {
color: #333;
}
Avoid using inline styles:
<body style="color: #333"> <!-- Don't to this -->
Inline styles have a different specificity than CSS selectors, and it's a whole chapter in itself. Plus, it's easier to separate concerns and have you layout separate from your stylesheets. And have everything grouped together within your styles.
The most simple way to do so is by CSS the following way:
* {
color: #333333;
}
Changing color in HTML with the style attribute is actually never the best practice.
I am trying to improve the styling of my Confluence page, but when I insert a {css} widget the styling does not take effect for many different elements and formatting styles.
For example:
{css}
body {
font-size: 24px;
}
p {
color: red;
}
div.atest {
color: blue;
}
{css}
In this case, all my font is 72px. But no simple paragraph blocks are red, nor are any div's (given the atest class) showing as blue.
Is there some special formatting in Confluence that must be done for CSS to be handled properly, or does it only support a small subset?
If you are sure that your CSS is correct but it is not considered, add !important to the styling to prevent it being overwritten by inner elements like so:
p {
color: red !important;
}
I think you must tag a {HTML} {HTML} first.
I'm still working with an older Version..
Else i have found this
https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS
Hope this helps
I know that this question has been asked here before, but none of the answers provided there seem to be working for me.
I have a stylesheet setting the color of all links to, let's just say, red. All the rest of the text on the page is plain 'ol black. I have a particular H1 element that is a link, but I do not want this H1 element to be red, like all other links. Instead, I just want it to be regular black, like all other text. No matter what I seem to try, though, it stays red as all other links.
This is the code I have in my stylesheet:
a:link {text-decoration: none; color: #B83131;}
a:visited {color: #B83131;}
I have tried specific styling for the specific H1 tag, but it doesn't help. I tried giving the H1 tag a class name and styling that class, but it didn't help. I feel like I am missing something here...
Did you set it to the anchor?
h1 a:link { color: black; }
If your markup resembles the below:
<h1>
Bleh
</h1>
Then you should be able to add the CSS rule as:
h1 a { color: #000; }
I'm currently stuck at a probably very trivial problem:
I have a simple HTML/CSS page with a text:
<head></head>
<body>
This is a Text about Foobar.
</body>
How is it possible to assign a CSS-class/id to the word Text without breaking the format? Let's say I want to add the class .yellow to it, which displays the text with a yellow background.
I think I got something blocking my mind cause it can't be that difficult... But all I can google (mostly trivial tutorials) uses CSS just on usual HTML-elements like <p> or <b> which would break my format.
I think you are missing out on <span> tag.
Try this out:
<head></head>
<body>
This is a <span class="yellow">Text</span> about Foobar.
</body>
And in CSS:
.yellow{
color:yellow;
}
Use an inline element. Span is purpose build for that. Alternately, if you wish to have semantic meaning behind your highlighted section, you can re-style <em> or <strong> with something like:
strong.highlight{
font-weight:normal;
font-style:normal;
background:yellow;
}
You just need to wrap the section in a span like:
<span>This is a <span class='yellow'>Text</span> about Foobar.</span>
See a working example here http://jsfiddle.net/dZZfB/
Hope that helps
The HTML for Example:
<center><span class="t1">Test1</span></center>
The CSS:
<style type="text/css">
.t1 {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
</style>