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).
Related
I'm working on creating an email notification within helpdesk software, Sysaid. The software uses HTML markup for its email notifications in combination with email tags starting with $ to act as stand-ins for information submitted within the software. The below tags
$Approve
$Deny
$LinkToSubTab
should all turn into links. and while they do- the first two become pre-wrapped hyperlinks that come with the example text and the last one is just a normal link. Ideally I want to make them all act as buttons, but putting the pre-wrapped $tag breaks the html of all the ways of implementing buttons or styling I've tried. I've found that I can change stuff like the font- size of said hyperlinks by adding the <font size=50> tag before the link, but haven't had success yet with attaching stylings or text decorations to said links. To be clear, this isn't about the Sysaid software itself but rather finding a way to style a hyperlink that comes premade from an email tag, from outside of the tag. the tag $Approve becomes an <a href='link'>Text<a> that's premade, and attempting to fit it into a button or text decoration (in my limited understanding) breaks the element.
While I've never worked with the software you're describing, if you want to style an HTML hyperlink you could try using CSS to apply styles based on a wrapper element:
/*This will directly effect the a tag*/
.hyperlink-wrapper a {
color: green;
}
<div class="hyperlink-wrapper">
Link
</div>
Not for sure how you want them styled but you can do a lot with CSS. Here are two basic examples:
.custom-link a {
font-family: Arial;
font-size: 32px;
/* Remove Underline */
text-decoration: none;
color: black;
}
.button a {
padding: 16px;
/* Remove Underline */
text-decoration: none;
font-size: 22px;
font-family: Arial;
color: white;
background-color: #60ca60;
border-radius: 5px;
transition: background-color 0.2s;
}
.button a:hover {
background-color: #57b357;
}
<div class="custom-link">
Click Me
</div>
<br><br>
<div class="button">
Button
</div>
The way the code is structured, adding a $Approve in place of the a tag won't break it. If you need help putting this code in your email, want different styles, or need inline hyperlinks (this will break the paragraph) just comment below.
TLDR: Using CSS is there a way to force all no header tags to use a specific font?
So I work for a school district and we are trying to unify our website look and feel. We have a small problem though, all of our teachers have access to change the font family and size of their content. We really don't mind when they do this with their headers or when they make their font slightly bigger for emphasis. The problem we are finding is that they are choosing outrageous hard to read fonts.
Now I know using !important with the * in css will force will force this across all fonts (Yes I am aware we really shouldn't use !important). However, this doesn't allow users to use custom fonts for headers (h1, h2, h3, h4, h5 and h6 tags). Is there a way that we can force the font family to be something specific without forcing it on the header tags.
Teachers are trained not to do this, but there is no way to punish or scold them if they do this. So training it out of the question. I am also one person who maintains stuff like this and it is only a fraction of my job and we have over 1000 teachers, so it is really hard for me to enforce.
So now you know my problem and why it is a problem. Any advice would be appreciated.
TLDR: Using CSS is there a way to force all no header tags to use a specific font?
You can use :not. Heres a small example. You can see the Header tags are a different font family than the paragraph tag (added some coloring and such).
h1, h2, h3, h4, h5, h6{
font-family: sans-serif;
color: red;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
font-family: Serif;
color: blue;
}
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
Use the :not pseudoclass
Set a default style, and then override it for the editable font...
* {
font-family: sans-serif;
font-style: normal;
color: #000;
}
*:not(h1):not(h2):not(h3) {
font-family: 'courier';
font-style: italic;
color: red;
}
<h1>Default font</h1>
<h2>Default font</h2>
<p>Changed font</p>
<h3>Default font</h3>
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 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