I am tring to do some text display bold in web with HTML.
<p>HELLO</p>
My Required output is :- HELLO.
You can bold a text in multiple ways.
Way 1:
<strong>This text is bold</strong>
Way 2:
<p>Your username for your new computer is <b>JohnAppleseed</b></p>
Way 3 (Using CSS):
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
Resources you can follow to learn more W3School TutorialPoint
strong is the HTML tag to do that. Refer to W3Schools.
<strong>HELLO</strong>
Related
Text figures, as Wikipedia calls them, are something that sometimes makes text more readable. Normal-sized numbers usually stand out much more than the rest of the text. Especially in text that is in small-caps, the big numbers don't fit that well. How would I have smaller numbers in text using CSS?
An example of where I'd like to have smaller numbers:
.smallcaps {
font-variant: small-caps;
}
<p class="smallcaps">Example smallcaps 1337 text.</p>
<p>Another text with 42 numbers in it.</p>
What you are asking for are sometimes called "lowercase numerals" but, among typographers, are most often called "old style numerals" or "old style figures". That's what they're called in OpenType.
Some fonts support old style figures by default and some support them as alternate glyphs. In OpenType fonts that support them as alternate glyphs, they would be selected by activating the 'onum' feature.
In CSS, when using a font that supports oldstyle figures via the 'onum' feature, these can be selected using font-variant-numeric: oldstylenums. See https://www.w3.org/TR/css-fonts-4/#font-variant-numeric-prop for reference.
You can change text (numbers) size with css font-size property and span tag.
Like this :
.smallcaps {
font-variant: small-caps;
}
.num {
color :red;
/* font-size: smaller; */
/* font-size: x-small; */
font-size: xx-small;
}
<p class="smallcaps">Example smallcaps <span class="num">1337</span> text.</p>
<p>Another text with <span class="num">42</span> numbers in it.</p>
<p class="smallcaps">Example smallcaps 1337 text.</p>
<p>Another text with 42 numbers in it.</p>
Say we have a text paragraph (p, div or what have you):
Be nice. The world 🌎 is a small town 😄
I would like the text in it to be italic, but emoji to have a normal font-style without wrapping the emoji or any other text in additional tags.
Be nice. The world 🌎 is a small town 😄
<p><i>Be nice. The world</i> 🌎 <i>is a small town</i> 😄<p>
In my opinion, better way is to wrap emoji icons in an inline element like <span> and style in css.
.emoji {
font-style: normal;
}
p {
font-style: italic;
}
<p>Be nice. The world <span class="emoji">🌎</span> is a small town <span class="emoji">😄</span></p>
the simplest way is :
<p><i>Be nice. The world</i> :) <i>is a small town</i> :P </p>
alternatively you can use css to style.
You can use any of these
x{
font-style: italic;
}
span{
font-style: italic;
}
<p><x>Be niceThe world </x> ☎ <x>is a small town </x> ☎</p>
<p><span>Be niceThe world </span> ☎ <span>is a small town </span> ☎</p>
I have am using CSS to sytle part of my text font to bold. But I don't want the whole line to be bold. Just part of the text. How can I achieve this? Here is my code:
HTML
<div>
<div id="titleLabels">Revision:</div> 1.0 draft A
</div>
CSS
#titleLabels
{
font-weight: bold;
}
The output of this is this:
This is not what I want. I want the "1.0 draft A bit to be inline with the bit that says Revision".
How can I go about doing this?
Just add display:inline to #titleLabels:
#titleLabels {
font-weight: bold;
display:inline;
}
<div>
<div id="titleLabels">Revision:</div>1.0 draft A
</div>
Divs by default are block level elements and will take up the full width of their parent element unless you alter that.
A more logical solution would be to not use divs on the revision text and instead use either <strong>, <b> or a <span> with the font-weight styled.
#titleLabels {
font-weight: bold;
}
<div>
<b>Revision:</b>1.0 draft A
</div>
<div>
<strong>Revision:</strong>1.0 draft A
</div>
<div>
<span id="titleLabels">Revision:</span>1.0 draft A
</div>
Use display:inline-block
#titleLabels
{
font-weight: bold;
display:inline-block;
}
<div>
<div id="titleLabels">Revision:</div> 1.0 draft A
</div>
You can use a <b> tag to simply set a certain segment of text as bold
<div>
<b>Revision:</b> 1.0 draft A
</div>
I have to increase the size of a word in a middle of a normal font-size sentence.
<p class="call">To book a consultation click here or call NOW</p>
How can I enlarge the NOW word in CSS? If I create new paragraph the word will go to the new line.
Any advice appreciated.
<p class="call">To book a consultation click here or call <span class='bigger'>NOW</span></p>
with CSS
.bigger { font-size:200%; }
Decide why you want it to be bigger (the point is HTML is to describe semantics, not presentation, so you need to think about this sort of thing)
Write appropriate semantic markup
Apply CSS
Perhaps:
<p class="call">To book a consultation click here or call <em>now</em></p>
and in your stylesheet:
em { /* or .call em, but you should aim for consistency in your styling */
font-style: normal;
font-size: 120%;
text-transform: uppercase;
}
This will also work
<p> This is some <b> TEXT </b><p>
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.