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.
Related
I am having a little issue with a page that is displaying an image for all H1, H2 texts. It is set globally like this?
.text h1,
.text h2,
.text .title-arrow {
color:#a6a6a6;
font-family:'MelbourneRegular', Arial, sans-serif;
font-size:23px;
background:url(images/arrow_1_green.png) 0 3px no-repeat;
padding:0 0 0 20px;
margin:10px 0 20px 0;
line-height: 23px;
}
However I would like to turn off this arrow image feature for just one or two occasions? It's a really newbie question so I'm sorry if it offends anyone?
This will apply to all h1 with class text, h2 with class text or elements with both text and title-arrow as classes.
If you want to disable it on only one or two elements that have one of the above, then you need to assign it a new class, for example, no-arrow
the css would then be:
.no-arrow {
background:none !important;
}
note, the !important is used to force an override of the background property (should work in almost all cases).
Simpy you can do so by rewite you new defention for that component directly under the previous definition
// this is your old css
.title-arrow , h3 , h5 h6, div {
background:url(images/OLD.png) 0 3px no-repeat ! important;
}
// write this under the previous
.title-arrow {
background:url(images/RED.png) 0 3px no-repeat ! important;
}
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.
Okay, I have one <h1> in my <header> , and one <h1> in my <section>. The first question is why the size of this both <h1> different? I assume that they have their own size depends on their parents tags, which is I'm not certain of it. The second is I have styling this <h1> with external CSS, like:
h1{
font-size:2em;
}
tutorial
but, the <h1> inside the <header> won't change, only the <h1> inside the <section> make sense. I'm still beginner even in html, so please explain nicely. Thanks in advance.
Issue demo: http://jsfiddle.net/c06tpb3u
You're not using any CSS reset, which means you're at the browser's mercy and the default Stylsheet.
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
}
are the default styles set for h1 heading element
while for section things are getting salty:
h2, *:-moz-any(article, aside, nav, section) h1 { /*<<<< note h1 here*/
display: block;
font-size: 1.5em; /*<<<< and the new value*/
font-weight: bold;
margin: 0.83em 0;
}
h1 {
/*display: block;*/
/*font-size: 2em;*/
/*font-weight: bold;*/
/*margin: 0.67em 0;*/
}
so as you can notice (the above is inspecting in FF) that h1 is getting overwritten for h1 being inside section. <heading> element is omitted from that group leaving heading1 at the 2em default font size.
Browsers' default CSS for HTML elements
https://developer.mozilla.org/en/docs/Web/CSS/length
em This unit represents the calculated font-size of the element. If used on the font-size > property itself, it represents the inherited font-size of the element.
This unit is often used to create scalable layouts, which keep the vertical rhythm of the page, even when the user changes the size of the fonts. The CSS properties line-height, font-size, margin-bottom and margin-top often has a value expressed in em.
To override any CSS add the !important notation to the style..
h1{
font-size:2em !important;
}
This will override any of the browsers default CSS.
Pls see: Demo
What I want to do is: horizontally, put the first sentence on the left, and put the other one right. Vertically, I want to align them to the bottom. The two sentences are not the same font size. I searched this topic for a while and think display:table-cell should work, but you see, the two sentences are not bottom aligned. Any help will be appreciated!
HTML
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm right</p></div>
</div>
CSS
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
}
.di_h_cn p{
font-size:24px;
}
check this Fiddle
*{
margin:0px !important;
}
You need to remove the auto generated margins. i've specified the height of your table cells to see the effect of bottom alignment
Remove margin and you will get your desired output
.di_h_cn p {
font-size: 24px;
margin: 0;
}
as p tag has these two rules to add margin
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
Use this only to solve your issue
p{margin:0;}
When you write HTML you should know that most of HTML tags takes default margin and padding. To remove those margin and padding you should use one of the following techniques:
Use CSS Reset [recommended]
Use following CSS
body, p, h1, h2, h3, h4, h5, h5, h6, form, input, blockqoute {
margin: 0;
padding: 0;
line-height: normal;
}
By using one the above techniques your HTML elements behaves same in cross browsers.
I'm diving into web development and CSS is getting the best of me very early on. I have the following html...
<div class="span-6" id="left-sidebar">
<h4>Left Sidebar</h4>
<ul>
<li>fruits</li>
<li>meats</li>
</ul>
<h4>This is a header</h4>
</div>
and my CSS code...
#left-sidebar, #right-sidebar {
background-color: black;
color: white;
}
but only the text "fruits" and "meats" are rendered in white text, the other text is rendered is a dark grey color. Why isn't all the text rendered in white?
Also, I find I can fix this when I'm more specific, using the CSS code...
#left-sidebar, #left-sidebar h4, {
background-color: black;
color: white;
}
Why do I have to be more specific? Doesn't #left-sidebar mean, "render all text in the left-sidebar using white, unless it's been overwritten with a more specific CSS statement"?
I should also note that I don't have any other CSS code that's related to the left-sidebar div. Also, I'm using Blueprint CSS (as you can see in the "span-6" class), but I don't know how that could be conflicting with anything.
Thanks so much!
Blueprint css has default colours for heading tags. (see screen.css)
You need to specify:
#left-sidebar h2, #left-sidebar h4,
#right-sidebar h2, #right-sidebar h4 { color: white; }
Basically, the h (header) definitions are sometimes pre-set by the browser. Are you using a CSS reset? Try this out http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ - it essentially gets rid of browser defaults and makes it much easier to develop websites across multiple browsers.
In the short term, try setting the definitions of the h2 and h4 individually, like this:
h2,h4 {
color: white;
}
Or add an important tag to your current CSS, like such:
#left-sidebar, #right-sidebar {
background-color: black;
color: white !important;
}
You can use Firebug in Firefox or the developer tools in Chrome to see what classes are being applied to each element. You just "Inspect" the element and view the applied CSS rules in the pane on the left.
the header tags need their own CSS Class.
h2, h4{
color:white;
}
should do the trick