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
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;
}
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'm trying to put multiple links on the same line so I can have a whole bar of links, I've tried this:
<h2 style="font-family:tempus sans itc;">Home</h2> <h2 style="font-family:tempus sans itc;">Hills Pupil Tailored Website</h2>
but when I test to see if it works, these two links are on seperate lines, does anyone know how I can get them on the same line?
Simply add:
h2{
display: inline;
}
To your CSS and the problem will be solved.
That's because of h2 display property which is block.
Try with:
h2 {
display: inline-block;
}
or
h2 {
display: inline;
}
at the beginning of your file (enclosed by <style> tags) or in your stylesheet file.
See Typical default display properties here
Alternatively replace "h2" with for example "span" and the links will be on the same line.
or you could put:
<h2 style="font-family:tempus sans itc;">Home Hills Pupil Tailored Website</h2>
Putting all the links within one h2 tag instead of using one for each link.
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; }