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;
}
Related
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.
I have the following a HTML code:
<div>
<p> linux version</p>
<h1> new tool </h1>
And some CSS for it that should select <h1> but does not select anything.
*:not(div p) {
font-family: sans-serif;
}
The following does not work too:
*:not(div>p) {}
I have so many such <div> <p> in the HTML whereas the following selects and apply the font:
div p {
font-family: sans-serif;
}
As others have stated in the comments: the usage of the not selector is like this:
E:not(s) - an E element that does not match simple selector s
where
A simple selector is either a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.
So if you want you code to work you'll have to add a class to the <p> elements which you don't want styled with that font-family.
*:not(.classname) {
font-family: sans-serif;
}
Alternatively: If you need to apply a font to all your elements - it is generally done by setting it in the body element, then the other elements in the document inherit that rule.
Then you can style your <p> elements within the div differently.
body
{
font-family: sans-serif;
}
div p
{
/* the special font-family that you need for paragraphs within a div */
}
<div>
<p> linux version</p>
<h1> new tool </h1>`
</div>
Now consider the following CSS code-
*:not(div p) {
font-family: sans-serif;
}
This code selects all elements except the <p> inside <div>. So a <div> is also selected by the selector *:not(div p) and hence all the contents of the <div> gets the style: font-family: sans-serif. So the text in the <p> element in the <div> also gets the style.
N.B. You should keep track so that two CSS declaration don't contradict each other. Then if such contradiction arises the declaration that applies some style wins over the declaration that forbids that style to be applied on that element.
Hence the following code will run fine
div>:not(p)
{
font-family: sans-serif;
}
This selector will select the elements inside a <div> except <p>-elements. So you may use this instead.
Well, it won't be exactly the same thing, but in this case you can use
div>*:not(p)
instead of
*:not(div>p)
Demo
It seems in your question, that given the markup:
<div>
<p>linux version</p>
<h1> new tool </h1>
</div>
<h1> elements are the special ones. So be specific. Rather than define styles for "all-but-me" (as you do with "*:not(div p)" clause) set and standard for "all-of-them" and then you overwrite the one you consider special. Just like here:
div {
font-family: serif;
}
div > h1 {
font-family: sans-serif;
}
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.
I have a problem thats kinda driving me nuts. I have an article container and within are several paragraphs. The first paragraph contains a drop cap. This first paragraph does not use text-indent, however every following paragraph does.
When I begin a new paragraph following a h3-header, I don't want any text-indent. Fine, I can get this to work (blue text in example).
My problem is this, when I begin a new paragraph with a header (strong followed by a break), this line will use the text-indent of the paragraph, and I don't want it to. I must have the strong tags inside the paragraph (as one should), not outside.
I'm thinking of a way to select all paragraphs that start with a strong tag. I don't want to use any javascript to solve this. I want to change the text-indent of the paragraph, not the position of the strong text.
I've made a jsFiddle here. I have tried something like this:
p>strong {
color:#f0f;
text-indent: 0 !important;
}
You can add a negative margin to the strong tag, though I assume you'll want a specific class on it.
strong.subhead {
margin-left: -3em;
}
Working example at: http://jsfiddle.net/J5C86/2/
However, this is also assuming you don't want the paragraph associated with the strong tag indented. If you're looking for the paragraph under the subheading to be indented as well, you'll need another tag on the first word or letter after the br.
span.subhead-indent {
margin-left: 3em;
}
Example: http://jsfiddle.net/J5C86/4/
To expand on my comment on your question:
If there's a reason you can't use <h4> - which would be the more suitable tag here - you can simply add a negative margin to your <strong> element:
p > strong:first-child {
margin-left:-3em;
}
JSFiddle example.
Otherwise, use <h4> instead:
<h4>Strong sub header</h4>
<p>Aliquam semper placerat urna...</p>
h3+p, h4+p {
text-indent:0;
margin-top: 0;
padding-top: 0;
}
h3+p {
color:#00f;
}
JSFiddle example with <h4>.
It works for me. Use this:
p>strong {
text-indent: 0 !important;
color: #f0f;
display: block;
}
After doing this, Remove the br tag at the last of p>strong.
Demo
I saw your problem and found that you have not included your paragraph within the h3 tag, so define your css with your strong paragraph with a class for eg.
<p class="no-indent"><strong>Strong Sub Header</strong></p>
define your css this must work.
Hi
I am having a style class for font tag, If size of the attribute is 1. I am setting the following style.
font[size = 1]
{
font-size : small;
}
It works in FF , chrome but not in IE
Can anyone explain how to make that work in IE?
The font tag is deprecated and should die.
Please use paragraph tags (<p>), or span (<span>) to style specific text inside a paragraph tag instead.
<style type="text/css">
.pClass{
color:red;
}
.spanClass{
font-size:small;
}
</style>
<p class="pClass">This is <span class="spanClass">my paragraph</span>, it contains text</p>
The <font> tag has been deprecated and probably won't work as you expect. This is old, old, old technology. You should wrap it in a span or other element (depending on usage) with a class:
HTML
<span class="myClass">Text example here!</span>
CSS
.myClass
{
font-size: small; /*whatever you need*/
}
This is supported by all browsers as it's standard CSS.
:)
I would recommend to not use the font tag at all. It has no semantic meaning.
A better way would be to create a class that holds your desired font style. You can then simply assign this class to any element that you want to apply that style to.
E.g.:
CSS
.smallType {
font-size: small;
}
HTML
<p class="smallType">Hey, look at me! I'm small!</p>
What if you specify 1pt like font[size = 1pt] { font-size : small; }