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.
Related
So I've been coding for a week and I have googled for 30 min trying to find a solution. So excuse me if it's already been asked. I'm trying to write a summary of what I've learned after each lesson but it's not working!
<body> <center> h1> Module 40 </h1> </center>
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
</body>
And my CSS is this:
p
{
font-size: 15px;
}
/*****class selector*****/
.p1
{
font-size: 20px;
}
Shouldn't the class selector override the tag selector? Font size 15px is being applied to the whole text. It works if I add class="p1" to the second paragraph. But shouldn't this work if I add it to the div? Isn't that the purpose of having a div?
Must be .p1 p
p
{
font-size: 15px;
}
/*****class selector*****/
.p1 p
{
font-size: 20px;
}
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
This happens because of Specificity. Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
You can find one of the most useful documentations here -
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
No because your paragraph is a child of .p1
All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)
You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag
From MDN it says:
The HTML <div> element is the generic container for flow content and does not inherently represent anything.
It also says:
The HTML <span> ... does not inherently represent anything.
However, my code shows div and span do inherit color attribute from body tag:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body{
color: red;
text-align: center;
}
</style>
</head>
<body>
<div>
test div
</div>
<span>test span</span>
</body>
</html>
In the above code, both test div and test span are red and centered. So how to interpret MDN's word?
Start with a dictionary. Inherent (with an en) and inherit (with an i) are different words with different meanings.:
inherently
In a permanent, essential, or characteristic way.
The sentences are talking about the semantics expressed by the elements. They have absolutely nothing to do with CSS inheritance:
inherit
Derive (a quality, characteristic, or predisposition) genetically from one's parents or ancestors
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.
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.
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>