What does CSS property 'strong' define? - html

Like this:
strong {
font-style: italic;
text-transform: uppercase;
}
In exactly which area will it work?

That will target the <strong> element, giving it italics and forcing all text to uppercase. Not recommended as either the <i> or <em> tags are more semantically-correct.

It work for html tag.
<strong></strong>
This tag is similar to bold html tag.
<b></b>

Edit
The <strong> tag is a phrase tag. It defines important text. - w3schools
strong {
font-style: italic;
text-transform: uppercase;
}
Will target all <strong></strong> elements content in it's target <html> page and italice the text content and also make the text content uppercase
This means everytime you use the <strong> tag it'll have these extra effects.

Related

Default rules of HTML elements - is it a part of HTML standard?

Create simple web page like this one:
<h1>Heading</h1>
<p>Simple text. <strong>Bold</strong> text.</p>
and open it in any mainstream web browser. The rendering will be the same: the heading will be large and bold, the text in strong tag will be just bold.
Are these default CSS-rules (h1 { font-size: large; font-weight: bold; } strong { font-weight: bold; }) a part of HTML standard?
(Yes, I know, technically these CSS-rules comes from stylesheet which is built in the browser, but this information doesn't directly answer my question).

Change CSS of first <strong>

I want to change the CSS of <strong> element as below:
<p><strong>Make it Bold</strong><p>
<p>This is dummy text<strong>Do not make it BOLD</strong></p>
<p><strong>Make it Bold 2</strong><p>
<p>This is dummy text<strong>Do not make it BOLD 2</strong></p>
Can I somehow make a change <strong> CSS where I have written 'Make it Bold', the <strong> elements should only be bold if there is no text between the opening <p> tag and the opening <strong> tag1.
.strong{
font-size: 30px;
}
I tried it with above CSS but I know it will change all strong elements; how can I achieve my particular requirement?
P.S.: I cannot any additional classes
Paraphrased from the following comment:
[I] want element to be bold only if string exists right after <p>.. if there is any text before strong then that strong tag shall not be turned bold.
Quoted from comment, below: Change CSS of first <strong>.
The :first-of-type selector allows us to target the 1st occurence of an element inside it's container.
p strong:first-of-type {
font-size: 30px;
}
I hope I helped some people who are facing the same situation
you can give a class or id to your strong element.
In your current code there are no classes.
You can use, for example:
<p><strong class="big">Make it bold</strong></p>
And in css
.big{
font-size: 30px;
}
Use the :first-child pseudo-class. JSFiddle...
:first-child strong {
font-size: 40px;
}

<pre> tag not styling

I want to style text on my website inside a <pre> tag but it will never work.
I have tried putting this in my CSS:
pre {
font-family: Georgia;
}
And I have also tried putting it inline like this:
<pre style=”font-family: Georgia;”>
But none of these work, the font stays as monospace.
These things work here, but not on my website.
Why is this happening? If there is no solution, is there an alternative to the <pre> tag which lets me have line breaks?
I had two stylesheets on one page which caused the pre text to be monospace. Removing one of them fixed the issue.
try important
pre {
font-family: Georgia !important;
}
<pre style=”font-family: Georgia !important;”>
you can also use the class selector to style the pre tag with CSS.
HTML code
<pre class="code"> Text Here </pre>
CSS code
.code { font-family: Georgia; background-color: #A8CBFF; }
You can check out more uses on an article I wrote here

Is there any way to remove italic effect <i> tag using CSS?

How do I remove italic effect of <i> tag so I can do this:
<span>
test<i>test</i>
</span>
I am filling some text in the <i> tag using jQuery innerHtml, so it comes in italic, but I don't want the italic effect.
Is there any way I can remove the italic effect using CSS?
I cant use a different tag. I can only use the <i> tag.
You just need to use this CSS code:
.no-italics {
font-style: normal;
}
HTML code:
<span>
test
<i class='no-italics'>test</i>
</span>
Use font-style:
i {
font-style: normal;
}
You can do any formatting with CSS.
Like:
b {
font-weight: normal;
}
will change bold text to normal.
Similarly,
i {
font-style: normal;
}
will make <i> font style as normal (non-italic).
You can use the CSS style font-style: normal to get that effect. Then you can do your jQuery to put text in the tag:
$('i#replace').html('this text isn\'t italicized either . . . ');
i {
font-style: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span>text text <i id="replace">this is NOT italic</i> text text</span>
Use font-style to reset the italic style when the class is used.
i.no-italics {
font-style: normal;
}
<i class="no-italics">Olmstead v. L.C. and E.W</i>

Styling Text without HTML Tag?

Is there anyway to style Plain text without HTML tag in HTML.
Example: like I type in HTML some plain text say
hello world -> Can I style this plain text without any tag
and not like
<div> Hello World </div>
Plain text is contained within an element: the body element:
<body>
Hello, world!
</body>
Because of this, you could style this text by simply styling the body element:
body {
color: red;
text-decoration: underline;
}
Depending on the context though, CSS3 does provide two pseudo-element selectors which could be used for this: :first-line and :first-letter.
To style the "H" you could simply use:
body:first-letter {
font-size: 32px;
}
If there was a <br> element separating your first line from another line, you could also make use of :first-line:
<body>
Hello, world!<br>
Second line.
</body>
body:first-line {
font-style: italic;
}
JSFiddle demo.
You will need to use a span or something of that nature to target certain parts of text. With only the use of css a tag is required to style the text.
You can achieve that effect like so with span,
<p>I can style <span>this</span> text with the use of a tag</p>
p span {
color: teal;
}
I found this article on adding an underline to certain words. With the use of a script you could tweak this around to work how you want it to and without you adding an html tag by hand. Instead the jQuery will be adding the tag for you.