HTML:
<div id="e_ticket_info" class="e_ticket_font" runat="server" Visible="False">
<p>
Some text.
</p>
</div>
CSS:
.e_ticket_font {
font-weight: normal;
}
The HTML code is on content page, which is inside master page.
The issue is - the text is bolded out, but it shouldn't be.
How can I can get rid of it?
Try
.e_ticket_font p {
font-weight: normal;
}
because you are not targetting p tag.
Dipesh's answer is correct. I'll just add a bit explanation. CSS is cascading style sheet, means the style for any element/class/id can be mentioned at multiple places and applied in the order in which they are included. In your case, some other style seems to override your style to make it bold since your snippet will not make it bold.
Considering this, as a general best practice, always target the specific elements if you are not sure if it's class will be styled somewhere else or not.
Thus, .e_ticket_font p {... is prferable than .e_ticket_font {.... If there are multiple paragraphs and you want only some of them to be different, then again use classes/ids, like
.e_ticket_font p#heading {...
.e_ticket_font p#content {...
.e_ticket_font p.specialpara {
and so on.
Another way to make it sure is to apply css inline for that element, but this should not be used generously for many elements as it affects the "structure should be separate than presentation" principle
<div runat="server" Visible="False">
<p class="e_ticket_font">
Some text.
</p>
</div>
CSS:
.e_ticket_font {
font-weight: normal !important;
}
try inline css because if you don't know if there are other css classes are specified in masterpage for <P>
something like:
<div runat="server" Visible="False">
<p style="font-weight: normal;" >
Some text.
</p>
</div>
it will work for sure, then you can check for other css references for <P>
or (for each) element below .e_ticket_font:
.e_ticket_font * {
font-weight: normal;
}
i advice a rare use of !important in case of runaway bubbling your DOM
but mind of the selector detail.. if there is any css selector which describes the object on a directer way like...
.e_ticket_info#e_ticket_info {
font-weight: bold;
}
...css will pick that one with privileg!
Related
So I've been coding for a week and I have googled for 30 min trying to find a solution. So excuse me if it's already been asked. I'm trying to write a summary of what I've learned after each lesson but it's not working!
<body> <center> h1> Module 40 </h1> </center>
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
</body>
And my CSS is this:
p
{
font-size: 15px;
}
/*****class selector*****/
.p1
{
font-size: 20px;
}
Shouldn't the class selector override the tag selector? Font size 15px is being applied to the whole text. It works if I add class="p1" to the second paragraph. But shouldn't this work if I add it to the div? Isn't that the purpose of having a div?
Must be .p1 p
p
{
font-size: 15px;
}
/*****class selector*****/
.p1 p
{
font-size: 20px;
}
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
This happens because of Specificity. Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
You can find one of the most useful documentations here -
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
No because your paragraph is a child of .p1
All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)
You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag
After a migration of an existing Content Management System i have some problems with existing classes - sometimes the Richtext Editor created the following HTML Code:
<span style="font-weight: bold; "><a href=""....>
Now, the Link is not bold, but i dont know if it is possible to overwrite any rule in CSS when having a custom inline Style property.
Is there any chance (without changing the HTML Code) to make the link as bold text?
Thanks in advance for any help.
Thanks for the first comments - but to be sure i want to add the "bold" tag only when ill have this "special" inline property. So i dont want to overwrite all classes with bold text.
When i have
<span><a style="font-weight: bold;">....</a>
Everthing is fine, the Link is bold
But when i have
<span style="font-weight: bold;">....
The link is NOT bold (but it should be bold).
This is little stupid Code from the Richtext Editor.
Original:
Use !important :
span {
font-weight: normal !important;
}
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
Edit:
This means that in your CSS, there is somewhere :
span {
font-weight: normal !important;
}
You need to overwrite it by selecting the span with more specificity than the declaration in the current css, e.g:
/* somewhere in the css you can't modify */
span {
font-weight: normal !important;
}
/* the css you add */
.container span {
font-weight: bold !important;
}
<div class="container">
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
</div>
The is because classes, ids, attributes, etc all have a score which add up to see which declaration will be used.
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
- smashingmagazine.com
And here is an cheat sheet :
I want to create a div that contains three words, and I want one of the words in the div to be emphasized in a different font and size. Is it possible to override the default <strong> in that div's class so that I can just use, for example, hello there <strong> world for the word "world" to be emphasized differently to the other "strong-ed" words that aren't in the div?
You can set styles to strong tags:
strong{
font-weight:normal;
}
Use another selector before strong to apply it to strong tags inside certain tags.
I would recommend changing it from strong to the inline element <span>. This will give you all the control you need.
<div id="myid">hello there <span>world</span></div>
#myid span {properties:values}
Don't forget to ad in which container you are. So you can still use <strong> element elsewhere.
<div id="container">
hello there <strong> world </strong>
</div>
#container strong
{
font-weight: normal;
color: red;
}
I realize that in the modern day, most people use CSS to perform styling, and will have CSS define what H2 looks like.
However, please imagine that I'm trying to make my text looks like it is the default appearance of <h2>, but have it on a line with other text.
Is it possible to do this in HTML4?
Alternatively, is it possible to emulate it using CSS?
Assume I am NOT setting a style on <h2> directly.
By default, all HTML headings (<h1> to <h5>) are displayed as block. This means a heading will be in a separate line if there is other elements surrounding it.
You can change that with CSS by applying display: inline to your heading. If you need it to keep some block behavior (like having a certain width, for example), you can use display: inline-block instead.
Give a try to that:
<!DOCTYPE html>
<html>
<body>
<style>
.h2{
font-size: x-large;
font-weight: bold;
display: inline;
}
</style>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p class="h2">This is heading 2</p>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
And you should disable your current styles applying to the current h2.
For example: color: black !important; (if it's defined)
You can make the h2 display inline with the following CSS:
h2 { display: inline; }
Demo
You could just use a <span> on the text in question and add an h2 class to the span.
Example on jsfiddle
.header2{
font-size: 120%;
}
The way to do it in HTML4 (which is what the question was primarily about) is to use two-cell table:
<table><tr valign=baseline><td><h2>Your heading</h2> <td>Other text</table>
Not many people would recommend this these days.
Note: The only way to ensure that the default rendering of h2 (which is browser-dependent, though tends to follow similar lines) is to refrain from using any CSS rule that could apply to an h2 element. I don’t see any particular reason to want to achieve that, though, perhaps on a page that discusses HTML rendering in browsers, or something similar.
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.