Jump to content

Class'


holmedwa04

Recommended Posts

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

  • Replies 102
  • Created
  • Last Reply

Top Posters In This Topic

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

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

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

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...