hello, i am amking a site using text/css but it seems that i am not able to change the font size from html for some reason. i am relatively new to css, so some one please help me out here, i'd be greatful. here is the css i used for the file: main.css /* Center #container, constrain to 732px width ----------------------------------------------- */ body { background-image: url('images/asq.gif'); background-repeat: repeat; text-align: center; margin-top: 0px; font-size: 1em; } #container { width: 732px; text-align: Center; color: black; margin-top: 0px; } #headcont { width: 732px; background-image: url('images/header.jpg'); height: 194px; padding: 10px 15px; } .hcontent { padding-top: 80px; padding-left: 175px; text-align: left; } Code (markup): and heres the html code for it: <html> <head> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <div id="container"> <div id="headcont"> <img src="images/flags.jpg" align="right"><br> <div class="hcontent"> <font color="be1300" size="18">abc</font> <font color="5e5e5e" size="18">directories</font> <br> <font size="18"> this is an amazing opportunity! </font> </div> </div> </div> </div> </body> </html> HTML: the problem is whatever FONT SIZE values i keep in HTML the text doesnt change in size.... BUT WHEN I REMOVE THE CSS LINK REL, i can change the size!! this is killing me!!! please help
Silly, you're stating two different fonts-- once in the HTML and once in the CSS. WHy have CSS in the first place then? You should remove the FONT tags (they are deprecated anyway) and use the CSS. In the CSS, see the font-size: 1em; ? That's the size of a browser's standard font. If you want the font two times bigger, change it to 2em. Half the size, .5em. Your html should be more like this: <html> <head> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <div id="container"> <div id="headcont"> <img src="images/flags.jpg" alt="something here"> <div class="hcontent"> <h2>abc</h2> <h3>directories</h3> <p>this is an amazing opportunity!</p> </div> </div> </div> </div> </body> </html> Code (markup): Something like that. The align right is also deprecated (not considered valid anymore). You could float it right or various other things. h2 and h3 have their own default font sizes but you can change them in the CSS too. p is for paragraph and you can also change that in the CSS. body { background-image: url('images/asq.gif'); background-repeat: repeat; text-align: center; margin-top: 0px; [b]font-size: 1em;[/b] } Code (markup): or h1 { font-size: 2em; } or h2 { font-size: 1.5em; } or whatever... The CSS can totally control your page for you... everything but the actual text itself. This is the power of CSS. Use it! Hope this helped... though I should find a nice CSS link for you, so you can learn it better... I learned from two books and these forums: Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd and HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Schafer You can probably find the first one at a decent public library, if you're in North America.
hey thanks a lot for your reply, i know css can do almost anything, but the person im making this website for doesnt know css, so i set a global font value in css, but am not able to change the font size in html [which my friend] understands.... i just started out with learning css this morning, and now its night.... and im sick over not being able to find a solution to this i think an alternative solution is putting style attributes in html tags... which really lengthens the code, for instance if i want one line with black color, times new roman, 22pt, italics & another with completely different ones... i'd have to type in <font color="black" style="font-family:times new roman;font-size:22pt;font-style:...... > different for both the lines..... any bright ideas ? and can you find out whats causing the html not to change the font size?
Yeah, I said why : ) You are declaring ONE size in the <FONT> tags in the HTML, but you are declaring ANOTHER size in the CSS. I know CSS isn't easy to just jump into (so I wouldn't), but please try to get rid of all the styling in the HTML. The FONT tag was invented way back because there was no CSS. If you insist for your friend's sake to keep the FONT tags, then remove the font-size: 1em in the CSS. That's the conflict. But letting your friend use font tags is like letting him/her drive after drinking : P Real friends don't let friends use the FONT tag : )
im still getting the same problem after removing font size from css , but when i remove the css link from html, it starts working fine.... maybe theres a browser css error in my windows ? cuz the same is happening with firefox? lol and letting my friend onto css would be like serving food to a dog who cant reach it [edit: at least for this moment]
did you try using stomme's code? what you need to do is convince your pal not to use font tags.. replace them with <span>'s or <p>'s and give them id's or classes if you want.. if you want the font to be size 18.. change font-size: 1em; to font-size: 18px;
thanks you for your reply, yes i am convincing him to learn css and implement it in his website, so i guess things are better now
Did you get your font problem fixed? Also, the CSS Zen Garden was pretty much created to show people that you can do so much in CSS (though it only shows you how after you've already learned CSS). Go to your local library if you can and look for "HTML Utopia" by Rachel Andrew and (I forgot his name but it's a dude). The rest of the title is something like building websites without tables. Trying to stumble your way through CSS is just too hard. You can get away with it in HTML I think, but not CSS. Find a good book like the one above and learn all the things you can do (and can't do) with CSS. Especially if you know multiple ways of doing something, it's easier to fix problems too.
Hey stomme, yes i got the problem solved, Thank you very much for your concern, yeah iknow about css zen garden and am really inspired to get designs up like they do it ^_^ i know it will take time but practising is the key the book you said is 'HTML Utopia: Designing Without Tables Using CSS 2nd Edition' by Rachel Andrew ; i have the ebook version of it that i downloaded from somewhere and yeah i use it as a reference at times though i havent read it completely
What I always do with sitepoint books is go to the errata page and correct the errors that got through the printing reviews. There are always some somewhere. Otherwise, you're going along nicely and suddenly, wtf??? And you get stuck. In Css garden, check http://www.csszengarden.com/?cssfile=062/062.css In IE6 it's boxes, and in compliant browsers is a garden. Pretty neat.