Nested CSS overrides element class - html

I have an html page with only one button
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css1.css" type="text/css">
<link rel="stylesheet" href="css2.css" type="text/css">
</head>
<body>
<div class="container">
<button class="btn ovalbtn">
Save
</button>
</div>
</body>
</html>
And those are the 2 css classes used:
CSS1:
.container .btn {
font-size: 4.0em;
}
CSS2:
.ovalbtn{
font-size: 16px;
}
I wonder why the button aquires the font-size from CSS1 while I overrode it with another class in CSS2. I know it's related to css specificity but I have shallow knowledge in this area.

It is due to specificity.
A class selector has a given level of specificity. Two class selectors are more specific than a single class selector. Thus rules in a rule-set with two class selectors (and nothing else) will overwrite rules for the same properties in a rule-set with a single class selector (and nothing else).

Because in your CSS 1 button have more specific rule compare to CSS 2. If both CSS have .container class in their rule then your CSS 2 will effect to that button
So if you want to effect your CSS 2 then do one change pas per following :-
.container .ovalbtn {
font-size: 16px;
}

The browser displays CSS1 because it is more specific than CSS2. When the browser sees different CSS codes changing the same element it applies the one which is more specific.
You can read about CSS Specificity here.

Related

basic coding (div with multiple classes) [duplicate]

This question already has answers here:
Using two CSS classes on one element
(9 answers)
Closed 4 months ago.
Can I apply 2 classes to a single div or span or any HTML element? For example:
<a class="c1" class="c2">aa</a>
I tried and in my case c2 does not get applied. How can I apply both classes at once?
1) Use multiple classes inside the class attribute, separated by whitespace (ref):
<a class="c1 c2">aa</a>
2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):
.c1.c2 {
}
Include both class strings in a single class attribute value, with a space in between.
<a class="c1 c2" > aa </a>
As others have pointed out, you simply delimit them with a space.
However, knowing how the selectors work is also useful.
Consider this piece of HTML...
<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>
Using .a { ... } as a selector will select the first and third. However, if you want to select one which has both a and b, you can use the selector .a.b { ... }. Note that this won't work in IE6, it will simply select .b (the last one).
<a class="c1 c2">aa</a>
This is very clear that to add two classes in single div, first you have to generate the classes and then combine them. This process is used to make changes and reduce the no. of classes. Those who make the website from scratch mostly used this type of methods. they make two classes first class is for color and second class is for setting width, height, font-style, etc.
When we combine both the classes then the first class and second class both are in
effect.
.color
{background-color:#21B286;}
.box
{
width:"100%";
height:"100px";
font-size: 16px;
text-align:center;
line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}
<div class="box color">orderlist</div>
Separate 'em with a space.
<div class="c1 c2"></div>
.color
{background-color:#21B286;}
.box
{
width:"100%";
height:"100px";
font-size: 16px;
text-align:center;
line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}
<div class="box color">orderlist</div>
In practice, two classes are used for an element when the two classes format different non-overlapping areas, e.g., one class specifies the color and the other the alignment of text. Then you use these two classes for an element and don't need to write a third class that is the amalgam of the other two, see my source code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<style>
.color-red {color: red; }
.center-align-text {text-align: center;}
</style>
</head>
<body style="width:500px; background-color:lightgray">
<p style="width:400px;background-color:white"
class="color-red center-align-text">Centered pepperoni</p>
</body>
</html>

CSS class selector won't work

I'm new in coding and I'm having some noob issues...
Whenever I style my elements inside my HTML file (style="...") everything works fine, but when I do it the correct way, i.e. I give them a class and style them in the CSS file, it won't work at all.
This is my HTML:
<div class="4u 12u(mobile)">
<section class="highlight">
<a href="football.html">
<span class="image fit"><img src="images/pic02.jpg" alt=""></span>
<header>
<h2>Football</h2>
<p><img class="miniflag" src="images/flag_en.png"> <img class="miniflag" src="images/flag_de.png"> <img class="miniflag" src="images/flag_nl.png"> <img class="miniflag" src="images/flag_es.png"></p>
</header>
</a>
</section>
</div>
And this is my CSS, where I try to give them a 6px margin all around:
.miniflag {
margin: 6px 6px 6px 6px;
}
Can you help me find the problem? Thank you very much!
Edit: Yes, both my HTML and CSS file are linked within the head section (it is a running website), so the problem must be elsewhere...
As an answer to your own solution: Most likely you had another piece of CSS that was overwriting your .miniflag CSS.
Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.
You are correct, a specific class attribute will overwrite a generic class attribute. But I think you're confused about which is which:
.miniflag : generic class attribute, the lowest level
.highlight p .miniflag : a more specific class attribute, with 3 levels
The more specific one will be applied.
Furthermore, the position of your css rules matters as well:
.miniflag {
color: red;
}
.miniflag {
color: blue;
}
This will set the color to blue, since the last rule is applied and overwrites the previous rule.
Your CSS code and HTML is looks fine to me, may be you should check head section into your HTML file, and if you have not included your CSS file into your HTML file, then following code will help you to do that.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Tip: make sure you specify the location of style.css properly as follows
href="location/style.css"
you can do this:
<head>
<link rel="stylesheet" type="text/css" href="foldername/style.css">
</head>
Solved! In my CSS, before the .miniclass I also specified the parent class, so now it looks like this
.highlight p .miniflag {
padding: 2px;
background-color: white;
width: 35px;
}
And it works perfectly. Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.

CSS: Selectors Property Inheritance

I'm new to css so I have this question:
Having this html document:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
The text property from h1 tag are inherited from the style class, from the h1 style or from both?
Expanding further on what Harry said in the comments there a multiple ways to define 'style' to an element using CSS.
Inline Style - <h1 style="color:blue;">
External Stylesheet
Internal Stylesheet
In the above question you're using an Internal Stylesheet. This meaning you've added <style> tags to your head of the document and then added the styles within there.
There are also several ways to change the style of an element using any of these methods. You can:
Style an object using an ID selector (#) (see example 1)
Style an object using a Class selector (.) (see example 2)
Style an object using the Tag (h1) (see example 3)
Example 1
#title { color:black; }
<h1 id ="title"> This is the title </h1>
In this example you're able to identify the H1 tag using an ID, allowing for that single object to be styled using the hash key.
Example 2
.title {color:black;}
<h1 class="title"> This is the title </h1>
In this example you're able to identify a class of objects or singular objects, you can also define the class to a certain tag {h1.title} so you're identifying that title belongs to the h1 tag and will change the colour black.
Example 3
h1 {color:black;}
<h1 class="title"> This is the title </h1>
In this example you can identify all tags and change them as you please. This will take all h1 tags in the document and make the colour of the writing black regardless if it belongs to a class or not.
Summary Example:
To summarise you can incorporate all three of these techniques to change various objects and to define specific elements to specific styles. So when you use multiple of these techniques it will read all only for the purpose of the operation: so a class selector will look for classes, tag selector will look for a tag etc etc. Look at this JSFiddle
h1 {padding:20px;}
h1 .title {color:green;}
#subtitle {color:red;}
<h1 class="title"> TITLE GOES HERE </h1>
<h1 id="subtitle"> This is a subtitle </h1>
In this example it'll add padding to both elements but only add the color to the element with the specific selector.
I hope this clears things up for you.
The text property from h1 tag are inherited from the style class, from the h1 style or from both?
There isn't a text property in CSS - so none of the above.
The only place that any property on your heading will be inherited from is the body element. In CSS inheritance is when the value of the property is inherit (e.g. font-style: inherit) and it copies the parent from the parent element in the DOM.
The only selectors you have in your stylesheet are type selectors, and the only one that matches the <h1> is the h1 selector, so the rules in that ruleset will apply to the heading.
If you had a class selector that matched the <h1> (which would require it to be a member of that HTML class (via a class attribute), then it would overwrite any rules from the type selector since a class selector is more specific.

About specificity

In this code I have paragraph that looks like this
<p class="special">
This is just a test. <em>what color here</em> inheritance work
</p>
I wonder why is not the string "what color here" taking the color from the parent p element.
I mean the class special has the specificity value of 10 and a type such as em has a specificity value of 1 so here 10 is greater then 1.
So I mean the color should have been taken from the selector .special
Here is the markup and css
<!DOCTYPE html>
<html>
<head>
<meta name="keyword" content="html5. tutorial" charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
em
{
font-weight:bold;
color:red;
}
.special
{
color:blue;
}
</style>
</head>
<body>
<p class="special">
This is just a test. Is this color <em>red</em> inheriatance work
</p>
</body>
</html>
//tony
The <em> is a separate element inside of .special, so it has its own specificity breakdown. If the code was <em class="special">, the class specificity would apply to the <em>.
This has nothing to do with specificity. Specificity applies when two or more style rules are applies to the same element.
Here, you just have a paragraph (in blue), which happens to contain an em element (in red).
.special does not select the <em> (the selector does not match). The em selector does match and its properties are applied, hence the red color.
The reason why the <em>'s color would appear blue if the em selector were not there or did not match is because of Inheritance and the fact that color is an inherited property.
For example:
http://jsfiddle.net/kFvvX/ -- non-inherited property does not apply property to descendant
http://jsfiddle.net/kFvvX/1/ -- you can choose to inherit this property
http://jsfiddle.net/kFvvX/2/ -- you may set the property too; overriding is unnecessary since the selector that matches the parent does not match the child.

# sign in CSS selectors

Some CSS selectors have # in front of them, what does that mean?
It's the ID selector, a fundamental feature of the CSS standard. It matches the HTML element with the given ID, according to the id attribute (assuming a conforming document, of course). See the W3C Selectors spec for more.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#my-div {
color: #f00;
}
</style>
</head>
<body>
<div id="my-div">This text will be red.</div>
<div id="another-div">This text will not be red.</div>
</body>
</html>
You may also have seen the # notation used in a URL fragment identifier to refer to named anchors (<a name="some-anchor"></a>). These can also point to elements with certain IDs in your page, just like named anchors, and I gather that it's why CSS uses the same notation for selecting IDs.
The selector, #foo will match any element with an ID attribute with a value of "foo".
<style type='text/css'>
#foo { color: red; }
</style>
<div id='foo'>red text</div>
In CSS,
# is Mention for ID Selector
. is Mention for Class Selector
You might also have seen something like
div#myDiv {}
Which means "a DIV-tag with ID set to 'myDiv'"
It selects based on the id of html element...
http://www.w3.org/TR/CSS2/selector.html#id-selectors
<style>
#myDiv { }
</style>
<div id="myDiv">
</div>