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.
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
I can't really remember why this structure within CSS is used?:
h2.class-name
Seems that you could just write out .class-name and just give that the class for the h2:
<h2 class="class-name">Title thing</h2>
Unless the reason for it is if you cannot edit the HTML. So this would be it, right?:
<div class="class-name">
<h2>Title thing</h2>
</div>
I guess I'm just "fuzzy" on what the reasoning would be for that particualr CSS structure.
h2.class-name means, select all the <h2> elements that have the class 'class-name', consider the following:
p.red {
background-color: red;
color: white;
}
h2.red {
color: red;
text-decoration: underline;
}
<p class="red">
RED PARAGRAPH
</p>
<h2 class="red">RED HEADING 2</h2>
Notice that both the <p> and the <h2> have the class 'red', but its implementation is different for each element, so if a <p> has the class 'red', style it this way, and if an <h2> has the class 'red' style it that way.
There are lots of reasons someone might use that construct. The ones that spring to mind are:
To distinguish between members of the class-name class that are h2 elements and members of it which are some other kind of element.
To control specificity as h2.class-name is more specific than .class-name.
To make it clear to people reading the CSS what elements that class is supposed to be applied to
Unless the reason for it is if you cannot edit the HTML. So this would be it, right?:
No. That would require the use of the child or descendant combinators.
.class-name h2 {}
I am styling a wordpress child-theme and the code below is what I am dealing with. each div is within the previous. It ends with a div then a h2. the last two our my additions to the code. I want to style the text in the h2 tag. when I use a id or class and go into the style sheet and type
#tag {
**Styles i want here**
}
or do it as a class, it wont register. How do I format it? I left the div and h2 without an id or class because idk how to format it like I said
<head>
<body>
<div clas="main-container">
<div id="page">
<div class="content">
<aside class="sidebar c-4-12">
<div id="sidebars">
<div class="sidebar_list">
<div>
<h2>TEXT HERE I WANT TO STYLE</h2>
ID of element should be unique. And because it's unique, you just have a CSS codes like below:
#your-id {
// Your css codes
}
It should work, but we should not use ID for styling element, class name instead.
In your case, your codes should be something like:
.content h2 {
// your css codes
}
Somehow, your h2 tag have a styling with higher priority. Then you can use !important in each of properties. But it's not a best practice for us.
.content h2 {
color: #fff !important; //Example code
}
By the way, I see wrong syntax in your code: clas="main-container", please correct class attribute
Thanks
If I have the following piece of CSS:
p {
color:red;
}
This will apply to all P html elements. Is there a way I can also assign a class based selector to that same css object? So I could then also have <h1 class="redText"> which would also use the css object above - as well as it applying to all <p> elements?
Use .redText,p to select everything with a class of "redText", and every "P" element. The . is the class selector, so .redText matches every thing with that class. Use a comma to separate multiple element matches.
.redText,
p {
color: red;
}
<h1 class="redText">Red Text!!!!!</h1>
<p>Red text!</p>
<h1>Normal text!!!</h1>
I want to create a div that contains three words, and I want one of the words in the div to be emphasized in a different font and size. Is it possible to override the default <strong> in that div's class so that I can just use, for example, hello there <strong> world for the word "world" to be emphasized differently to the other "strong-ed" words that aren't in the div?
You can set styles to strong tags:
strong{
font-weight:normal;
}
Use another selector before strong to apply it to strong tags inside certain tags.
I would recommend changing it from strong to the inline element <span>. This will give you all the control you need.
<div id="myid">hello there <span>world</span></div>
#myid span {properties:values}
Don't forget to ad in which container you are. So you can still use <strong> element elsewhere.
<div id="container">
hello there <strong> world </strong>
</div>
#container strong
{
font-weight: normal;
color: red;
}