I am trying to style all the headings in my header with a different font-family than the headings on the rest of the page but I am having trouble getting the style to only apply to the specific header ID.
Here is what I tried:
#header h1,h2,h3,h4 {
font-family:'Helvetica';
}
But this causes all h1/2/3/4 tags to use the Helvetica font regardless of if they are in the header div or not. I'm sure I am missing something simple, can anyone help? Thanks!
I think you must do so:
#header h1,#header h2, #header h3, #header h4 {
font-family:'Helvetica';
}
You need to target all hN with the ID.
#header h1,
#header h2,
#header h3,
#header h4 {
font-family:'Helvetica';
}
See Fiddle
Related
I have checked and checked and I'm sure it's something simple I've overlooked but my font is not displaying.
The first paragraph is suppose to have quotes around it (you will see it has them right now because I did it without font-awesome); however, you will see the second full paragraph is suppose to have a quote at the beginning and it's not displaying. Please help
http://dev.healthcaresolutionsteam.com/agent/barbara-scott/
Your CSS specificity is being overridden by a style in style.css.
Font-Awesome only has:
.fa { font-family: FontAwesome }
Yet your style overrides the font-family (note the !important):
#fake, .menu, a.signin span, .balloon_text, #footer, #footer a, #signin_menu p a, #learning_center h2, #hst_blog h2, #carriers h2, #career_center h2, #learning_center, #hst_blog, #carrier_careers, .entry-title, #sidebar, #sidebar a, .breadcrumbs a, .breadcrumbs, #searchform input, .page-title, .entry-content, .entry-content a, .entry-utility, .read_more, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, .widget-title, #live_chat a, #hst_careers, #apply_online, #sales_revenue, #hst_compensation, #search_agents, #search_map, .agent_search, #search-results, #usca-intro-text, .usca-plan, #usca-form {
font-family: 'AllerRegular',Arial,Helvetica,sans-serif !important;
font-weight: normal;
}
Desired style being overridden:
Style actually being applied:
Check, if you use selector *
*{font-family: Arial}
in your default stylesheet.
So here's the problem I have. I wanted to be efficient and set all of my header tags to be the same font-family. So I used the code below. However it only appears to work when the multiple selector code is AFTER the single h2 code.
If i place the multi-selector code BEFORE the h2 code then it ignores it completely. Any thoughts as to what I am missing? Here's a link to the test page:
http://www.jasonkoprowski.com/test/JK_Test.html
I want the header to display using 'Crimson Text' font but seems to be defaulting to 'Times New Roman' (not even sure where it's getting this from actually. It works find when i put the h1, h2, h3, h4, h5 code after but not before. I guess I could just put it after the h2 tag code and be done with it but I want to make sure that I understand the root cause of the issue:
h1, h2, h3, h4, h5 {
font-family:"Crimson Text", "Lucida Sans Unicode","Times New Roman", serif;
}
h2 {
color:#232323;
font-style:normal;
font-weight:500;
letter-spacing:-1px;
line-height:1.1em;
margin:30px 0;
text-align:center;
font-size:42px;
}
To add even more to my confusion, when I added the code to Code Pen (http://codepen.io/anon/pen/EDpJg) it looks to be rendering correctly...so something wrong on my site?
Any help you can offer would be greatly appreciated.
Thank you,
Koprowski
The problem isn't with your selectors or the ordering of your rules (although in general it does matter sometimes), it's with the <style> tags at the beginning and end of your stylesheet:
<style type="text/css">
and
</style>
<!--CSS END-->
These belong in an HTML page, but not in a CSS sheet. Furthermore, the start tag is interfering with your h1, h2, h3, h4, h5 rule. You should remove them.
I have 2 div elements #container1 , #container2. Can i use styling in below manner ?
#container1,#container2 h5{
}
If yes then i cudn't get it to work for #container3
#container1,#container2,#container3 h5{
}
rule somehow doesn't seem to apply for #container3 ..
What could be the reason ?
That selector will apply to #container1,#container2, and any h5s in #container3. I think you want:
#container1 h5,
#container2 h5,
#container3 h5 {
/* styling */
}
This is exactly what classes are intended for, however. If you add class="container" to each of your container divs, you can simply use the following rule:
.container h5 {
/* styling */
}
The h5 at the end means that particular rule only applies to h5 elements inside the id.
As an exmaple, from your first example...
#container1,#container2 h5{
}
The above rules would apply to an element with id=contrainer1 and also to an h5 element inside an element with id=container2.
With:
#container1,#container2,#container3 h5{
}
You are actually targetting id=container1, id=container2 and also the h5 element inside an element with id=container3
In both cases though, the element with the h5 tag does not target the element itself, only the heading tag inside it.
your code seems to correct but you can use another solution...
why you doesnt use calss for every div you want?
.divcontainer{
css....
}
On my website I have an <H1> (the first one) with a title in it but it is all cramped. I've checked the CSS and can't see why it is all squeezed together. Can you help me find the culprit?
Its because of this:
style.css(line 115)
body{
12px/1.5em sans-serif <===
...
}
You set line-height on the body, and you're surprised that the line height is messed up? Remove that style and you're all fixed.
set your line-height to 1 (default). line-height: 1;
Most likely this line:
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 { font-family: Arial, Helvetica, sans-serif; margin:0 0 0.5em; line-height:1.5em; }
Which is in swatch/styles.css.
That line-height property is probably the issue.
Specify line-height for your headings. By looking at the font, try a line-height: 1.1em. i.e.
h1{
line-height: 1.1em;
}
You need to set your line-height in your css. For example
h1
{
line-height: 30px;
}
Hope this helps
Whats messing your H1 is the font: 12px/1.5em sans-serif; in your body style in you style.css line 115.
The element enclosing the h1 element has its width set to 50%. This forces the long heading across several lines. Remove that setting and shorten the heading.
Another same answer, but necessary:
Somehow unset line-heights for h1..6 are inherited from parent elements if parent elements have set line-heights. Tested in Firefox 24, Chrome 30 and ie8.
So here is another line for the reset area of css, to reset h1..6 line-heights and to prevent inherit behaviour:
h1,h2,h3,h4,h5,h6 {
line-height:normal; /*otherwise line-height is inherited*/
}
"Set any content id-labelled element with a first-child descendant element of any of h1, h2, h3, h4, h5, and h6 as follows:"
The selector I've created is found below:
#content:first-child h1,
#content:first-child h2,
#content:first-child h3,
#content:first-child h4,
#content:first-child h5,
#content:first-child h6 {}
Is this correct? and if so can it be further simplified?
Thanks for the help everyone!
The description is a little but unclear, but, from what I can understand you want to either
select those h* elements and then the style would be like:
#content h1:first-child,
#content h2:first-child,
#content h3:first-child,
#content h4:first-child,
#content h5:first-child,
#content h6:first-child {}
Example
select the #container element itself in case the first child of it is one of h* family. Then you can not achieve this with pure CSS and need to add a simple JS like (using jQuery in this case):
$('#content').has('h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child');
Example
You could add the class="header" to all of your h* tags. So your css now would be
#content:first-child .header { /* whatever */ }
The problem here is that you need to remember to put the class="header" to every tag you need