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.
Related
This is a pretty basic thing, but something that has always seemed weird to me. I develop sites for content management systems where I cannot always reliably expect a content author to use the correct markup. Many times, they do not even know what a p tag is.
So let's say I have a description element that should be styled a certain way, separate from my global paragraph styles. Inside of it will be text, ideally in a paragraph tag, but who knows, maybe it won't be. To work around this, I add the styles both to the parent and to the paragraph tag:
.description {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
p {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
}
}
This seems like repetative and overkill, but if I only add the styles to the p, the author may not use a p tag, and if I only apply the styles to the parent, global or other paragraph styles will overtake the styles of the parent. I also generally do the same thing with anchor tag colors. Sometimes I can enforce the tag with my backend code, but I'm really more interested in the solution from purely styling architecture.
What do other people do? Is this a bad strategy? To date, the above styling has been the most reliable for me.
You can try with this:
.description {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
*{
font-family: inherit;
color: inherit;
font-size: inherit;
line-height: inherit;
}
}
Can you safely assume that the author (or whatever WYSIWYG is being used) will insert an element at all? Be it a p or div, span, blockquote, article, main, section basically the most commonly used text-containing elements.
A few options would be:
Make sure the output is always going into a container with an id and/or a class (to make it the styles harder to override).
Make sure what ever WYSIWYG editor (if using one) will only output a handful of controllable elements
Ask the authors to only use a handful of elements
There aren't really that many HTML elements to choose from anyway.
The CSS:
.description,
.description p,
.description span,
.description td,
.description article,
.description main,
.description blockquote,
.description section,
.description any_selector_here,
.description div {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
}
This way you are only writing your styles once.
TLDR: Using CSS is there a way to force all no header tags to use a specific font?
So I work for a school district and we are trying to unify our website look and feel. We have a small problem though, all of our teachers have access to change the font family and size of their content. We really don't mind when they do this with their headers or when they make their font slightly bigger for emphasis. The problem we are finding is that they are choosing outrageous hard to read fonts.
Now I know using !important with the * in css will force will force this across all fonts (Yes I am aware we really shouldn't use !important). However, this doesn't allow users to use custom fonts for headers (h1, h2, h3, h4, h5 and h6 tags). Is there a way that we can force the font family to be something specific without forcing it on the header tags.
Teachers are trained not to do this, but there is no way to punish or scold them if they do this. So training it out of the question. I am also one person who maintains stuff like this and it is only a fraction of my job and we have over 1000 teachers, so it is really hard for me to enforce.
So now you know my problem and why it is a problem. Any advice would be appreciated.
TLDR: Using CSS is there a way to force all no header tags to use a specific font?
You can use :not. Heres a small example. You can see the Header tags are a different font family than the paragraph tag (added some coloring and such).
h1, h2, h3, h4, h5, h6{
font-family: sans-serif;
color: red;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
font-family: Serif;
color: blue;
}
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
Use the :not pseudoclass
Set a default style, and then override it for the editable font...
* {
font-family: sans-serif;
font-style: normal;
color: #000;
}
*:not(h1):not(h2):not(h3) {
font-family: 'courier';
font-style: italic;
color: red;
}
<h1>Default font</h1>
<h2>Default font</h2>
<p>Changed font</p>
<h3>Default font</h3>
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'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 avoid using the defaults with the reset code below:
margin:0px; and padding:0px;
For example, what are the default margins for the heading tag below?
<h1>Header</h1>
Your Question:
It varies between browsers. Check each browser's specific default stylesheets to tell.
For Google Chrome for example, it's 0.67em.
A Better Solution?
Do know that if you wish to aim for x-browser consistency, you'll have to use a CSS Reset.
The most common one being:
* { padding: 0; margin: 0; }
Although other (and probably better) exist.
The CSS specification has an informative Appendix D. Default style sheet for HTML 4.
Although it is informative it still says:
Developers are encouraged to use it as a default style sheet in their
implementations.
There you can find
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
It's different regarding which browser, thus if you want a pixel-perfect design then practice is to "reset" those values to 0 (margin and padding) and set them yourself.
"CSS reset" is very common to front-end developers, a simple example of one i use :
html,body,blockquote,code,h1,h2,h3,h4,h5,h6,p,pre{margin:0;padding:0}
button,fieldset,form,input,legend,textarea,select{margin:0;padding:0}
fieldset{border:0}
a,a *{cursor:pointer}
div{margin:0;padding:0;background-color:transparent;text-align:left}
hr,img{border:0}
applet,iframe,object{border:0;margin:0;padding:0}
button,input[type=button],input[type=image],input[type=reset],input[type=submit],label{cursor:pointer;}
ul,li{list-style:none;margin:0;padding:0;}
strong{font-weight:bold;}
em{font-style:italic;}
I think you should set line-height:100% for h1,h2,h3,h4,h5,h6 tag. So blank line will be shortest.