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;}
Related
In Bootstrap 4, there is unwanted space around the top and bottom of text, even after applying margin or padding to 0, or playing around the line-height. The extra space is still there. It makes aligning elements with text increasingly harder.
See the red line in the following example taken from Bootstrap official doc:
you most likely will need to use the !important flag at the end of css rule.
For example:
h1 { padding: 0 !important; }
It's not the prettiest and probably not the most efficient method, but it usually gets around the bootstrap css rules.
The extra space is not related to the h1 heading. It is applied through the css selector .bd-content>table>tbody>tr>td .
You can try :
.bd-content>table>tbody>tr>td {
padding: 0;
}
Use lesser line-height like
h1, h2, h3, h4, h5, h6{
line-height:0.6;
}
This should work as per your requirement or else change the number 0.6... or so
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;
}
}
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.
Im having problem because of bootstrap applying css in some element like h2, h3, h4, etc...
Here is the code i see in bootstrap, note that it is applying styles to these elements
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: inherit;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
}
Here's my sample code :
<div class="page-wrapper">
<!-- OK to be added styles by boostrap -->
<div class="container">
<h2><span>WELCOME BOOTSTRAP</span></h2>
</div>
<!-- Bootstrap should not add styles to this div and its children.
This HTML is generated from external source and i just grab it and append it in DOM.
All styles here are inline.
If no inline styles applied, then stay it as is and dont let boostrap add other styles.
-->
<div class="mycontent">
<h2 style="font-style:italic;">
<span style="color:#FFFFFF;"><span style="font-size: 72px;">NO BOOSTRAP HERE PLS!</span</span>
</h2>
</div>
</div>
How can i achieve that the h2 inside class "mycontent" will ignore the bootstrap styles? I mean h2 should not have these styles : color: inherit; font-family: inherit;font-weight: 500;line-height: 1.1; which i meantioned above
IMPORTANT NOTE : I cannot edit/add styles to the div with class "myconent" since this is generated from other source. All i want to do is not let the bootstrap add styles of specific element and its children.
Any suggestion would really be a big help.
In your example, simply add the following to your CSS:
div.myContent h2{
/* YOUR STYLES */
}
There should be enough specificity there to override Bootstrap's baked in styles. Note- you will need to put this CSS below Bootstraps CSS file.
For any style you want to override- simply add more specificity to the rule in question, or replicate it and replace the properties you're interested in. As long as your CSS is placed after Bootstraps any rules will replace those already specified.
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.