I am new to front end development, especially the styling.
I find css classes written like shown below:
.Header-bar p {
font-size: 18px;
}
.Header-bar p span {
font-weight: bold;
}
.Header-bar p span span {
font-weight: normal;
}
I understand that this means to apply font-weight: normal; to the span element which is inside another span element which is in p under div where the class is mentioned.
This doesn't seem like a good practice. I want to create re-usable classes that I can use in my code.
How should I be changing this style to better align to my needs.
When we are talking about styling and CSS I think it's important to keep in mind the specificity levels of a CSS selector.
What is Specifcity ?
It's what defines how broad the scope of your stylying rule is.
Simply put :
The less specfific a rule is - the more abstract it is - and the more elements it will capture.
The more specific a rule is -less abstract it is - and less elements will capture.
More specific rules overwrite/replace less specficic rules.
In your example you have chosen a a rule style , which is applied to a very specific element , in this case .Header-bar p span span {font-weight: normal;} and ONLY that element.
However , if you had only written .Header-bar{font-weight: normal;} it would work aswell , except you would be applying that style to not ONLY that element but also ALL the other elements which are contained in that class.
When you want to be more specific and not write all the path to get to that element, you can simply give the HTML element an ID and use it then on CSS , like this , for example :
<footer>
<div>
<div>
<p id="IDsomething"></p>
</div>
</footer>
</div>
Then select on CSS :
#IDsomething { font-weight :
normal;
}
There are four categories which define the specificity level of a selector:
Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.
IDs - An ID is a unique identifier for the page elements, such as #navbar.
Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.
You can easily create a particular unique class that's going to be for a particular styling or set of styling. For example creating a class called "normal" and then adding the font-size property of normal, it'll be easily re-usable that way i.e you can add it to any part of your code if you want the font-weight styling of that particular element to be normal.
Just apply a class to the span which you want to style, then create a CSS rule for that class. Selectors like .Header-bar p span span are rather used when you can't change the HTML code (or at least the structure) yourself.
Concerning reuseability of classes: That class can be used on as many elements as you like, and those elements can be divs, spans, headings or whatever.
Related
There is one <p> tag with class .eleclass and id #eleid and i have specified 3 css to the <p> tag one specified with class second with id and third with just p declared.
p#eleid{
color:yellow;
}
p.eleclass{
color:blue;
}
p{
color:red;
}
<p id="eleid" class="eleclass">
hello para.
</p>
Now i wonder why the rule applied to p#eleid is working when css runs from top to bottom nature and at bottom color red is specified so <p> should be red in color.
Is there any css rules hidden behind it??
This problem inclues use of id not only class.
It comes down to CSS specificity.
From MDN:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
As it happens, an ID based selector has higher priority than a tag based selector. This is because an ID is more specific than a tag. In other words, the tag selector applies to all p elements, while the ID will only apply to the p with the ID.
There are ways around specificity, such as the !important keyword - however, I mostly recommend against working around specificity, as it can lead to bugs.
I have a very bad CSS rule (high specifity, use of !important) which sets color of text in a paragraph:
#wrapper .article .text {
color: green !important;
}
Then I put a simple span element in that paragraph and set color of the span text via simple class:
.black {
font-weight: bold;
color: black;
}
How come, that this simple class with low specifity and no !important flag overrides the parent rule?
Full snippet on codepen.io here: http://codepen.io/Jarino/pen/oXYeQZ?editors=110
This is simply because there is no more specific rule for that <span> than what you have declared in .black. Even though it is a child element of the <p> that has an important! flagged rule, it only inherits the color from it if it can find no more specific other color definition. Inheritance from a parent context is the least specific "rule" possible. Also, the !important part of a rule is not inherited, afaik.
If this were not the case, you would be very commonly forced to either use !importantwhenever an element takes a style that it already inherited from the parent, or you would have to constantly use very long selectors to make sure your child element selector does not have a lower specificity than the definition it inherits.
Also, compare what Mozilla says on the subject:
Styles for a directly targeted element will always take precedence
over inherited styles, regardless of the specificity of the inherited
rule.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#directly-targeted-elements
The high-specificity rule applies only to the parent class. When it comes to it's children, the high-specificity of the parent class mellows down to a parent style that is inherited by the child.
And, when it comes to styling the child, all CSS rules specifically targeting it get precedence over the high-specificity rule of the parent.
If you do 'Inspect Element' for this child span tag in the Developer Console of your browser, you'll see how preference is given to CSS rules targeting that particular element that overrides all the parent styling that appears way down the list.
if you don't want your .black class to override the parent rule you can simply remove the color property from your .black class, the class mentioned in span will always have high specificity regardless of parent rule.
Because !important applies only for current element style not for child elements with specified same property.
How come, that this simple class with low specifity and no !important
flag overrides the parent rule?
Well, because they are two different rules.
You have your text class which is pretty strictly called but only a class without selector.
After you addded a span with a different class it will not be overwritten, because it's another rule. It gets applied to the span. And .text get applied to the paragraph.
I have a div that I want to be clickable, so I've wrapped an "a" tag around it, as it is valid HTML 5 and made the div a block level element.
Now, the problem I'm having is styling content inside that div, as everything displays as a link, and despite trying numerous methods I haven't found a good solution for custom styling everything inside the div.
A reduced test sample can be viewed here:
http://codepen.io/anon/pen/aencq
So, my question is basically, what's the best way of styling elements such as h2 and p that are inside a block level div, that is wrapped with an a:link.
All you need here is:
a { color:black; text-decoration:none; }
Sometimes you'll want to get more specific and then you can be like:
a h2 { color:red; }
Basically what is happening to you is that all elements under <a> tag are inheriting css properties of a hyperlink (underline, blue color, etc)
To counter this create an id or class on your tag and remove/override the default anchor properties.
For example to remove the underline you do:
text-decoration: none;
After that override Link-related pseudo-classes: :link, :visited, :hover and :active.
The best way is a matter of opinion. To me the best way would be to use the most succinct CSS as possible. Use only the specificity that you need. For example don't use a div h2 when a h2 is all that's needed. Also FYI you can do something like a.block { display:block; } and then you won't need the div in the markup.
I'd like to force all text on one of my systems to be displayed with one font type. However, folks frequently paste in text that has inline styles with all sorts of different formatting.
Could I override an element's inline style in my stylesheet? '!important' isn't enough for this!
You can override inline styles using CSS code that assigns font family to all relevant elements using the !important specifier, e.g.
* { font-family: Calibri !important; }
It is not sufficient to set the font e.g. just on the body element, since then inner elements have their fonts controlled by rules applicable to them. Inner elements inherit font from their parent only if no CSS rule sets the font on the inner element.
If someone is able to inject an inline style that has !important, then you cannot beat that in CSS. You would need to manipulate the document with JavaScript, removing or changing the style attribute.
Inline styles rule supreme.
You can do this, but you'll need to do it using JavaScript. The code would have to basically remove all of the inline style statements from the pasted code. This is a good idea anyway, you never know what people will paste-in.
Using jQuery:
$('.wrapper *').removeAttr('style');
...where your content is within a div with a class of "wrapper"
You do not need JavaScript for this. Despite what you say, !important is indeed enough.
Test case: http://jsfiddle.net/jezen/Z4rnv/
Explanation: CSS rules are chosen based on a level of specifity, which is calculated by the layout engine. The !important rule isn't an all-overbearing modifier; it simply adds extra weight to the respective rule in the specificity heirarchy.
Using the jQuery remove attribute function should do the trick.
removeAttr( 'style' );
I wasn't happy with the non specific nature of the other two answers.
* { font-family: Calibri !important; }
Won't always work sometimes you need to be more specific such as when dealing with spans
span { font-family: Calibri !important; }
Is specific enough because though you are adding important to the value.
Also the type of font styling matters, if the initial font styling was just using a font such as font-family and font-size are more specific already so using
span { font:15px arial,sans-serif; !important; }
would not override an inline style of
<span style="font-family: Calibri">Hello World</span>
I want to use this CSS and HTML http://jsfiddle.net/6VntE/ but many of the selectors are conflicting with previously used selectors (body, H1, div). So while it works in jfiddle, it doesn't work in my site.
Is there a way to section off this css from the rest of the site so that it will work?
If you don't want to apply a css style to apply on All div then you should use classes or id to design element instead of using tag name.
Suppose If you are doing like this
h1{font-size:10x;}
then it will style all the h1 , but if you want to design only some elements
then write
.style_h1{font-size:10px;}
and to your h1 tag which to be styled add class="style_h1"
OR
add a parent to your h1 with some class called parent and then inside that design all h1
.parent h1{font-size:10px;}
and to your h1 tags add a parent element having class parent