Jump to content

Change font-family?

eduard

By eduard
in CSS

Recommended Posts

eduard Devoted Member

eduard

Posted
Posted

How do I change the font-family of the div ´footer´?a:link,a:visited{border-bottom-style:solid;border-color:#808080;color:#6A5ACD;text-decoration:none;display:block;background-color:#A9A9A9;width:8%;height:24%;text-align:center;padding:2px;}a:hover,a:active{background-color:#000000;}body{overflow:scroll;margin:0px;padding:0px;width:100%;}div.header{border-style:solid;border-width:5px;border-color:#808080;content:100%;width:100%;background-color:#6495ED;height:15em;padding:0px;}div#main{width:100%;height:16em;background-color:#ADD8E6;padding:0px;margin:0px;border:0px;border-style:solid;}div.footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;width:100%;height:15em;text-align:center;}p{(font-family:"Times New Roman","Georgia":)font-size:40px;color:#000000;}h5{text-align:center;color:#000080;(font-family:"Times New Roman","Georgia!:)}

Link to comment
Share on other sites
cousineaug Member

cousineaug

Posted
Posted
How do I change the font-style of the div ´footer´?
perhaps the problem is typos in your style sheet
p{(font-family:"Times New Roman","Georgia";)	 why round brackets here?font-size:40px;color:#000000;}h5{text-align:center;color:#000080;(font-family:"Times New Roman","Georgia!;)   round brackets again and close quote missing}

Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted

I don´t manage to change the font-family!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><HTML><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Eduard Lid</title><link rel="stylesheet" type="text/css" href="ex1.css"></head><body><div class="header"><a href="http://www.viadeo.com/es/profile/eduard.lid"><b><h4>Profile</h4></b></a><a href="web_designer/image_and_text_database.html"><b><h4>Web designer (databases)</h4></b></a></div><div id="main"><img src="images/me.JPG" alt="Eduard Lid" align="right" width="350" height="256"/></div><div class="footer"<h6>This website is made by ©</h6><h1>Eduard Lid</h1><h5>(1152*720px)</h5></div></body></HTML>a:link,a:visited{border-bottom-style:solid;border-color:#808080;color:#6A5ACD;text-decoration:none;display:block;background-color:#A9A9A9;width:8%;height:24%;text-align:center;padding:2px;}a:hover,a:active{background-color:#000000;}body{overflow:scroll;margin:0px;padding:0px;width:100%;}div.header{border-style:solid;border-width:5px;border-color:#808080;content:100%;width:100%;background-color:#6495ED;height:15em;padding:0px;}div#main{width:100%;height:16em;background-color:#ADD8E6;padding:0px;margin:0px;border:0px;}div.footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;width:100%;height:15em;text-align:center;p.sansserif{font-family:Arial,Helvetica,sans-serif;}font-size:40px;color:#000000;}h5{text-align:center;color:#000080;p.sansserif{font-family:Arial, Verdana;}}

Link to comment
Share on other sites
cousineaug Member

cousineaug

Posted
Posted
I don´t manage to change the font-family!div.footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;width:100%;height:15em;text-align:center;p.sansserif{font-family:Arial,Helvetica,sans-serif;}font-size:40px;color:#000000;}h5{text-align:center;color:#000080;p.sansserif{font-family:Arial, Verdana;}}
Your problem is that you cannot write a style inside another one.Your style sheet should look like
div.footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;width:100%;height:15em;text-align:center;font-size:40px;color:#000000;}.sansserif{font-family:Arial,Helvetica,sans-serif;}h5{text-align:center;color:#000080;}

and then your HTML

<h5>This is a normal title</h5><h5 class="sansserif">This title should be without serif</h5> <div class="footer"><p>start of footer section</p><p class="sansserif">this paragraph within footer is sans serif</p></div>

you define a CLASS called sansserif, only one time, and you apply it to any element as shown above.Guy

Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
Your problem is that you cannot write a style inside another one.Your style sheet should look like
div.footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;width:100%;height:15em;text-align:center;font-size:40px;color:#000000;}.sansserif{font-family:Arial,Helvetica,sans-serif;}h5{text-align:center;color:#000080;}

and then your HTML

<h5>This is a normal title</h5><h5 class="sansserif">This title should be without serif</h5> <div class="footer"><p>start of footer section</p><p class="sansserif">this paragraph within footer is sans serif</p></div>

you define a CLASS called sansserif, only one time, and you apply it to any element as shown above.Guy

As you can see I changed the code! The text: this website is made by´ is changed, but my name hasn´t!(www.eduardlid.com)a:link,a:visited{border-bottom-style:solid;border-color:#808080;color:#6A5ACD;text-decoration:none;display:block;background-color:#A9A9A9;width:8%;height:24%;text-align:center;padding:2px;}a:hover,a:active{background-color:#000000;}body{overflow:scroll;margin:0px;padding:0px;width:100%;}div.header{border-style:solid;border-width:5px;border-color:#808080;content:100%;width:100%;background-color:#6495ED;height:25em;padding:0px;}div#main{width:100%;height:32em;background-color:#ADD8E6;padding:0px;margin:0px;border:0px;}div.footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;width:100%;height:13em;text-align:center;font-size:40px;color:#000000;}.sansserif{font-family:Arial,Helvetica,sans-serif;}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><HTML><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Eduard Lid</title><link rel="stylesheet" type="text/css" href="ex1.css"></head><body><div class="header"><a href="http://www.viadeo.com/es/profile/eduard.lid"><b><h4>Profile</h4></b></a><a href="web_designer/image_and_text_database.html"><b><h4>Web designer (databases)</h4></b></a></div><div id="main"><img src="images/me.JPG" alt="Eduard Lid" align="right" width="570" height="512"/></div><div class="footer"<h6>This website is made by ©</h6><h3>Eduard Lid</h3><h6>(1152*720px)</h6></div></body></HTML>
Link to comment
Share on other sites
cousineaug Member

cousineaug

Posted
Posted 
.....<div class="footer"	   &&&&missing '>'<h6>This website is made by ©</h6><h3>Eduard Lid</h3><h6>(1152*720px)</h6></div></body></HTML>

The footer class DIV has no close bracketIn my browser I cannot even see "this website made by" because of the errors"made by" is H6"Eduard" is H3but I see no style associated with these elements...so nothing should change.
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
As you can see I changed the code! The text: this website is made by´ is changed, but my name hasn´t!(www.eduardlid.com)a:link,a:visited{border-bottom-style:solid;border-color:#808080;color:#6A5ACD;text-decoration:none;display:block;background-color:#A9A9A9;width:8%;height:24%;text-align:center;padding:2px;}a:hover,a:active{background-color:#000000;}body{overflow:scroll;margin:0px;padding:0px;width:100%;}div.header{border-style:solid;border-width:5px;border-color:#808080;content:100%;width:100%;background-color:#6495ED;height:25em;padding:0px;}div#main{width:100%;height:32em;background-color:#ADD8E6;padding:0px;margin:0px;border:0px;}div.footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;width:100%;height:13em;text-align:center;font-size:40px;color:#000000;}.sansserif{font-family:Arial,Helvetica,sans-serif;}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><HTML><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Eduard Lid</title><link rel="stylesheet" type="text/css" href="ex1.css"></head><body><div class="header"><a href="http://www.viadeo.com/es/profile/eduard.lid"><b><h4>Profile</h4></b></a><a href="web_designer/image_and_text_database.html"><b><h4>Web designer (databases)</h4></b></a></div><div id="main"><img src="images/me.JPG" alt="Eduard Lid" align="right" width="570" height="512"/></div><div class="footer"<h6>This website is made by ©</h6><h3>Eduard Lid</h3><h6>(1152*720px)</h6></div></body></HTML>
I still don´t manage:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><HTML><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Eduard Lid</title><h5 class="sansserif">Eduard Lid</h5>.sansseriffont-family:Arial,Helvetica,sans-serif<link rel="stylesheet" type="text/css" href="ex1.css"></head><body><div class="header"><a href="http://www.viadeo.com/es/profile/eduard.lid"><b><h4>Profile</h4></b></a><a href="web_designer/image_and_text_database.html"><b><h4>Web designer (databases)</h4></b></a></div><div id="main"><img src="images/me.JPG" alt="Eduard Lid" align="right" width="400" height="257"/></div><div class="footer"><p>Eduard Lid</p><p class="sansserif"><h5>(1152*720px)</h5></div></body></HTML>a:link,a:visited{border-bottom-style:solid;border-color:#808080;color:#6A5ACD;text-decoration:none;display:block;background-color:#A9A9A9;width:9%;height:28%;text-align:center;padding:2px;}a:hover,a:active{background-color:#000000;}body{overflow:scroll;margin:0px;padding:0px;}div.header{border-style:solid;border-width:5px;border-color:#808080;content:100%;background-color:#6495ED;height:12em;padding:0px;}div#main{height:16em;background-color:#ADD8E6;padding:0px;margin:0px;border:0px;padding:0px;border:0px;}div.footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;height:7em;text-align:center;font-size:40px;color:#000000;}.sansserif{font-family:Arial,Helvetica,sans-serif;}
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

first of all, this:

<h5 class="sansserif">Eduard Lid</h5>.sansseriffont-family:Arial,Helvetica,sans-serif

does not belong in the head. the class would if you put it in style tags, but since you have it as part of an external stylesheet, than its purpose there in unwarranted.if you were validating your webpage, you would have caught that error. (see my sig, or for added convenience, get the web developers toolbar for FF). to the other issue at hand, you're giving the sansserif class to an unclosed <p> tag. 

<p class="sansserif">

just add it as a class to the element you actually want to have that style. it's all in the tutorials.http://www.w3schools.com/css/css_id_class.asphttp://www.w3schools.com/css/css_font.asp

Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
first of all, this:
<h5 class="sansserif">Eduard Lid</h5>.sansseriffont-family:Arial,Helvetica,sans-serif

does not belong in the head. the class would if you put it in style tags, but since you have it as part of an external stylesheet, than its purpose there in unwarranted.if you were validating your webpage, you would have caught that error. (see my sig, or for added convenience, get the web developers toolbar for FF). to the other issue at hand, you're giving the sansserif class to an unclosed <p> tag. 

<p class="sansserif">

just add it as a class to the element you actually want to have that style. it's all in the tutorials.http://www.w3schools.com/css/css_id_class.asphttp://www.w3schools.com/css/css_font.asp

Thanks, although I have still the problem:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><HTML><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Eduard Lid</title><link rel="stylesheet" type="text/css" href="ex1.css"></head><body><div class="header"><a href="http://www.viadeo.com/es/profile/eduard.lid"><b><h4>Profile</h4></b></a><a href="web_designer/image_and_text_database.html"><b><h4>Web designer (databases)</h4></b></a></div><div id="main"><img src="images/me.JPG" alt="Eduard Lid" align="right" width="400" height="257"/></div><div class="footer"><p>Eduard Lid</p>.p font{font:sansserif;}<h5>(1152*720px)</h5></div></body></HTML>
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

yes, I can see that. It appears you aren't following any of the advice or reading the tutorials.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...