CODEWITHSUNDEEP
htmlcsstags
Buda Gavril
Buda Gavril

Reputation: 21657

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?

Upvotes: 1

Views: 392

Answers (2)

BradleyIW
BradleyIW

Reputation: 1358

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.

Upvotes: 1

Quentin
Quentin

Reputation: 944530

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.

Upvotes: 0

Related Questions