is there a way to get the style from one element and apply it to another using only CSS?
h1 {
font-family: Courier New;
}
h2 {
font-family: h1.font-family;
}
You can maybe use css variables for this. Not exactly what you wanted but that works
:root {
--h1-font-family: Courier New;
}
h1 {
font-family: var(--h1-font-family);
}
h2 {
font-family: var(--h1-font-family);
}
Related
I want to create an override chain with variables.
So as long as the variable for a specific headline isn't set it takes the one from above.
Example code would look like this:
:root{
--h1-font: "Rubik";
--h2-font: unset; /* <-- Inherit from h1 */
--h3-font: unset; /* <-- Inherit from h2 */
}
h1, h2, h3 {
font-family: var(--h1-font);
}
h2, h3 {
font-family: var(--h2-font);
}
h3 {
font-family: var(--h3-font);
}
Would the unset value invalidate the previously set one?
In CSS, I want something like:
:root{
underline-all-h1-tags:true
}
/* it's not all h1 tags, it's actually h1-tags-with-a-bunch-of-other-things".
But for KISS reasons, we'll assume it's just all of them.*/
/* ... lots and lots of other stuff...*/
h1{
if(underline-all-h1-tags == true){
text-decoration: underline
} else {
text-decoration:none
}
}
Is there a way to do this? I know I could just do
:root{h1-underline:underline}
h1{text-decoration:var(h1-underline)}
But I am trying to make my code readable to me-in-10-years-when-I-have-totally-forgotten-how-to-CSS.
why not make use of the cascading part of cascading style sheet?
h1{
text-decoration:none;
}
.underline h1{
text-decoration:underline;
}
Applying the class "underline" to any parent element would do the same thing that it looks like you're trying to describe above.
You could add or remove the underline class with js, or set it statically on elements you want affected.
As an alternative to Kai's answer:
h1 { text-decoration: none; }
.underline { text-decoration: underline; }
.underline is a utility class that can be used to add an underline to any element you want, including an h1. This becomes extremely scalable.
Of course I personally wouldn't name it .underline; I would probably name it something like
.u-td_u (which stands for "utility, text-decoration, underline"). The naming is your choice.
And just for kicks you could also have the other utilities available:
.u-td_n { text-decoration: none; }
.u-td_i { text-decoration: inherit; }
.u-td_o { text-decoration: overline; }
.u-td_l { text-decoration: line-through; }
/* etc ... */
I have the following html5 code. I expected the style for the text Business Ads to be italic and color in yellow. But it comes in red.
Can only certain styles be applied to the aside element?
CSS:
aside h4 {
font-style: italic !important;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
HTML:
<div>
<article>
<aside>
<h4>Business Ads</h4>
</aside>
</article>
</div>
This is a result of the way CSS specificity works. The page here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
provides a good explanation. In this case, since both style declarations refer to an h1 within a larger element, they have equal specificity, and the latest declared style takes precedence. You can override this with !important, but it's usually considered bad style because it breaks the "cascading" nature of CSS. Instead, use a more specific selector:
article aside h1 {
//style goes here
}
You override the rules the way you have set your CSS. Both rules target same element, so the second one will override the first one and apply to the element.
For example if you set the oppossite order to your rules like this :
article h4 {
font-style: normal;
color: red;
}
aside h4 {
font-style: italic !important;
color: yellow;
}
the second one will aply and h4 will be yellow an italic
So if you have an h4 also inside article you can use this:
article aside h4 {
font-style: italic !important;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
DEMO
You must be more specific with the selector so that the rule it is assigned to overrides the "default" one. You can the remove the !important which isn't the best way to override existing rules when you can use other techniques.
DEMO
article aside h4 {
font-style: italic;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
You're targeting the same h4 element but you gave it with different styles
and the last one was read. Just delete
article h4 {
font-style: normal;
color: red;
}
and remove the !important in the first selector.
And if you're targeting different h4 tags inside an article or aside tag, what you can do is put classes or span on them.
In my style sheet, I have overridden the style of H1 and H2 with the following code:
And in my HTML, I have applied that style to a DIV that contains an H1 tag.
However, this style is also applying to H1 and H2 tags AFTER the div in question.
Replicated here: http://jsfiddle.net/89gkQ/1/
Why is the style applying outside of the div where it's applied, and how do I stop it?
In CSS, the comma doesn't work like it does in English:
.featuredtitle h1, h2 {
color: red;
}
That code is equivalent to this code:
.featuredtitle h1 {
color: red;
}
h2 {
color: red;
}
Which isn't what you want. The comma just allows you to write multiple selectors, so you want to be a bit more verbose:
.featuredtitle h1, .featuredtitle h2 {
color: red;
}
Demo: http://jsfiddle.net/89gkQ/2/
The problem is here:
.featuredtitle h1,h2 {
font-size: 1.5em;
font-weight:bold;
color:#a00;
}
You should write the following instead:
.featuredtitle h1, .featuredtitle h2 {
font-size: 1.5em;
font-weight:bold;
color:#a00;
}
The comma starts a new selector, which in this case made the style apply to all H2 tags, regardless of where they are.
.pitch h1
{
FONT-FAMILY: "HelveticaNeue-Bold", "HelveticaNeue", Helvetica, Arial, Sans-serif; MARGIN-BOTTOM: 40px; LETTER-SPACING: -0.03em; FONT-SIZE: 60px; FONT-WEIGHT: bold; WORD-SPACING: -0.04em; color:#FFFFFF;
LETTER-SPACING: -0.05em;
}
the html:
<h1 class="pitch">
Best way to increase client's<br>
confidence and boost your sales</h1>
what is wrong here?
why is this class not applied? Insteed of applying class .pitch , it applies the frmat of the body text to the text inside h1
.pitch h1 means "find an element of type h1 that is a child of an element with class 'pitch'".
What you want is h1.pitch.
The h1 isn't in some other element with the class pitch, which is what your CSS is trying to apply the rule to. Instead, the h1 has that class.
If you want to select the h1 with the class, use h1.pitch.
Just do the attributes for h1 that belongs to .pitch class like -
.pitch h1{ ... }
<div class="pitch">
<h1> </h1>
</div>
Instead of .pitch h1 { ... }, i think it should just be .pitch.