All, I was confused by the CSS specificity when encountered with the below code .
Say we have below two css file defined.
In the A.css file
#BizIdName
{
font-family: Arial;
font-size: 13 px;
font-weight: normal;
color: #333;
text-decoration: none;
}
In the B.css file
A {
font-size: 1em;//browser setting is 16px.
}
The Html is below.
<a id="BizIdName" href="#">xxxx</a>
Based on the CSS specificity, the class in A.css is higher specificity than the one in the B.css .
So I think if both files are linked in a single Html page. the higher specificity class would overwrite the lower one.
But I don't know why the font-size: 13 px; doesn't work. It shows in 16px instead of 13px. I don't know if I missed something . If I did, Please kindly tell me why. thanks.
The problem is the whitespace between the 13 and the px. Remove it, then it should work:
#BizIdName
{
font-family: Arial;
font-size: 13px;
font-weight: normal;
color: #333;
text-decoration: none;
}
Related
font: SemiBold 14px/17px Basier Square;
I am trying to copy styles of a text from Adobe XD and it shows me font-size as above, I am confused, should I interpret it as 14px or 17px?
Answer: Font-size = 14px, Line-Height = 17px;
It is not Adobe specific, it's simple HTML definition
Reference: From Mozilla Docs, we can understand that
If font is specified as a shorthand for several font-related properties,
then-->
line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
font: SemiBold 14px/17px Basier Square;
That would be
.element {
font-family: 'Basier Square';
font-weight: 600; /* SemiBold */
font-size: 14px;
line-height: 17px;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Back to basics, I have neglected my CSS skills thus my CSS is a bit (very) rusty I'm working on a wordpress theme. The style.css themes default H2 style is coded as follows:
h2 {
font-size:1.7em;
background:url(images/heading_bg.gif) repeat top;
color: #fff;
padding:6px;
border-bottom:3px solid #e40001;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
font-weight:normal;
}
This result in any <h2> tag inserted into a post looking like this:
This provides a nice look in the theme however in certain situations I would just like to have a basic unstyled <h2> tag thus I created the following class:
.normal{
font-size:1.4em;
font-weight:bold;
color="red";
font-family: 'Oswald', sans-serif;
}
MY Problem - What I want to Achieve
I would like to overwrite the default <h2> style of the theme in certain situations however if I add the above class to any <h2> tag the .normal class is ignored and it keeps on displaying the normal h2 rule....why is this? What am I missing? How can I overwrite the default h2 style at certain types?
This the snippet I worked out. Doesn't seems a problem to me. Go through this code carefully.
PS: color="red"; is wrong. Use
when you want to override some element, you gotta look at the rules used in that element. ie, you gotta remove the background if any, change margin, paddings etc.
color:red;
h2 {
font-size: 1.7em;
background: url(http://i.stack.imgur.com/pOVzy.jpg) repeat top;
color: #fff;
padding: 6px;
border-bottom: 3px solid #e40001;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: normal;
}
.normal {
font-size: 1.4em;
font-weight: bold;
color: red;
font-family: 'Oswald', sans-serif;
background: none;
}
<h2>
hello
</h2>
<h2 class="normal">
Hello World
</h2>
You should mention all css properties of h2 in your .normal class, thus it will be something like this:
.normal {
font-size:1.4em;
background:none;
color: #FF0000;
padding:0px;
border-bottom:none;
text-transform:initial;
font-family: 'Oswald', sans-serif;
font-weight: bold;
}
you can use the below code:
h2.normal{
font-size:1.4em;
font-weight:bold;
color="red";
font-family: 'Oswald', sans-serif;
}
which means h2 has a class normal then overwrite the styling
You may do one of these:
use .normal selector after h2 in your css file (assuming they have same specificity)
use !important in your .normal decleration
.normal{ propert: value !important; }
add some specifity to the .normal selector like:
h2.normal{ bla bla ...}
I have used this code to style the links in my menu
a.special {
color: #464646;
outline: 0;
font-family: 'Raleway', sans-serif;
font-size: 17px
}
Unfortunately I have other links in the middle of text which have also changed. After reading this: https://stackoverflow.com/questions/1743355/how-can-i-make-different-html-links-different-colors I think it might work but do not know how to apply "a.special" to a link.
If I was to make the code
a {
color: #FFFFFF;
outline: 0;
font-family: 'Raleway', sans-serif;
font-size: 10px
}
Then I need to apply it to the link.
How would I go about this?
Thanks for all your time.
You would apply the special class using the class HTML attribute:
I am special!
The the selector a.special will match, and those rules will be used to style the link.
You can't make a heading 7, because there's only six different HTML headings (h1, h2, h3, h4, h5 and h6; reference: http://www.w3schools.com/tags/tag_hn.asp), but you can make a heading 6 with this CSS code:
h6.special { color:#464646; outline:0;
font-family:Raleway, sans-serif; font-size:17px; }
and this HTML code:
<h6 class="special">I am special!</h6>
PS: I removed the single quotes. You only need to use quotes if the font name consists of two words or more, for example 'Times New Roman'.
I'm trying to use Bootstrap inside a sharepoint site. Unfortunately the CSS styles are applying to the template's HTML which is messing with the design a fair amount.
I know that everything I want affected by bootstrap is within #s4-workspace - does anyone know any CSS tricks I can use to apply bootstrap only to children of that element?
I'm not beneath shudder recompiling the LESS code encasing it like so:
#s4-workspace {
#import "reset.less"
// etc
}
But, naturally, I'd like to find a better solution if I can. That particular approach also doesn't seem to work.
I cannot alter the CSS of the Sharepoint master site.
Any advice welcome!
Thanks,
The only real way of doing this is by using iframes or jQuery, if you want to apply only specific elements of the bootstrap perhaps edit the CSS rules so they apply to a different ID/Class.
For example, where it says body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
In the bootstrap.css file simply change it to read .bootbody(or#bootbody) {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
Joseph Silber said it better in this question.
I'm trying to make a pseudo link class with the CSS3 text-shadow for both navigation and normal use of links.
The problem is that the state "a:hover" is overruling "a:visited" so when doing a mouseover on the link that previously has been visited, it outputs different that it should.
If the a:visited state isn't present in the CSS the color of the visited links will turn into the standard purple color, which I don't like it to.
Have a look at the site: www.sayhi.dk
The code looks like this:
HTML
<a class="lnk" href="http://www.twitter.com/sayhidk">#Sayhi.dk</a>
CSS
a.lnk:link {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}
a.lnk:hover {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow: 1px 1px #7c7565;
color:#ffffff;
}
a.lnk:visited {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:#ffffff 1px 1px 1px;
color:#7c7565;
text-decoration:none;
}
a.lnk:active {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}
Hope that you guys can help me out.
In your example, specifying 'color' in the :visited style is sufficient.
Edit: the solution was to put a.lnk:visited before a.lnk:hover.
This may or may not help, but I never define a:link styles. I instead define an "a" style (no pseudo class), and styles get inherited nicely. Then I define :hover, :active, etc... And if I do not define one for a particular style, the catch-all "a" style gets applied.
It is also good practice to define a :hover as well as a :focus. They can be the same style if you like. The :focus is used in a limited way by the iOS and handicapped users who don't use a mouse but use a keyboard to navigate.