Is it possible to override <strong> properties within a CSS class only? - html

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;
}

Related

Why is my class selector not overriding tag selector?

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

Selecting strangely nested elements

I can't seem to find a situation similar enough that I can figure out a solution. Without changing the html and adding classes and ids how can I select the a tag and the pre tag from the following code? I've included my attempts.
div.info p.c6 span a {
background-color: red;
}
p.c6 span pre {
background-color: blue;
}
<div class="info">
<h1 class="c4">
<a name="h.6q469n2havqi"></a><span>Title</span>
</h1>
<p class="c6">
<span>
<pre>
words
</pre>
<br>
Top of Page
<br>
</span>
</p>
</div>
Because the p element can only contain phrasing content, and in this case it contains flow content, the browser is closing the element and invalidating your selectors.
In short, the pre element is flow content and cannot be contained inside a p element. Therefore, the browser is overriding your HTML structure to maintain valid mark-up. Here's what it looks like:
The browser has essentially converted your p descendants into p siblings.
You need to restructure your HTML for your selectors to work.
If you can't change the HTML, a sibling selector will work.

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.

Can I use a pseudo-selector to style individual words?

If i have something like
<p id="something">My Text Here</p>
Is it possible to use some kind of pseudo-selector in CSS to apply a style only to certain text elements from my text?
Example, i want:
"My" to be color: red;
and "Text" color: blue;
No, this is not possible.
There are pseudo-selectors such as :first-letter and :first-line, but you cannot select invidual words without wrapping them in elements that you can individually style:
<p id="something">
<span class="foo">My</span>
<span class="bar">Text</span>
<span class="baz">Here</span>
</p>
You'd then be able to style them individually:
.foo {
color: #ff0000;
}
.bar {
color: #00ff00;
}
.baz {
color: #0000ff;
}
No. If you want parts of the text to have different colors, you 'll have to wrap them inside separate elements (most likely, ''s). For example:
<p id="something"><span class="red">My</span> <span class="blue">Text</span> Here</p>
And of course this will also need the appropriate CSS for .red and .blue.
The exception to the above are the pseudo-selectors :first-letter and :first-line, but these do not offer any flexibility.
You can use first letter pseudo class for styling first letter
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
But you cant use pseudo class for 2nd "text" you have to wrap this in a html tag & style it separately.
Not possible with Styling words differently.
Other users already told you that it is not possible natively.
If you use jQuery, as I assume from your tag, you can do a little trickery from JavaScript and "tokenize" the text in the P tag with:
$("p").html($.map($("p").text().split(" ")​,function (i,e) {return "<span id='w"+e+"'>"+i+"</span>";}).join(" "));
This command takes a selector (p in this case, but you can use p#myId and so on) and substitutes every word:
This is a sentence
becomes
<span id='w0'>This</span>
<span id='w1'>is</span>
<span id='w2'>a</span>
<span id='w3'>sentence</span>
So you could use a CSS like:
p span.w2 {color: red;}
to color the third word.

HTML element aside from headers <h1><h2>, ect

I was browsing related issues for my question but I can't seem to find the answer for it. Anyways, I want to know if I can still use the p or div tags instead of header tags when I have already used both (p and div tags) as plain text on my site. The reason is that I only want to have one header tag h1 present in my site. I tried to tweak some parts and got lost along the way. Sadly, after a couple of testing, it did not work... I was wondering if it's possible or if there's any other HTML tag that I can use other than header tag. Any response from you guys will be very much appreciated. =)
You can make a <p> look however you like, for example:
<p class="header">This is a header</p>
with
p.header { font-size: 200%; font-weight: bold; }
but I would recommend against it. The reason is that HTML is (ostensibly) semantic so if you declare:
<h3>This is a header</h3>
you're actually saying (semantically) that the given text is a heading of some sort. Remember you have <h1> through <h6> and you can pick and choose which of them you use. There is no need to use <h1> to use <h2> and so on.
This is also useful for those visually impaired as something styled as a heading won't be indicated as such to those using screen readers but a heading will be. You should cater for accessibility issues where possible.
You should not style a div, span, or p to look like a heading and then use it in place off an h1-h6. That is exactly contrary to the spirit behind the rule of thumb that you shouldn't have more than one h1 on a page.
<span> is a useful addition, as well.
You can use P and DIV tags over and over. If you need to, style them to look like H1's.
p.title {
font-size:18px;
font-weight:bold;
}
p.header2 {
background: url("bg.jpg");
}
--
<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>
<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>
Don't forget to remember SEO on your site. Presumably this is why you only want one H1 tag?
<span> <strong> and <em> are others you can use inside your <p> tags.
i would use <div> or <span> tags and use ids or classes to control the style. use ids if there is only once instance or classes if you want to repeat this style. you can also use multiple classes on one element
for example
<div id="text">Text Here</div>
<span class="red">This would be red</span>
<div class="red big">This would be big and red</div>
with css
#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }
hope this helps
You can use multiple h1's or h2's and just target them like this:
<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>
#header h1{ color:red;}
#main h1{ color:blue;}
It's not quite what you're asking. I suspect Google is a bit smarter than single H1 approaches.