I've only just found out about CSS today and have been learning about it. Not quite sure if I've got the gist of it yet but cold someone check this and tell me if it looks ok or what mistakes I've made or even just how to tidy it up.
<style type="text/css">
BODY {background-image: url("sidestripe.bmp"); background-repeat: repeat-y}
BODY {background-color: black}
p {color: #FFFFFF}
p {font-family: desdemona}
p {font-style: bold}
</STYLE>
I'll confess that I copied and pasted some of it because On 2 different websites it tells you how to do it in different ways.The real place to go for information about CSS is the CSS2 Specification (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2/</a><!-- m -->).
For CSS to wrk right, you first need valid HTML and you can check that with the HTML Validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->). Once your page passes that then you can check your CSS with the CSS Validator (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->).Cheers. Was looking for that validator thingy earlier on.For a little more simplicity, consider combining your attributes together for one tag:
<style type="text/css">
BODY {
background-image: url("sidestripe.bmp");
background-repeat: repeat-y;
background-color: black;
}
p {
color: #FFFFFF;
font-family: desdemona;
font-style: bold;
}
</STYLE>
Also, note that there are some over-arching properties that can be used to combine multiple, similar definitions if desired (I don't know that either method is particularly better, this just saves some typing):
BODY { background: url("sidestripe.bmp") black repeat-y; }
P { font: bold normal 14pt desdemona, serif; }Great! That's what I was after. Hmm. Looks like in a wee while my website might actually be worth the effort. I ran the home page through the validatior and HOLY **** did it have a lot of mistakes. Mainly relating to it having too many <OL>'s together.Originally posted by NogDog
BODY { background: url("sidestripe.bmp") black repeat-y; }
P { font: bold normal 14pt desdemona, serif; }
u forgot the color attribute, so it would be p { font: bold 14pt desdemona, serif; color: #fff; }
also, stating normal isnt really necessary<style type="text/css">
<!--
BODY {
background-image: url("sidestripe.bmp");
background-repeat: repeat-y;
background-color: black;
}
p {
color: #FFFFFF;
font-family: desdemona;
font-style: bold;
margin-left: 10px;
}
-->
</STYLE>
Is there Anything wrong with this CSS? This (<!-- m --><a class="postlink" href="http://www.freewebs.com/ccstester">http://www.freewebs.com/ccstester</a><!-- m -->) is the page that it should be affecting. Is there anything wrong in the link to the CSS? I'm aware that I misspelled CSS in the name of the site. I know, I know. I might as well just give up now.
Just discovered htmldog.com and it's answering a lot of the questions that I would otherwise be asking. I'll bone up on this before posting anymore daft questions.
Check out <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator">http://jigsaw.w3.org/css-validator</a><!-- m --> for validation of CSS. (I posted your last sample, and it pointed out that "font-style: bold;" is wrong. You want "font-weight: bold;".)Erm don't want to embarrass anyone but I just copied and pasted NogDog's CCS there. I managed to work it out now. Here it is. Not bad for 2 days learning CSS eh?BODY {
background-image: url("sidestripe.bmp");
background-repeat: repeat-y;
background-color: black;
margin-left: 170px;
color: white;
font-family: ariel;
font-weight: bold;
}
p {
}
H1 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 0.05em;
border-bottom-length: 2em;
border-bottom-color: white;
color: white;
margin: 1em;
}
H2 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 0.05em;
border-bottom-color: white;
color: white;
margin: 1em;
}
I'll run that one through the validator. Cheers.Sweet. Only 1 error and 1 warning. What would a generic font family be? would that be serif or sans-serif?Originally posted by Dopple
Sweet. Only 1 error and 1 warning. What would a generic font family be? would that be serif or sans-serif?
serif | sans-serif | monospace | cursive | fantasyNice. I'm starting to twig onto all this malarky.
Originally posted by Dopple
Erm don't want to embarrass anyone but I just copied and pasted NogDog's CCS there.
Bah! If I actually thought I was some sort of expert, I might be embarrassable (is that a word?). CSS is just another tool I use in my "jack of all trades, master of none" world. (And any code I post here is, "As is, no explicit or implied warranty, etc...."
)Originally posted by Dopple
Erm don't want to embarrass anyone but I just copied and pasted NogDog's CCS there. I managed to work it out now. Here it is. Not bad for 2 days learning CSS eh?BODY {
background-image: url("sidestripe.bmp");
background-repeat: repeat-y;
background-color: black;
margin-left: 170px;
color: white;
font-family: ariel;
font-weight: bold;
}
p {
}
H1 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 0.05em;
border-bottom-length: 2em;
border-bottom-color: white;
color: white;
margin: 1em;
}
H2 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 0.05em;
border-bottom-color: white;
color: white;
margin: 1em;
}
I'll run that one through the validator. Cheers.
lets compress this a little. It could do the same and look like the following:
BODY {
background: black url("sidestripe.bmp") repeat-y;
margin-left: 170px;
color: white;
font: bold ariel, serif;
}
H1, H2 {
text-align: left;
border-bottom: solid .05em white;
color: white;
margin: 1em;
}
much simpler and takes up less space. hope this helps someIt does. Cheers very much.Originally posted by pawky
font: bold ariel, serif;
Maybe you want arial, not ariel?Originally posted by TimeBandit
Maybe you want arial, not ariel?
eh, yea
thx For some reason the font is showing as Times New Roman instead of Arial. Can someone see where I'm going wrong? Is Times the default font for IE or something?
BODY {
background: black url("sidestripe.bmp") repeat-y;
margin-left: 170px;
color: white;
font: bold arial, sans-serif;
}
H1, H2 {
text-align: left;
border-bottom: solid .05em white;
color: white;
margin: 1em;
}I noticed for an image you used a .bmp. It's much more preferable to use .jpg and .png. They take up WAY less band width.
Oh and fonts are a total ball ache.Just changed them all around. It'll probably be a nippy one getting them all changed from .bmp to .jpg. ThanksI changed the .bmp files to .jpg but still haven't been able to work out how to fix this bloody font style. I split the font part into 2 to get this
BODY {
background: black url("sidestripe.jpg") repeat-y;
margin-left: 170px;
color: white;
font-family: arial, sans-serif;
font-weight: bold;
}
H1, H2 {
text-align: left;
border-bottom: solid .05em white;
color: white;
margin: 1em;
}
And this apparently doesn't work either. I can't see for the life of me what I'm doing wrong. The rest of the CSS is working just fine. It's just the fecking font.Forget that type style (unless you want to dowload it), it will not display on the user's machine and you may not be happy (or fit properly) with its replacement.
Arial/Helvetica/Tahoma/Courier/Times/Comic Sans and a hand full of others have a fair chance.
RFSet the font-family property in the H tag - it has inline precedence over the body tag.It doesn't matter what I change the font to the bloody website just won't change! There isn't any in line style either. I'll just leave it as it is.You're not showing the text code - are you closing the h tags properly? You have two of them, are they nested properly?
Times Roman is the windows default font. Since you've spec'd 'sans'
its clear that your instruction is not passing to the tag.
Take the font properties out of the body tag and put them inline. I assure you, if your font is installed, it will work at that point. Then step it back to the h tag. If it fails, the problem is there, if not, the problem would be in the body tag, but body tag looks fine.
This is a simple problem that will piss you off when you fix it - don't give up on it.
RFWell I've managed to get the font changed using in line styles on all of the pages. I'm just going to leave it as is because I don't think I'll ever be changing the fonts and even if I do it wont take 2 minutes to change them all.
<style type="text/css">
BODY {background-image: url("sidestripe.bmp"); background-repeat: repeat-y}
BODY {background-color: black}
p {color: #FFFFFF}
p {font-family: desdemona}
p {font-style: bold}
</STYLE>
I'll confess that I copied and pasted some of it because On 2 different websites it tells you how to do it in different ways.The real place to go for information about CSS is the CSS2 Specification (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2/</a><!-- m -->).
For CSS to wrk right, you first need valid HTML and you can check that with the HTML Validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->). Once your page passes that then you can check your CSS with the CSS Validator (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->).Cheers. Was looking for that validator thingy earlier on.For a little more simplicity, consider combining your attributes together for one tag:
<style type="text/css">
BODY {
background-image: url("sidestripe.bmp");
background-repeat: repeat-y;
background-color: black;
}
p {
color: #FFFFFF;
font-family: desdemona;
font-style: bold;
}
</STYLE>
Also, note that there are some over-arching properties that can be used to combine multiple, similar definitions if desired (I don't know that either method is particularly better, this just saves some typing):
BODY { background: url("sidestripe.bmp") black repeat-y; }
P { font: bold normal 14pt desdemona, serif; }Great! That's what I was after. Hmm. Looks like in a wee while my website might actually be worth the effort. I ran the home page through the validatior and HOLY **** did it have a lot of mistakes. Mainly relating to it having too many <OL>'s together.Originally posted by NogDog
BODY { background: url("sidestripe.bmp") black repeat-y; }
P { font: bold normal 14pt desdemona, serif; }
u forgot the color attribute, so it would be p { font: bold 14pt desdemona, serif; color: #fff; }
also, stating normal isnt really necessary<style type="text/css">
<!--
BODY {
background-image: url("sidestripe.bmp");
background-repeat: repeat-y;
background-color: black;
}
p {
color: #FFFFFF;
font-family: desdemona;
font-style: bold;
margin-left: 10px;
}
-->
</STYLE>
Is there Anything wrong with this CSS? This (<!-- m --><a class="postlink" href="http://www.freewebs.com/ccstester">http://www.freewebs.com/ccstester</a><!-- m -->) is the page that it should be affecting. Is there anything wrong in the link to the CSS? I'm aware that I misspelled CSS in the name of the site. I know, I know. I might as well just give up now.
Just discovered htmldog.com and it's answering a lot of the questions that I would otherwise be asking. I'll bone up on this before posting anymore daft questions.Check out <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator">http://jigsaw.w3.org/css-validator</a><!-- m --> for validation of CSS. (I posted your last sample, and it pointed out that "font-style: bold;" is wrong. You want "font-weight: bold;".)Erm don't want to embarrass anyone but I just copied and pasted NogDog's CCS there. I managed to work it out now. Here it is. Not bad for 2 days learning CSS eh?BODY {background-image: url("sidestripe.bmp");
background-repeat: repeat-y;
background-color: black;
margin-left: 170px;
color: white;
font-family: ariel;
font-weight: bold;
}
p {
}
H1 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 0.05em;
border-bottom-length: 2em;
border-bottom-color: white;
color: white;
margin: 1em;
}
H2 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 0.05em;
border-bottom-color: white;
color: white;
margin: 1em;
}
I'll run that one through the validator. Cheers.Sweet. Only 1 error and 1 warning. What would a generic font family be? would that be serif or sans-serif?Originally posted by Dopple
Sweet. Only 1 error and 1 warning. What would a generic font family be? would that be serif or sans-serif?
serif | sans-serif | monospace | cursive | fantasyNice. I'm starting to twig onto all this malarky.
Originally posted by Dopple Erm don't want to embarrass anyone but I just copied and pasted NogDog's CCS there.
Bah! If I actually thought I was some sort of expert, I might be embarrassable (is that a word?). CSS is just another tool I use in my "jack of all trades, master of none" world. (And any code I post here is, "As is, no explicit or implied warranty, etc...."
)Originally posted by Dopple Erm don't want to embarrass anyone but I just copied and pasted NogDog's CCS there. I managed to work it out now. Here it is. Not bad for 2 days learning CSS eh?BODY {
background-image: url("sidestripe.bmp");
background-repeat: repeat-y;
background-color: black;
margin-left: 170px;
color: white;
font-family: ariel;
font-weight: bold;
}
p {
}
H1 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 0.05em;
border-bottom-length: 2em;
border-bottom-color: white;
color: white;
margin: 1em;
}
H2 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 0.05em;
border-bottom-color: white;
color: white;
margin: 1em;
}
I'll run that one through the validator. Cheers.
lets compress this a little. It could do the same and look like the following:
BODY {
background: black url("sidestripe.bmp") repeat-y;
margin-left: 170px;
color: white;
font: bold ariel, serif;
}
H1, H2 {
text-align: left;
border-bottom: solid .05em white;
color: white;
margin: 1em;
}
much simpler and takes up less space.
hope this helps someIt does. Cheers very much.Originally posted by pawky font: bold ariel, serif;
Maybe you want arial, not ariel?Originally posted by TimeBandit
Maybe you want arial, not ariel?
eh, yea
thx For some reason the font is showing as Times New Roman instead of Arial. Can someone see where I'm going wrong? Is Times the default font for IE or something?BODY {
background: black url("sidestripe.bmp") repeat-y;
margin-left: 170px;
color: white;
font: bold arial, sans-serif;
}
H1, H2 {
text-align: left;
border-bottom: solid .05em white;
color: white;
margin: 1em;
}I noticed for an image you used a .bmp. It's much more preferable to use .jpg and .png. They take up WAY less band width.
Oh and fonts are a total ball ache.Just changed them all around. It'll probably be a nippy one getting them all changed from .bmp to .jpg. ThanksI changed the .bmp files to .jpg but still haven't been able to work out how to fix this bloody font style. I split the font part into 2 to get this
BODY {
background: black url("sidestripe.jpg") repeat-y;
margin-left: 170px;
color: white;
font-family: arial, sans-serif;
font-weight: bold;
}
H1, H2 {
text-align: left;
border-bottom: solid .05em white;
color: white;
margin: 1em;
}
And this apparently doesn't work either. I can't see for the life of me what I'm doing wrong. The rest of the CSS is working just fine. It's just the fecking font.Forget that type style (unless you want to dowload it), it will not display on the user's machine and you may not be happy (or fit properly) with its replacement.
Arial/Helvetica/Tahoma/Courier/Times/Comic Sans and a hand full of others have a fair chance.
RFSet the font-family property in the H tag - it has inline precedence over the body tag.It doesn't matter what I change the font to the bloody website just won't change! There isn't any in line style either. I'll just leave it as it is.You're not showing the text code - are you closing the h tags properly? You have two of them, are they nested properly?
Times Roman is the windows default font. Since you've spec'd 'sans'
its clear that your instruction is not passing to the tag.
Take the font properties out of the body tag and put them inline. I assure you, if your font is installed, it will work at that point. Then step it back to the h tag. If it fails, the problem is there, if not, the problem would be in the body tag, but body tag looks fine.
This is a simple problem that will piss you off when you fix it - don't give up on it.
RFWell I've managed to get the font changed using in line styles on all of the pages. I'm just going to leave it as is because I don't think I'll ever be changing the fonts and even if I do it wont take 2 minutes to change them all.