I've been Google-ing around for the past half hour trying to see if there is a solution to this problem, but I'm not having any luck with finding any answers.
Inquiry: Is it possible to select and apply css to a list of elements within a specific class?
Specific to my case: selecting all the header elements found within the class .feature-headline
.feature-headline h1, h2, h3, h4, h5, h6 {
text-transform: uppercase;
}
When I try it with the code above, it results in the css selecting each and every header element, not just the ones found within the class.
Curious to know if this is even possible.
Thanks
Unfortunately, in CSS, if you wish to apply style conditions to all HTML headers that are classed as "feature-headline", then the correct approach is:
.feature-headline h1, .feature-headline h2, .feature-headline h3, .feature-headline h4, .feature-headline h5, .feature-headline h6 {
text-transform: uppercase;
}
What you've listed basically tells the computer: provide the 'text-transform' property to header 1 (H1) with the class .feature-headline, and also apply it to all other headers (regardless of class), too.
The best method I can think of in order to solve this problem is through SASS, where you can nest:
.feature-headline {
h1,h2,h3,h4,h5, h6 {
text-transform: uppercase;
}
}
Related
I just started Angular 5 development with my knowledge of HTML and css.
Right now I am making a frondend template with the help of components.
I dont get any idea that a margin top 111.81 is coming ?
This can be caused by your h2 (try setting line-height: 0;) or check your styles.css file at the root of your app to see if there is a padding.
ADD the CSS ::
h1, h2, h3, h4, h5, h6 {margin: 0px;}
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 been working on this website for awhile, I have run into a few problems but many of them were just small mess ups.
Now I just can not figure out what is going on here.
http://goo.gl/oEuoU5
If you look at the top text that says "Start Growing Your Business Today", you can see it has some padding.
Now if you look at in with the element inspector, you can see that the style comes from this CSS
.home #pricing h1, h2, h3 {
padding: 1em;
}
But the problem is, that header is not in the #pricing section. So I cannot understand why it is being styled.
I have tried a few things like
#pricing h1, h2, h3 {
padding: 1em;
}
or
.pricing h1, h2, h3 {
padding: 1em;
}
but nothing seems to work. I have even tried seeing if I messed up in the document flow but I cannot find any problems.
Any help would be greatly appreciated.
#pricing h1, #pricing h2, #pricing h3 {
padding: 1em;
}
This should do the trick. When seperating classnames by a coma, make sure to specify all subclasses / parentclasses.
The element is therefore styled because after the first coma you only specified h2 and h3 so it styles all appearances in DOM.
You are getting this undesired styling because you are not using the correct syntax for styling multiple items within the same elements.
This will produce what you are trying to achieve:
#pricing .home h1,
#pricing .home h2,
#pricing .home h3{
padding: 1em;
}
The way you have have it, you are styling h1 within the element with id = "pricing", then h2 and h3 within the whole document.
I noticed that Visual Studio 2010 creates a file Site.css in its default project with the following code:
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
I don't understand why there is a part where the same properties have been set for all headings i.e. h1,h2,h3,etc. and then each of the headings are given properties separately i.e. h1 {/props for h1/} h2{/props for h2/}.
Thanks in advance.
This starts by creating a standardised set of rules for all of the heading selectors, meaning they will all look consistent throughout the whole design.
I imagine visual studio then only overrides the necessary parts of this for the individual selectors. So for example, it wants <h1>s to be bigger so it overrides that with font-size: 1.6em. For <h3> the font size will be 1.2em but the font-variant, font-weight, text-transform etc don't need to be changed, so by setting up a 'standard' at the very beginning of the page, VisualStudio doesn't repeat all of those other styles, only the ones it wants to override.
There are certain things that don't make much sense, such as setting the font-size property on <h2> to 1.5em as this is already done in the standardising rules at the top, but I think this is more of a problem with how VisualStudio was set up to deal with these rules (it's just set up to generate the CSS in that way) as opposed to being something that 'makes sense'. You wouldn't repeat the same rule like that if you were hand-coding your CSS.
I hope that makes some sense :)
This prevents rules meant to apply to all types of headings to be duplicated. This is a standard way to go. You could as well put the rules from the top set into all specific rule sets. but that be a much longer code and much harder to modify.
The rules inside the top set are applied to all comma separated types of headings. This way you only need to specify such rules further down, inside the specific rule sets, that are specific to this very type of heading.
Because in this selector h1, h2, h3, h4, h5, h6 you have properties that equal to all of them, in all other you have property specific to only one selected, maybe that's the case?
The first section h1, h2, h3, h4, h5, h6 applies the code to all headings, in the sections below some properties get overwritten for specific tags. So this means, all headings get e.g. color: #666666; and font-weight: 200;. The color stays the same for all headings, but the font-weight of 200 gets overwritten for h2 (600) but not for the other ones. There it stays at 200.
This way, the properties in the first section only have to be written once, not for every heading. The font-size gets specified for all headings, so it could be left out in the first section.
Is there a way of defining the line spacing between headers. I know using various header tags(h1, h2, h3) have various line spacing and I was wondering if there's a way of defining a line spacing for all of them, so that they are consistent and fluid throughout the page?
There are lots of articles on using margin and such, but I'm not too sure about it.
If you are not familiar with CSS I suggest reading a little:
CSS Intro: http://www.w3schools.com/css/default.asp
CSS like this would set the line height for all of your header tags:
h1, h2, h3, h4, h5, h6{
line-height: 30px;
}
Or this would set top and bottom margin's for all headers:
h1, h2, h3, h4, h5, h6{
margin-top:20px;
margin-bottom:10px;
}
Most suggest using a line-height of 1.45 for h1~h6 so that would be:
h1, h2, h3, h4, h5, h6 {
line-height: 1.45;
}
The recommended method for defining line height is using a number value, referred to as a "unitless" line height. A number value can be any number.