brynn Posted May 28, 2013 Share Posted May 28, 2013 Hi Friends,I apologize for the vague topic title. It's just that I'm so new at this, I'm not sure where the problem lies. I've completed CSS Basic, CSS Styling and CSS Box Model in the CSS Tutorial. I have a simple page written, but can't get the text to display as I expect it should. (Since I'm so new at this, it's possible I have some unreasonable expectation.) I'll put my code below. I'm trying to make an Internal Style Sheet. So far, it's just a very simple page. It has a background image, which you can think of as an empty picture frame, and I'd like the text to be inside of the frame -- so that the page will appear to have a border around it. I can't get the font family that I want to work, at all, except if I don't use the image background. If I use margins to make the text fit inside the border, it no longer responds to the text size that I want. The reason I have text size in percent in the body selector, and in em in the h1 and p selectors, is because of the recommendation on Styling Fonts > Use Combination of % and em, which is said to allow text resizing in all browsers, when people open the page in their browsers. Note that the fonts in the code will not be the final ones. I just need them different, to easily see if the code is working properly (which it's not). Also, I'm trying to write all the properties in 1 declaration. I know I'm not writing the code the same way that's suggested in the Tutorial. It just seems weird to have 1 curly bracket, alone on a line. But at least for now, it's an arrangement that seems to be easy for me to understand. And being such a newb, perhaps I don't have the proper text editor. Notepad++ seems to do what I need. But if it's inappropriate, please let me know I don't have the resulting page uploaded anywhere so you can see the results. But I can do that pretty quick, if you need it. Oh wait....I guess I could attach the HTML file....right? Ok, here's the code: <!DOCTYPE html><html><head><style>body{background:#ffffff url('http://forum.inkscapecommunity.com/tp-images/img/art5.png') no-repeat center top;}{font-size:100%;}h1{text-align:center;}{font:2.0em Verdana,Geneva,sans-serif;}p{margin-right:20%;margin-left:20%;}{font:1.5em "Times New Roman",Times,serif;}</style></head><body><br><h1>Screenshots</h1><p>text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article</p><p>More text.</p></body></html> And here comes the attached HTML file: Please let me know if you need any further info.And thank you very much Link to comment Share on other sites More sharing options...
jeffman Posted May 28, 2013 Share Posted May 28, 2013 (edited) It doesn't matter where the open and closing braces of a ruleset go. What matters is that a ruleset (the set of all CSS rules applied to a selector) must be enclosed by ONE pair of braces. So when you have stuff like this: h1{text-align:center;}{font:2.0em Verdana,Geneva,sans-serif;} the font rule gets ignored. Note: if you check your error console when the page loads, you will see that the browser actually tells you the rule is being ignored. Edited May 28, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
brynn Posted June 1, 2013 Author Share Posted June 1, 2013 (edited) Thanks Deirdre's Dad. :)You mean you can put text declaration and font family declaration together? Can there be only 1 set of brackets for each selector? I must have missed that somewhere along the way. "Error console".....hmmm, I'll look for that. "...when the page loads..."....Ok, where's the error console? "...the browser actually tells you...." ...Ooohh, is it, in Firefox, Tools > Web Developer > Error Console? Hah, yeah I never would have looked at something labelled "web developer"! I just want to make a few simple pages. I'll try putting them together and let you know how it goes. Thanks again EditI wonder why removing the background image causes the font to display correctly? Or why the font is the proper size if I don't use margins? Edited June 1, 2013 by brynn Link to comment Share on other sites More sharing options...
brynn Posted June 1, 2013 Author Share Posted June 1, 2013 Ok, the code seems to be working now. I'm not sure if I understand completely. But I still lack very much experience at this. Eventually I'll get it. Thank you, Deirdre's Dad Can I ask another newb question while I'm here? It's still about fonts. Do you have to use font-weight:bold declaration, to make the font bold? Can't you just use <b></b> tags? Link to comment Share on other sites More sharing options...
jeffman Posted June 2, 2013 Share Posted June 2, 2013 The <b> tag works. When the W3C moved from HTML 4 to HTML5, they almost dropped it. There was a lot of controversy. And you will still see it used, especially when there is a LOT of text involved. Obviously, if you are styling an element with multiple properties anyway, and one of them is bold, it would be silly to use <b> tags instead of CSS. If bold is the only style for a short passage of text, the secret police will not hunt you down for using <b> tags. But if you want to be very "correct," use a span instead, and apply some CSS to the span. It's easy enough. Link to comment Share on other sites More sharing options...
brynn Posted June 2, 2013 Author Share Posted June 2, 2013 Ok, I will keep that in mind. I guess span must be in the advanced part of the tutorial. Span and div are 2 tags I've seen used a lot in html, but haven't actually learned what they are or how to use them. Maybe I'll have a look at some of the advanced lessons. Thank you very much for your help (I haven't learned whether you like topics marked as solved, in this forum. So I'll look around and try to figure it out. But in case I don't find it, this can be marked solved ) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now