As I'm going through a CSS tutorial I noticed the following CSS duplicate selectors:
body {
text-align: center;
}
body {
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}
Is there any benefit to putting some CSS properties in a separate CSS selector? What's the author trying to achieve?
No benefit, aside from personal preference. For example, grouping things together that go together so it's easier to read or update/remove. You may have your default body styles, then some unique styles for body that you added to support a plugin or something, so you might have a separate entry for body for the unique plugin styles that you group with other styles defined for the plugin so it's easier to read/find the styles that pertain to the plugin.
It's also bad practice to write CSS like that. It uses extra space (making your files bigger) and makes cleanup and tracking down style changes more difficult.
The class properties should be consolidated for better maintenance and consistency.
There are no advantages to having multiple CSS blocks like that. It may cause heartache later on if they are in different files because the last property listed will "win".
So if the second body also has text-align property, the second one will "overwrite" the first one.
In any case, if it is the same selector, they should be in the same CSS block.
Related
I am working on a page - click here for link. The icons are all supposed to have the font size of .side-icon:
.side-icon{
font-size:28px;
}
BUT a style in font-awesome.css is overriding this, no matter where I include the library in the layout.
At the moment I have included the css in the top of a work around sheet (font-awesome-fix.css) using an #import, but I cannot get the 'font: normal normal normal 14px/1 FontAwesome;' to disappear at all.
Please help!
Make your selector more specific :
.side-icon.fa
See here how the priorities of the selectors are calculated.
Hey you should target the before element :
.side-icon:before{
font-size:28px;
}
maybe try adding an id to the specific .side-icon that you need to change the font on.
CSS:
.side-icon #id_goes_here{
font-size:14px;
}
Hope this helps!
The very helpful "!important" usually helps me solve issues like this, or at least determine the root issue:
.side-icon{
font-size:28px !important;
}
Try using more specific css to override the other styles. This may include adding classes or ids so you can chain them together to override.
Examples:
.side-icon.foo{styles}
#bar.side-icon{styles}
If that still doesn't work, you may want to use the !important override to add another layer of specificity. I wouldn't reccomend jumping to use it immediately, but that's mostly because i prefer to code more specifically than using !important everywhere.
Example:
.side-icon{style:value!important;}
If neither of these work, there may be other issues messing with your styles.
This is because of the CSS specificity rule kicks in:
When selectors have an equal specificity value, the latest rule is the
one that counts.
So including your file at the topmost location does not help because the font-awesome.css gets included later and since both .side-icon and .fa are classes on the same element, .fa defined by font-awesome.css got picked up by the browser because .fa was the latest font-size definition.
So, in order to overcome this problem, include your font-awesome-fix.css after font-awesome.css or you could use inline style after the line that includes font-swesome.css
<style>
.side-icon {
font-size: 28px;
}
</style>
or override the .fa font declaration in the same file (if you have control over it) by ensuring that the font-size override comes after the original declaration
or use one of the several ways to become more specific (see CSS specificity[1])
[1] http://www.w3.org/TR/selectors/#specificity
So this is a strange bug I cant seem to figure out.
Im using Meyers reset in my app. But when I edit my main css file to change the h1 font size, it will not change it. But when I put it in the body tag it works. Could anyone explain this to me?
Example
base.css.scss
h1 {
font-size: 2em; //--This doesnt work
}
body {
width: 100%;
height: 100%;
h1 {
font-size: 2em; //-- This works
}
}
Make sure to include the reset file before your base.css.scss file. Looks like it overwrites the h1 rule.
There are three possible causes to this issue. First, make sure you are not trying to use SASS in the browser. It will need to be fully converted to plain CSS before you can use it there. Second, make sure the selector you're using has a higher specificity. That is, make sure the selector is more specific than another selector setting the property. body h1 has a higher specificity than just h1. Though, in Meyer's reset, that shouldn't be a problem. Third is order. If two selectors have the same level of specificity, the one that comes later gets priority. Make sure your reset comes before any other CSS on your page.
you've redefined, so the second assignment of H1 does not work, although you can use! important but I'd better not
Because the second one has a more specificity than the first one: in this case body h1 has more power than h1
The issue you are having is two-fold. There is a specificity issue as well as a cascading issue. You aren't going to be able to override a style before it is declared without using and !important. So your override should be after the reset.
You will also want to match the selector you are trying to override. So if your reset is targeting the element with the body and h1 selectors, do the same to override the styles.
body h1 { font-size: 2em; }
This might be a very stupid question, but I couldn't find anything and it seems so obvious: is nesting with CSS possible like with SASS?
For example, I want to define a h1 tag on a certain page, so I write:
body.certain_page h1 {
font-size: 12px;
}
So far so good. If I want this style to apply to more than one page, I would write:
body.certain_page h1, body.other_page h1 {
font-size: 12px;
}
Now when you define a lot of rules this way, it gets very tiring. It would be so much easier to write something like this:
body.certain_page, body.other_page {
h1 {
font-size: 12px;
}
}
Like a media-query. Why is that not possible? Or am I missing something?
No, that's not possible now, that's why SASS lists nesting as a feature.
Well, as #destroy already answered, you cannot have nested selectors using CSS, that's why developers choose LESS and SASS preprocessors. The best thing you can do to minimize the CSS is my grouping common properties like
div, p, i {
color: #f00;
/* All the three elements will have the same color */
}
You can also declare the base properties right in the parent selector so that they can be easily inherited and you don't have to call them again and again on each..
body {
font-size: 14px;
font-family: Arial;
color: #515151;
}
The above properties will be easily inherited by elements such as p, so you won't have to declare the font-family or font-size each time unless and until you want to have a different font-family for a particular element which can be over ridden by using a more specific selector like
.class_name p {
font-family: Open Sans, Arial;
}
You do have universal selectors which will also ease up over lengthy selectors, like say you want to color red all the elements nested inside a specific element having a class called .class_name so instead of doing
.class_name p, .class_name div, .class_name fieldset {
/* This is really bad */
}
Instead you can write the above as
.class_name * {
/* Much better */
}
Conclusion : Learn CSS Selectors, that's the only way you can figure
out and you can optimize your CSS yourself, while selectors totally
depend on the DOM, so there are no pre defined techniques but you
should keep the selectors simple, not over complicated, else you will
end up writing more and more specific rules which will lead to more
100 line of crappy CSS...
Also, here's an handy tool by Google you can always use to optimize the performance.
With CSS Selectors 4, something similar will be possible with :matches pseudo-class:
:matches(body.certain_page, body.other_page) h1 { ... }
It is already available in Webkit/Blink and Gecko-based browsers (as :-webkit-any() and :-moz-any(), respectively), but only as an experimental feature. Until CSS Selectors 4 are adopted by most browsers, using CSS Preprocessors seems to be the only solution to prevent such self-repeating in writing CSS.
I am learning CSS on the fly, so if this is stupid, bear with me. I need a lot of different types of <p> tags, as I am using CSS styles to manage an ebook in HTML (this format is required, and I am not allowed to deviate from the established structure). At the moment I have 15 different <p> classes, and I will need a lot more (probably over 50). Many of theses classes are very similar, with only a 1 or 2 differences between any 2.
So, is it possible to have tag classes that inherit from other classes, similar to how OOP works? And if that isn't possible, then is there some way to make this more efficient?
No, there is no such things as multiple inheritance, and this is not about inheritance at all.
To format paragraphs in different ways, you can use several classes in a <p> tag, separated with spaces,e.g. <p class="warning important aside">. For each class, you can set CSS properties as desired (ranging from setting a single property to a complicated setup).
You need not (and should not) declare e.g. font family for each class separately. It normally suffices to set it for all paragraphs, e.g. p { font-family: Calibri, sans-serif; }. A class is not an object, or object-like. It is just a way to classify elements so that you can set CSS properties on a set of elements.
What I have seen in most of Giant sites like Google, Yahoo, etc.
1] Define minimum common style in one css class like:
.hFont { font-family: Helvetica, San-serif; }
.vFont { font-family: Tahoma; }
.sBold { font-weight: semi-bold; }
.bBold { font-weight: bold; }
2] You can define multiple classes in 1 tag. So Use this multiple classes in tags like:
<h1 class="hFont sBold">Hi this is Heading!!! </h1>
I think this should be best and efficient method which we can use.
This is just an example. So reduce and combine your same style in one css class.
You can use multiple classes:
<p class='main-class secondary-class'></p>
After that, style:
.main-class {
/*Your CSS code */
}
.secondary-class /*Selects <p> tags with second class*/
{
/*Styles that is different than the main class*/
}
I am using a CMS that has been poorly configured with horrific CSS (e.g. H1 is about 12px). How can I load my content without it being infected by this diseased CSS?
I was considering an iframe, but I would want to keep it in the CMS if possible. Would frames work?
If you can keep your content within an element with a specific class or id (e.g. <div class="content">, then you could adapt a reset stylesheet (like Eric Meyer’s) to reset everything within that class:
.content div, .content span, /* ...and so on */
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Then write all your styles prefixed with that class too, e.g.
.content h1 {
font-size: 3em;
}
If you’d rather reset everything to the default browser styles (rather than the unstyled settings you get with a reset stylesheet), you could adapt Firefox’s built-in html.css stylesheet in a similar way (i.e. prefix all its selectors with the class/id on the element containing all your content).
Bit of a drag, but it might be less of a faff than frames. (I assume the CMS generates your HTML, so it’d be harder to change that to use frames than to work around their issues in your CSS file.)
You might consider changing your CMS — they’re meant to reduce the amount of work you have to do, not increase it.
Is there any possibility to load your custom css classes? You should load your CSS classes after CMS's CSS classes and override them.