I am using Visual Developer 2008 Express Edition
StyleSheet.css
body {
font-size: 12px;
color: blue;
font-family: arial, helvetica, verdana, sans-serif;
text-decoration: underline;
}
.button{
font-weight: bold;
font-size: 14px;
color: red;
background-color: yellow;
font-family: arial, helvetica, verdana, sans-serif;
}
.label{
font-weight: bold;
font-size: 18px;
color: green;
font-family: arial, helvetica, verdana, sans-serif;
}
CssDemo.aspx
When I view CssDemo.aspx in Browser (IE 10) I get
Why isn't the .button and .label overwriting body in CSS?
In CSS dot . means class in HTML, if you want to style tag directly, leave the dot in CSS.
button {...}
label {...}
or use your IDs
#Button1 {...}
#Label1 {...}
Related
Absolutely simple, yes?
No, not really: the following (as I understand it) should work to give me multiple href class selectors under one id in CSS but does not work (the first code block is the default, followed by the code block for, in this case, one other class):
#layoutA a:link {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a:visited {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a:hover {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a:active {
color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a:focus {
color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA .class1 a:link {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA .class1 a:visited {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA .class1 a:hover {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA .class1 a:active {
color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA .class1 a:focus {
color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}
...so I need to know if this is actually possible in CSS (and, if so, how?), or whether I should just continue using different ids for every href link that needs styling with a different colour scheme?
Depending on your structure your code works.
According to your CSS, any links that you want styled by class1 has to be wrapped in a wrapper with that class.
However, if you are giving the link itself the class, I have included a set of styles as class2 to give an example on how to do that properly.
#layoutA a:link {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a:visited {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a:hover {
color: green; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a:active {
color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a:focus {
color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA .class1 a:link {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA .class1 a:visited {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA .class1 a:hover {
color: black; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA .class1 a:active {
color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA .class1 a:focus {
color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a.class2:link {
color: black; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a.class2:visited {
color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a.class2:hover {
color: green; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a.class2 a:active {
color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}
#layoutA a.class2:focus {
color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}
<div id="layoutA">
This is styled by the first set
<div class="class1">This is styled by class1</div>
<a class="class2" href="#">This is styled by Class2</a>
</div>
Having issues with my custom MyFonts font rendering in Safari and mobile browsers. Chrome and Firefox are fine.
Font files and MyFontsWebfontsKit.css files are in the right place, with the files called correctly in the master stylesheet. Font files include .eot .woff. woff2 .ttf .svg.
URL: http://geltor.com
The correct font shows up in Chrome and Safari on my Mac, but Safari and all mobile browsers default to the sans-serif backup. Would appreciate any pointers on getting the correct Brasley font to display everywere. Thanks!
MyFontsWebfontsKit.css:
#import url("//hello.myfonts.net/count/391209");
#font-face {font-family: 'Brasley-Bold';src: url('webfonts/391209_0_0.eot');src: url('webfonts/391209_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_0_0.woff2') format('woff2'),url('webfonts/391209_0_0.woff') format('woff'),url('webfonts/391209_0_0.ttf') format('truetype'),url('webfonts/3927A3_A_0.svg') format('svg');}
#font-face {font-family: 'Brasley-Light';src: url('webfonts/391209_1_0.eot');src: url('webfonts/391209_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_1_0.woff2') format('woff2'),url('webfonts/391209_1_0.woff') format('woff'),url('webfonts/391209_1_0.ttf') format('truetype'),url('webfonts/3927A3_2_0.svg') format('svg');}
#font-face {font-family: 'Brasley-Thin';src: url('webfonts/391209_2_0.eot');src: url('webfonts/391209_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_2_0.woff2') format('woff2'),url('webfonts/391209_2_0.woff') format('woff'),url('webfonts/391209_2_0.ttf') format('truetype'),url('webfonts/3927A3_0_0.svg') format('svg');}
#font-face {font-family: 'Brasley-BoldItalic';src: url('webfonts/391209_3_0.eot');src: url('webfonts/391209_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_3_0.woff2') format('woff2'),url('webfonts/391209_3_0.woff') format('woff'),url('webfonts/391209_3_0.ttf') format('truetype'),url('webfonts/3927A3_B_0.svg') format('svg');}
#font-face {font-family: 'Brasley-Medium';src: url('webfonts/391209_4_0.eot');src: url('webfonts/391209_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_4_0.woff2') format('woff2'),url('webfonts/391209_4_0.woff') format('woff'),url('webfonts/391209_4_0.ttf') format('truetype'),url('webfonts/3927A3_6_0.svg') format('svg');}
#font-face {font-family: 'Brasley-LightItalic';src: url('webfonts/391209_5_0.eot');src: url('webfonts/391209_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_5_0.woff2') format('woff2'),url('webfonts/391209_5_0.woff') format('woff'),url('webfonts/391209_5_0.ttf') format('truetype'),url('webfonts/3927A3_3_0.svg') format('svg');}
#font-face {font-family: 'Brasley-ThinItalic';src: url('webfonts/391209_6_0.eot');src: url('webfonts/391209_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_6_0.woff2') format('woff2'),url('webfonts/391209_6_0.woff') format('woff'),url('webfonts/391209_6_0.ttf') format('truetype'),url('webfonts/3927A3_1_0.svg') format('svg');}
#font-face {font-family: 'Brasley-SemiBold';src: url('webfonts/391209_7_0.eot');src: url('webfonts/391209_7_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_7_0.woff2') format('woff2'),url('webfonts/391209_7_0.woff') format('woff'),url('webfonts/391209_7_0.ttf') format('truetype'),url('webfonts/3927A3_8_0.svg') format('svg');}
#font-face {font-family: 'Brasley-Regular';src: url('webfonts/391209_8_0.eot');src: url('webfonts/391209_8_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_8_0.woff2') format('woff2'),url('webfonts/391209_8_0.woff') format('woff'),url('webfonts/391209_8_0.ttf') format('truetype'),url('webfonts/3927A3_4_0.svg') format('svg');}
#font-face {font-family: 'Brasley-MediumItalic';src: url('webfonts/391209_9_0.eot');src: url('webfonts/391209_9_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_9_0.woff2') format('woff2'),url('webfonts/391209_9_0.woff') format('woff'),url('webfonts/391209_9_0.ttf') format('truetype'),url('webfonts/3927A3_7_0.svg') format('svg');}
#font-face {font-family: 'Brasley-SemiBoldItalic';src: url('webfonts/391209_A_0.eot');src: url('webfonts/391209_A_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_A_0.woff2') format('woff2'),url('webfonts/391209_A_0.woff') format('woff'),url('webfonts/391209_A_0.ttf') format('truetype'),url('webfonts/3927A3_9_0.svg') format('svg');}
#font-face {font-family: 'Brasley-RegularItalic';src: url('webfonts/391209_B_0.eot');src: url('webfonts/391209_B_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_B_0.woff2') format('woff2'),url('webfonts/391209_B_0.woff') format('woff'),url('webfonts/391209_B_0.ttf') format('truetype'),url('webfonts/3927A3_5_0.svg') format('svg');}
Style.css excerpt:
<style>
p, h2, h3, h4, h5, a {
color:#1a2f5a;
font-family: "Brasley", sans-serif !important;
font-size: 1em;
line-height: 1.25em;
-webkit-font-smoothing: antialiased;
}
article .title-link a {
color: #1a2f5a;
}
.bbx-bullet-link.type-2 {
color: #1a2f5a;
}
.Brasley-Bold {
font-family: Brasley-Bold;
font-weight: normal;
font-style: normal;
}
.Brasley-Light {
font-family: Brasley-Light;
font-weight: normal;
font-style: normal;
}
.Brasley-Thin {
font-family: Brasley-Thin;
font-weight: normal;
font-style: normal;
}
.Brasley-BoldItalic {
font-family: Brasley-BoldItalic;
font-weight: normal;
font-style: normal;
}
.Brasley-Medium {
font-family: Brasley-Medium;
font-weight: normal;
font-style: normal;
}
.Brasley-LightItalic {
font-family: Brasley-LightItalic;
font-weight: normal;
font-style: normal;
}
.Brasley-ThinItalic {
font-family: Brasley-ThinItalic;
font-weight: normal;
font-style: normal;
}
.Brasley-SemiBold {
font-family: Brasley-SemiBold;
font-weight: normal;
font-style: normal;
}
.Brasley-Regular {
font-family: Brasley-Regular;
font-weight: normal;
font-style: normal;
}
.Brasley-MediumItalic {
font-family: Brasley-MediumItalic;
font-weight: normal;
font-style: normal;
}
.Brasley-SemiBoldItalic {
font-family: Brasley-SemiBoldItalic;
font-weight: normal;
font-style: normal;
}
.Brasley-RegularItalic {
font-family: Brasley-RegularItalic;
font-weight: normal;
font-style: normal;
}
.colorblock-dblue {color: white; background-color: #1a2f5a; padding:1em; width: 200px; margin-bottom: 1em;}
.colorblock-mblue {color: white; background-color: #515d7d; padding:1em; width: 200px; margin-bottom: 1em;}
.colorblock-lblue {color: white; background-color: #c2c9d3; padding:1em; width: 200px; margin-bottom: 1em;}
.colorblock-pink {color: white; background-color: #fee9df; padding:1em; width: 200px; margin-bottom: 1em;}
.colorblock-dpink {color: white; background-color: #CF7475; padding:1em; width: 200px; margin-bottom: 1em;}
body {color:#1a2f5a; font-family: "Brasley-Regular", sans-serif; font-size: 1em; line-height: 1.25em; -webkit-font-smoothing: antialiased;}
a {color: inherit;}
a:hover {color: #CF7475; text-decoration: none;}
.menuitem {font-size: 1em; text-transform: uppercase; letter-spacing: .5em !important;}
.header-headline {font-size: 2.5em; line-heght: 3em; line-height: 1.25em; font-family: "Brasley-Medium", sans-serif;}
.header-body {font-size: 1.25em; line-height: 1.8em;}
.bluebox {background-color: #515d7d; padding: 1em; }
.bluebox-headline {font-size: 1.25em; line-height: 1.25em; font-family: "Brasley-Regular"; text-transform: uppercase; letter-spacing: .25em; color:#fee9df; }
.bluebox-body {color:#fee9df; line-height: 1.8em;}
.section-title {font-size: 1.25em; line-height: 1.5em; font-family: Brasley-Bold; text-transform: uppercase; letter-spacing: .25em;}
.section-headline-dblue {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium";}
.section-headline-mblue {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium"; color: #515d7d;}
.section-headline-dpink {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium"; color:#CF7475;}
.section-subhead {font-family: "Brasley-Bold";}
.body-dblue {color:#1a2f5a;}
.body-mblue {color: #515d7d;}
.CTA {font-family: "Brasley-Medium";}
.Button-dblue {color:#fee9df; padding:.5em; padding-bottom: .4em; width: 200px; background-color: #1a2f5a; text-align: center; text-transform: uppercase; letter-spacing: .5em; }
.Button-mblue {color:#fee9df; padding:.5em; padding-bottom: .4em; width: 200px; background-color: #515d7d; text-align: center; text-transform: uppercase; letter-spacing: .5em; }
.legal {font-size: .75em; color:#515d7d;}
.footer {background-color: #2E4368; padding: 1em;}
.footer-menutitle {text-transform: uppercase; letter-spacing: .5em; font-family: "Brasley-Bold"; color: #fee9df; }
.footer-menuitem { font-size: .85em; color: #fee9df;}
</style>
From what I can see on your website, only the sans-serif fallback is used right now. Brasley is not currently displayed. If however you change the name of the font to "Brasley-Regular", it does work.
Basically switch this :
font-family: "Brasley", sans-serif !important;
To
font-family: Brasley-Regular, sans-serif !important;
FYI, you don't need quotes around font family names, it's only needed when the font name has spaces or other in its name (such as "Proxima Nova" for example). See this question for more information.
Even thought i have the following rule, it doesn't seem to apply for the footer
a:link, a:visited {
padding: 0 1px;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size:15px;
}
Check here
I tried to add the following but doesn't seem to work
.footer span a:link a:visited {
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
}
This rule looks for an a nested within another a within the footer
.footer span a:link a:visited {
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
}
You instead want to style the same link in different states (which you separate with a comma):
.footer span a:link,
.footer span a:visited {
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
}
When I tried using
.footer span a {
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
}
it works for me
I have h1 h2 and a for the text formatting.
In fact....h2 and a are identical,but I'd like to change a to non-bold text.
How can I do that?
here is my what I have put together so far:http://jsbin.com/tifuhute/44/
Set font-weight: normal;
to your css class:
#text h2 {
color: #151515;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
font-weight: normal;
}
I am using below CSS for my button
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
width: 50px;
}
Here if you will check ,i am using width: 50px; but i want the width of button shuold be flexible it should change width according to text size if button text is Submit then button width will small but if text is something like this Post Your Question now button width should change.
How can we achieve this with css ?
If you are using a div then you need to set it to display:inline-block then you do not need to set a width.
DEMO http://jsfiddle.net/kevinPHPkevin/kw3La/
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
padding: 10px;
display:inline-block;
width: auto !important;
}
Do it like this: demo
CSS:
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
padding:2px 6px;
}
html:
<button class="ui-button-text">Submit</button>
<button class="ui-button-text">Post your question</button>
However if you're talking about overriding the css that is coming from .ui-button-text, then do as here : http://jsfiddle.net/bcqPG/1/
CSS:
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
width:50px;
}
button.ui-button-text{
width:auto;
padding:2px 6px;
}