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.
Related
For example, could I wrap all <p> elements in <b> tags so <p>Hello</p> would be rendered as if it were <b><p>Hello</p></b>?
I tried using ::before and ::after like this:
p::before {
content: "<b>";
}
p::after {
content: "</b>";
}
but the tags were escaped. Is there some way to do this?
No. This would be a misuse of CSS. CSS is not designed to alter markup, but to augment it with styling. If you could do what you are suggesting, we developers would all be in a living hell.
You have some options:
Option 1
Wrap the content you want to make bold in a container
Give that container a class
Write a CSS class to make that container's content bold
e.g.
Original HTML
<html>
<h1>My content<h1>
</html>
New HTML
<html>
<section class="bold">
<h1>My content<h1>
</section>
</html>
<style>
.bold {
font-weight: bold
}
</style>
Option 2
If you can't alter the markup
Find a selector that will select the content you want
Write a CSS class to make that container's content bold
<html>
<h1>My content<h1>
</html>
<style>
h1:first-of-type {
font-weight: bold
}
</style>
Note the :first-of-type for an example of specificity selector.
You can simply use the font-weight property. Adding tags like this is not possible with CSS.
Example:
p {
font-weight: bold;
}
Documentation here.
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;
}
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
How can I create a single-line text with different colors in it in HTML? Like inner div tags with different style attributes in it. Is it possible?
Thanks in advance.
Try to separate parts with the same color to the span tags with different styles. Span is more suitable than div here, because span is only considering line formatting, not the whole block of code.
Otherwise, using pure HTML for styling text is not recommended and it's generally considered to be a very bad practise.
Example:
HTML
<html>
<head>
<title>Colors</title>
</head>
<body>
This text will be <span class="g">green</span> and <span class="b">blue</span>.
</body>
</html>
CSS
.g {
color: green;
}
.b {
color: blue;
}
I'm currently stuck at a probably very trivial problem:
I have a simple HTML/CSS page with a text:
<head></head>
<body>
This is a Text about Foobar.
</body>
How is it possible to assign a CSS-class/id to the word Text without breaking the format? Let's say I want to add the class .yellow to it, which displays the text with a yellow background.
I think I got something blocking my mind cause it can't be that difficult... But all I can google (mostly trivial tutorials) uses CSS just on usual HTML-elements like <p> or <b> which would break my format.
I think you are missing out on <span> tag.
Try this out:
<head></head>
<body>
This is a <span class="yellow">Text</span> about Foobar.
</body>
And in CSS:
.yellow{
color:yellow;
}
Use an inline element. Span is purpose build for that. Alternately, if you wish to have semantic meaning behind your highlighted section, you can re-style <em> or <strong> with something like:
strong.highlight{
font-weight:normal;
font-style:normal;
background:yellow;
}
You just need to wrap the section in a span like:
<span>This is a <span class='yellow'>Text</span> about Foobar.</span>
See a working example here http://jsfiddle.net/dZZfB/
Hope that helps
The HTML for Example:
<center><span class="t1">Test1</span></center>
The CSS:
<style type="text/css">
.t1 {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
</style>