I am trying to customise my wordpress theme and have given a column a class of
betting-tips-column.
I'm trying to change the p & h4 tags from white to black within this column using:
.betting-tips-column h4, p, body p{
color:black!important;
border-radius:8px;
}
However, it's affecting the whole page, not just the text within the column.
Any help?
Try this:
.betting-tips-column h4,
.betting-tips-column p {
color: black !important;
border-radius: 8px;
}
You have to basically nest all child elements inside their parents and further separate them by commas.
If you don't do the same then the css will be applied to all the p tags throughout your document.
Change it to the following:
.betting-tips-column h4, .betting-tips-column p {
color: black!important;
border-radius: 8px;
}
To style <p> and <h4> tags in a container with class .betting-tips-column you can use the following CSS code:
.betting-tips-column h4,
.betting-tips-column p {
color:black!important;
border-radius:8px;
}
Why your CSS doesn't work?
You only prefix the <h4> tag with your column class .betting-tips-column.
You defined the following rules:
p matches all <p> tags on the whole site.
body p matches all <p> tags in all <body> tags (should be only one <body> tag).
.betting-tips-column h4 matches all <h4> tags in container with class .betting-tips-column
Hint: The rule p and body p makes no sense because they affect both nearly the same <p> tags.
Related
I'm using #acts h3, p to select only the H3's and P's inside of the div (id=acts). But it's also selecting P and h3 tags outside of the 'acts' div?
Yet it works just fine when I select them one at a time, like this
#acts h3
{
color: red;
}
#acts p {
color: red;
}
but not when I try to select them at once, what's the issue?
In CSS, every comma works as beginning with a complete new selector, and not in the way you expect it to work.
This means that your selector #acts h3, p selects both #acts h3 & p, the latter targeting all p elements.
Instead your selector should look like this:
#acts h3, #acts p {
color: red;
}
This may seem like a really simple question that can be answered by Google, but I have been struggling to figure this out for a while. Say you have an HTML code like this:
<p> text 1 </p>
<div class = "divone">
<p> text 2 </p>
<h1> text 3 </h1>
</div>
and if I have CSS setup like this:
.divone h1, p{
color: yellow;
}
It seems to change the p element outside of the div element. What can I do to select the elements inside a div so that it only changes the p inside the div "divone"?
, separates rules, so you must repeat .divone:
.divone h1,
.divone p {
color: yellow;
}
You can use some CSS preprocessor like LESS or SASS to nest rules:
.divone {
h1,
p {
color: yellow;
}
}
but it will compile to same CSS rules.
Your current rule .divone h1, p says apply for h1 that is inside .divone or any p element on page
p element's parent is not specified, so you should do one of this things:
.divone h1
.divone p {
color: yellow
}
or you can use ">" symbol, which effects direct children of element
.divone > h1
.divone > p {
color: yellow
}
.divone h1, .divone p{
color: yellow;
}
to select immediate children of a specified element. and avoid deeper nesting, use immediate selector ">"
.divone > h1, .divone > p {
color: yellow;
}
otherwise for selecting all children of parent element use
.divone h1, .divone p {
color: yellow;
}
I'm having problems with my CSS markup, I want multiple h tags to have the same property in one class, I thought it was correct to write:
.text-right h1, h2, h3 {
text-align:right;
}
I.E, I want h1, h2, h3 to be nested in .text-right, so when the parent container has the class text-right, any h tag in it will be right aligned.
Your code should be:
.text-right h1, .text-right h2, .text-right h3 {
text-align:right;
}
I have the following HTML code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
p.second > h2 {
color: red;
}
*/
p > h2 {
color: red;
}
</style>
</head>
<body>
<p >
<h2>hello,world</h2>
<h2>hello,world</h2>
</p>
</body>
</html>
I expect to see hello,world in red, but it is not. What am I doing wrong?
The issue is that:
<p>
<h2>hello,world</h2>
<h2>hello,world</h2>
</p>
Is not valid HTML code (or, at least incredibly sloppy HTML code). A <p> tag can only contain inline elements, where-as the <h2> tag is a block element. Basically, once the browser sees the <h2> tag it will automatically close the <p> tag making the two tags siblings. You'll need to use another containing element, such as a <div>:
<div>
<h2>hello,world</h2>
<h2>hello,world</h2>
</div>
Then your style would be:
div > h2 {
color: red;
}
As mentionted before yo can not put headings inside paragraphs.
This is not just an agreement on web standards or etiquette but an actual impediment, you can't
Many browser won't let you do it, they'll tear apart paragraphs and headings.
Therefore any p h2or p > h2 selector wont work, you try using p + h2{ color: red;} (it works for an h2 tag preceded by a p tag) or something like that
It's because
<p >
<h2>hello,world</h2>
is equivalent to
<p >
</p><h2>hello,world</h2>
because
A p element's end tag may be omitted if the p element is immediately
followed by an address, article, aside, blockquote, dir, div, dl,
fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr,
menu, nav, ol, p, pre, section, table, or ul, element, or if there is
no more content in the parent element and the parent element is not an
a element.
So the h2 element can never be a child of the p element, unless the page is served with XML Content-type.
You can't have h2 into p as it's not valid HTML code.
Just replace p with a div and it should work.
Not that I advocate this but you can skirt the invalid HTML issue by using the CSS general sibling selector:
p ~ h2 {
color: red;
}
jsFiddle example
Is it correct HTML to change the color of text inside a H1, H2, H3 or H4 element? Are they block level?
For example
<h1><span style="color:#ABAB">#500</span> Hello world</h1>
They are block elements.
If you look at the HTML 4.01 strict DTD:
<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
So, they are all defined as %heading entities, which in turn are part of the %block entities.
As for the question regarding if you can change the color - that's just styling and is fine, though I would do so in a CSS file, not inline:
H1, H2, H3, H4, H5, H6
{
color: #ccccc;
}
Yes This is the correct way, If you want to use inline css. Otherwise make a class say
<h1 class="title"><span>#500</span> Hello world</h1>
Now Its Css is:
h1.title span{
color:#ABABAB;
}
Again yes h1 to h6 is a block level.
The easiest way to find out whether an element is block level or inline element is to put a border around it.
HTML
<h1> Heading 1 </h1>
<span> Span </span>
CSS
h1 {
border: 2px solid green;
}
span {
border: 2px solid blue;
}
More examples on jsFiddle.
yes headers are block level.
on another note, #ABAB is not a valid color :)
Yes, a span within a h1 tag is allowed. As you can see on the W3C Reference page for the h1 tag:
Permitted contents: phrasing content
And phrasing content is normal text as well as your span element (and several other elements as can be seen on this reference page for phrasing content.
Oh yeah, and the heading tags are block elements.
The best pracktace is first create CSS style in stylesheet.
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
Color alters font color, not background color, so technically it's equally correct. However, doing it that way means that for every header you want with this style you must specify a span tag inside like you've done.
Better solution if you want to always have it in effect for h1 tags might be to include a stylesheet with the following code:
h1 {
color: #ABABAB
}