holmedwa04 Posted August 31, 2006 Share Posted August 31, 2006 I have with much help from apsnetguy made a grid for a Sudoku game, now when showing the answers I would like to show them in bold and red....And the only way that I have thought of doing it without inserting font tags and bold tags is to use class' in CSS, but I only know how to do that with hyperlinks not normal text.So, can anyone help me?Edit: ...and lets add to that, make all test centered without repeating loads of codes? Link to comment Share on other sites More sharing options...
Jack McKalling Posted August 31, 2006 Share Posted August 31, 2006 For the centering, use this statement for the body selector in your sheet: body { text-align:center; }But this means ALL and EVERYTHING will be centered :)The coloring and classes, well it is just simple. Text can't be styled by its own, only elements. So you have to place the text in an element, that is in this case inline, to enclass that element. <span> is perfect for this, but you can use any element for that. Examples:.redtext { color:#ff0000; } <p>This is some text, but only <span class="redtext">this text</span> is red.</p><p style="display:inline">Some text in here,</p><p class="redtext" style="display:inline">some text in here.</p><p>Some text and a <span style="color:#ff0000">coloured</span> word.</p><span>Some text.</span><div class="redtext" style="display:inline">red words</div><span>even more text.</span>The bolding of the words works the same as colouring it red, only with this statement in CSS:.boldtext { font-weight:bold; } But two classes cannot be supplied together. So if you want one class woth both those statements, you should use this: .jumpingtext { font-weight:bold; color:#ff0000; } Link to comment Share on other sites More sharing options...
justsomeguy Posted August 31, 2006 Share Posted August 31, 2006 But two classes cannot be supplied together.Indeed they can:<span class="redtext boldtext">Also, since everything is in a td, this would center it all:td {text-align: center;} Link to comment Share on other sites More sharing options...
Jack McKalling Posted September 1, 2006 Share Posted September 1, 2006 @ justsomeguy: you always know it better :) Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 So, if I use this: td {text-align: center;} ...and what else to make text bold and red? I got a bit confused! :)Edit: Should I use this, if so what should I put around text I want to be red and bold? .jumpingtext { font-weight:bold; color:#ff0000; } Link to comment Share on other sites More sharing options...
Jack McKalling Posted September 1, 2006 Share Posted September 1, 2006 You can use both these statements if you want items to be either red or bold: .redtext { color:#ff0000; } .boldtext { font-weight:bold; } Or you can use this if you want items to be red as well as bold: .jumpingtext { font-weight:bold; color:#ff0000; } And those "redtext", "boldtext" and "jumpingtext" were only examples. You can choose classnames whatever you like. To apply these classes to the elements you want to get red and/or bold, you would do just only this: <td class="jumpingtext">blablabla</td>Or replace this "jumpingtext" by the classname that you defined in the stylesheet in case you used your own imaginaton Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 So can I change the name from jumpingtext to answers or somethig more relevant to me. Link to comment Share on other sites More sharing options...
Jack McKalling Posted September 1, 2006 Share Posted September 1, 2006 Precisely. :)If you remember to change it as well as in your css as in you html. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 Precisely. :)If you remember to change it as well as in your css as in you html. I have Just realised that I am already using a class for <td> to make the different grid, so can I change what <h1> is in my stylesheet and then just use <h1> when I want to display the answers? Link to comment Share on other sites More sharing options...
Jack McKalling Posted September 1, 2006 Share Posted September 1, 2006 Of cource, if <h1> is whats inside those td elements, than its fine to apply these classes to the <h1> elements. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 kk,how do it do that? Link to comment Share on other sites More sharing options...
Jack McKalling Posted September 1, 2006 Share Posted September 1, 2006 Instead of this from my above post: <td class="jumpingtext">blablabla</td>In case I did not misunderstood you, use this:<td class="gridthing"><h1 class="jumpingtext">blablabla</h1></td>If this confuses you, could you then post (part of) the code you have right now, so I can see what you mean? Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 No, I mean I have seen people changing what tag do, by setting them in their stylesheet, then when they use them it does what they want.So can I just make <h1> red and bold pt12 etc. and then when I want to have it just put:<h1>This should be red, bold, 12pt etc. Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 1, 2006 Share Posted September 1, 2006 Try this out! h1 {font-family: arial;font-size: 12pt;font-weight: bold;color: red;} That should make every h1 element Arial font, 12 pt, bold, and red! Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 Thanks, it works now, does that also get rid of any paragraph spacing that used to be there?Edit: Can I also make all cells in table 120 heigh and wide? Link to comment Share on other sites More sharing options...
aspnetguy Posted September 1, 2006 Share Posted September 1, 2006 no, do you want it to?add margin:0px; that should take care of it. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 no, do you want it to?add margin:0px; that should take care of it.Well its just I want them bigger, because text is streaching the cells, and I dont want to have to change all of the height and width settings. Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 1, 2006 Share Posted September 1, 2006 Thanks, it works now, does that also get rid of any paragraph spacing that used to be there?Edit: Can I also make all cells in table 120 heigh and wide?Just addheight:120px;width:120px;to your td class in your css. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 Nope that hasn't worked, but I found the find and replace tool o Notepad 2, so I used that to change it all! Now that it has made it all bigger, it still wont let me put anyother character than  in without strecthing the grid?Can anyone help me?This is my CSS: a:link { color:#0000ff; text-decoration:none; }a:visited { color:#0000ff; text-decoration:none; }a:hover { color:#006633; text-decoration:underline overline; }a.2:link { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:visited { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:hover { color:#006633; text-decoration:underline overline; font-weight:bold; }a.3:link { color:#000000; text-decoration:none; }a.3:visited { color:#000000; text-decoration:none; }a.3:hover { color:#006633; text-decoration:underline overline; }a.4:link { color:#ff0000; text-decoration:none; }a.4:visited { color:#ff0000; text-decoration:none; }a.4:hover { color:#006633; text-decoration:underline overline; }body { scrollbar-3dlight-color:#000000; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#000033; scrollbar-darkshadow-color:#000000; scrollbar-face-color:#000066;scrollbar-track-color:#000099; scrollbar-shadow-color:#000033; }body {font-family:arial;color:black;font-size:12pt;}td {font-family:arial;color:black;font-size:12px;align:center;text-align:center}#grid{border:2px solid #000} #grid td{padding:5px;border:1px solid #000} #grid td.rcell{border-bottom:0px} #grid td.ncell{border-right:0px;border-bottom:0px} #grid td.bcell{border-right:0px} #grid td.xcell{border:0px;padding:0px;}[b]h1 {font-family: arial;font-size: 12pt;font-weight: bold;color: red;}[/b] Then this is my HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Test</title><LINK rel="stylesheet" type="text/css" href="sudokustylesheet.css"></head><body> <table id="grid" cellspacing="0" cellpadding="0" width="150" height="150"> <tr> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="150" height="150"> <tr> <td class="ncell">1</td> <td class="ncell">2</td> <td class="rcell"><h1>3</td> </tr> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="bcell"> </td> <td class="bcell"> </td> <td> </td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="150" height="150"> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="bcell"> </td> <td class="bcell"> </td> <td> </td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="150" height="150"> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="bcell"> </td> <td class="bcell"> </td> <td> </td> </tr> </table> </td> </tr> <tr> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="150" height="150"> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="bcell"> </td> <td class="bcell"> </td> <td> </td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="150" height="150"> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="bcell"> </td> <td class="bcell"> </td> <td> </td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="150" height="150"> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="bcell"> </td> <td class="bcell"> </td> <td> </td> </tr> </table> </td> </tr> <tr> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="150" height="150"> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="bcell"> </td> <td class="bcell"> </td> <td> </td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="150" height="150"> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="bcell"> </td> <td class="bcell"> </td> <td> </td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="150" height="150"> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="ncell"> </td> <td class="ncell"> </td> <td class="rcell"> </td> </tr> <tr> <td class="bcell"> </td> <td class="bcell"> </td> <td> </td> </tr> </table> </td> </tr> </table> </body></html> I am not sure as you need all of the CSS but I have made the bit I think you need bold. Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 1, 2006 Share Posted September 1, 2006 What is that thing you have in the css?Try adding padding:0px;margin:0px;to all of your classes. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 What is that thing you have in the css?Try adding padding:0px;margin:0px;to all of your classes. It is just to highlight the bit of CSS that Ithought you needed to look at, but because it is in the HTML box obviously it doesn't work. Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 1, 2006 Share Posted September 1, 2006 hehe, I've done that before, it'd be nice to be able to bold code sometimes.Could you post a screenshot or something? So I can tell what the problem is? I think I sort of understand what you are asking. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 Kk, here it is...Taken picture off, because I dont think anyone needs it now, and it is taking u space Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 1, 2006 Share Posted September 1, 2006 did you try setting margin and padding to 0px in all of your classes yet? Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 1, 2006 Author Share Posted September 1, 2006 did you try setting margin and padding to 0px in all of your classes yet?How would I do that?Can you do it for me please, this is all of the CSS you will need to change...body {font-family:arial;color:black;font-size:12pt;}td {font-family:arial;color:black;font-size:12px;align:center;text-align:center}#grid{border:2px solid #000} #grid td{padding:5px;border:1px solid #000} #grid td.rcell{border-bottom:0px} #grid td.ncell{border-right:0px;border-bottom:0px} #grid td.bcell{border-right:0px} #grid td.xcell{border:0px;padding:0px;}h1 {font-family: arial;font-size: 12pt;font-weight: bold;color: red;} 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