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; }
Related
I am using meteor and mongo there is a template I am using the h2 tag to display the header. But I want to change the font size of this h2 tag. I tried in CSS but it is not taking. if I refresh the page it will take the previous values. So can anyone suggest me how to solve this issue?
There are multiple ways to do this
1. Using inline css
just do
<h2 style="font-size:40px !important;"></h2>
2. Using Internal css
<style>
h2{
font-size:40px !important;
}
</style>
Using External css
just assign a class to your h2 element and add size to that class on external css
<h2 class="headding"></h2>
and then
.headding{
font-size:40px !important;
}
you can use size like **40px,40%,40vw,**etc.
First define your CSS of with h2 tag at end of header's file and add code like that
!important; is override all previous values
you must have to write !important at end of line to override previous value
<style>
h2 {
font-size: 20px !important;
}
</style>
Using large is a bad practice that should be avoided as much as possible. Instead, work on the accuracy of the selector used, like this little example :
<div class="my_container">
<div class="other_class">
<h2>
</div>
</div>
And...
.my_container {
.other_class {
h2 {
// your override
}
}
}
So you have to be more precise than the old selector to get your hands on it.
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
I changed markup in one page like this,
before change
<div class="header-wrapper header">
<h1 wicket:id="headerTitle" class="dealer-name">Excellence Holden</h1>
</div>
after change
<h1 class="header-wrapper header">
<span wicket:id="headerTitle" class="dealer-name">Excellence Holden</span>
</h1>
after changing the mark up the font size of "Excellence Holden" is increasing .It will happen or I am doing something wrong ?
css code:
.header-wrapper {
padding:15px 0;
}
.header-wrapper .dealer-name {
text-align: center;
font-size: 1.3em;
}
After the change, the font size set on the inner element, 1.3em, changes its meaning. The reason is when used in the value of the font-size element, the em unit denotes the font size of the parent element. Here the parent element is an h1 element, and the common and recommended browser default is that h1 element has a font size of 2em, i.e. twice its parent’s font size.
To override this effect, add the following:
h1.header-wrapper { font-size: 1em; }
You need to change the font size of the span in css, find the font defined for h1 then apply the same font to the tag
Because if you do not reset the font-size for h1, it automatically is higher than normal.
I would say that is a CSS related,
usually the new CSS files contains Font (Size, Family, weight) properties for <h1> tags.
please check both h1 and span CSS Attributes. you can use the browser inspectors (Chrome Inspect Element) to see the actual attributes.
It's because of your styling. When changing HTML like this you need to ensure that the styling is also changed accordingly.
For example:
div.header { font-weight:bold; }
div.header h1 { font-size:24px; }
The above CSS would be applied to the first HTML snippet, but not the second. You'd have to change this to:
h1.header { font-weight:bold; }
h1.header span { font-size:24px; }
And also ensure that there is no other h1 or span styling that may affect this.
Is there a CSS selector to target elements with inline styles? So can I target the first span but not the 2nd with CSS only?
If not, can this be done with jQuery?
http://jsfiddle.net/TYCNE/
<p style="text-align: center;">
<span>target</span>
</p>
<p>
<span>not target</span>
</p>
A bit late to the tea party but thought I would share the solution I found & use.
#simone's answer is perfect if you can match the style attribute exactly. However, if you need to target an inline style attribute that may have other inline styles associated with it you can use:
p[style*="text-align:center;"]
"*=" means "match the following value anywhere in the attribute
value."
For further reference or more detailed information on other selectors see this blog post on css-tricks.com:
The Skinny On CSS Selectors
http://css-tricks.com/attribute-selectors/#rel-anywhere
p[style="text-align: center;"] {
color: red;
}
However this is ugly.
If you would like to apply styles to a particular rule declaration you can also use style*. This will match all elements that have the inline style, regardless of the value applied.
div[style*="background-image"] {
background-size: cover;
background-repeat: no-repeat;
}
use :
p[style] span {
color: red;
}