I'm still a novice when it comes to CSS, so bear with me =)
I'm trying to use an in-line style block to dictate font size. I know that I can modify HTML tags, such as H1 commands, to whatever size I want. Problem with using the H1 command though is that it automatically bolds the text being affected.
So are there any neutral ways to identify a block of text to change with CSS?
I hope this made sense!* Do not use the DIV element to ape the old FONT element. It was done away with for a reason.
* Do use HTML to describe the content and structure of your document. Headings need to be marked up with the H elements, paragraphs each with a P and so on.
* You can do away with bold text by setting the font-weight property to "normal".Okay, I'm really stupid. Here's the page I'm toying around with:
<!-- m --><a class="postlink" href="http://www.gamexplain.com/test2.shtml">http://www.gamexplain.com/test2.shtml</a><!-- m -->
I'm trying to change the font in the cells. What should I tag those as?1. Remove ALL presentation information from your table. The kindest thing I can say is it's a gibberish filled bandwidth hog at this point.
<table id="pricing">
<TR><TD>HALO 2 - Coagulation Multiplayer Strategies</TD><TD class="cost">$1.50</TD></TR>
<TR class="even"><TD>HALO 2 - Coagulation Multiplayer Strategies</TD><TD class="cost">$1.50</TD></TR>
</table>
2. Define TD and class styles for the table in the head section and get rid of those H1,H2 defs.
<style type="text/css">
table#pricing {
border-collapse: collapse;
border:1px solid #717171;
width:289px;
}
td {
width: 247px;
padding: 1px 1px 1px 2px;
font-size: 8pt;
font-family: arial sans-serif;
}
.cost { width: 42px; color: red; }
.even { background: #e5e5e5; }
</style>
That's a start anyway.Thanks a lot, that's a lot cleaner.
As you can tell, I'm still a babe in the woods when it comes to CSS.
Oh, one more question.
If I want to apply different properties to the "description" text and the "cost" text, how would I do that (such as change the font for each, independent of one another)?
Here's the page I'm dinkin' around with again:
<!-- m --><a class="postlink" href="https://www.gamexplain.com/test4.shtmlOriginally">https://www.gamexplain.com/test4.shtmlOriginally</a><!-- m --> posted by duderdude2
Oh, one more question.
If I want to apply different properties to the "description" text and the "cost" text, how would I do that (such as change the font for each, independent of one another)?
Here's the page I'm dinkin' around with again:
<!-- m --><a class="postlink" href="https://www.gamexplain.com/test4.shtml">https://www.gamexplain.com/test4.shtml</a><!-- m -->
Let's say you want "normal" TDs in your table to have one font, but want the cost TDs to be in a different font and color and right-justified:
...
<style type="text/css">
td {
margin: 0;
padding: 2px;
font: small normal arial, sans-serif;
}
.cost {
font-family: "courier new", monospace;
color: red;
text-align: right;
}
</style>
...
<table>
<tr><th>Description</th><th>Cost</th></tr>
<tr><td>Item #1</td><td class=cost>$9.99</td></tr>
<tr><td>Item #2</td><td class=cost>$19.99</td></tr>
</table>
...What NogDog said. 8)
That takes advantage of the "cascading" nature of CSS. You apply all the general styles you want for a <td> then create a class like .cost that "enhances" the special <td>s. This enhancement includes the ability to override any aspect of the styles (like the font-family) that are already applied to the "unclassed" <td> element.I get the basic idea, but I'm still confused about the implementation.
How do I apply what NogDog most recently said to this table:
<!-- m --><a class="postlink" href="http://www.gamexplain.com/test4.shtml">http://www.gamexplain.com/test4.shtml</a><!-- m --> (so the "Test - Description Goes Here" will be, say Verdana, while the "cost" will be in Arial).
I'm sorry, I'm just having a tough time getting used to CSS. I'll try and work on this myself in the mean time..cost { background: #3F4458; width: 42px; color: E1E100; }
Becomes
.cost { background: #3F4458; width: 42px; color: #E1E100; font-family: "courier new", monospace; }
BTW, if you styled the rows like I did it would eliminate some redundancy and classitis in the mark up.One more novice question.
<!-- m --><a class="postlink" href="https://www.gamexplain.com/test5.shtml">https://www.gamexplain.com/test5.shtml</a><!-- m -->
Again on that page, how do I add class elements to the link commands I've added? I want it so the link commands only affect the links in my "Latest Videos" sidebar, and not the rest of the links on the page. Thanks!Use the " Id " Attribute in <A ... > tag And See the StyleSheet Closely below:
...
<style type="text/css">
...
a#first:hover {color:#ff0033}
a#second:hover {color:#99CC00}
...
</style>
...
<table>
<tr><th>
1) <a id="first" href=http://www.webdeveloper.com/forum/archive/index.php/"abt%20rabie.htm">Link 1</a>
</th>
<th>
2) <a id="second" href=http://www.webdeveloper.com/forum/archive/index.php/"GulfNet%20Solutions%20-%20About%20Us.htm">Link 2</a>
</th></tr>
</table>
Hope u understand.
*** P.S: Please don't use style tag twice, mention all styles using one style tag, it will present ur code more pretty. all the best (Y).Do it by qualifying the link is in the pricing table.
table#pricing a:link {}
If that doesn't get it try
table#pricing td a:link {}Hope u understand.
I wish I did
I'm having an unusually hard time with some parts of CSS, this being one of them. You lost me amongst some of the commands you were using.
Oh, and I did remove the multple instances of the style tag, but I just wanted to make sure I did it correctly. I just had to remove all the <style type="text/css"> and </styles> aside from the first and last, right?Oh, and I did remove the multple instances of the style tag, but I just wanted to make sure I did it correctly. I just had to remove all the <style type="text/css"> and </styles> aside from the first and last, right?
Remove one <style type="text/css"> you put for second definition and its end tag </style>. This is not a big deal.
Sorry, I put the same code that i have used on my system, following is what follows your code:
...
<style type="text/css">
a#first:hover {color:#ff0033}
a#second:hover {color:#99CC00}
td {
margin: 0;
padding: 2px;
font: small normal arial, sans-serif;
}
.cost {
font-family: "courier new", monospace;
color: red;
text-align: right;
}
</style>
...
<table>
<tr><th>Description</th><th>Cost</th></tr>
<tr><td>
<a id="first" href=http://www.webdeveloper.com/forum/archive/index.php/"yourfilename1">
Item #1
</td>
<td class=cost>
$9.99
</td>
</tr>
<tr>
<td>
<a id="second" href=http://www.webdeveloper.com/forum/archive/index.php/"yourfilename2">
Item #2
</td>
<td class=cost>
$19.99
</td>
</tr>
</table>
...
in <A> Tag "id" attribute represents the style which is mentioned above in the <Style> and it applies the style to the tag which contains the "ID" attribute, which ever tag contains it.
anything else in which i lost you ?
all the best.Originally posted by khuishaque
anything else in which i lost you ?
I know I should be getting this, but I'm not. I really think the only way I'll understand how this works is if someone could show me what to tag, and where to put it in my actual document ( <!-- m --><a class="postlink" href="https://www.gamexplain.com/test5.shtml">https://www.gamexplain.com/test5.shtml</a><!-- m --> )
If not though, I'll understand. I'm unusally dense on this subject matter.
Thanks for the help regardless =)It's hard to just read through suggestions in a forum and figure out how CSS works with text attributes if you don't have a more general knowledge of how the cascading of CSS works.
I learned a lot from reading through more general CSS info online. For instance, I found a nice tutorial at WestCiv. (I don't know these guys, so this is not a sales pitch, BTW.)
<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/house/tutorials/index.html">http://www.westciv.com/style_master/hou ... index.html</a><!-- m -->
You really need to understand the "cascading" part of CSS to get your head around how it works. Otherwise, you'll just be taking a shot in the dark each time with your code and won't really understand why it works when it does, and what broke when it's not working.
For instance, you need to understand, from looking at the follwing CSS code, that fonts will be sized 1em everywhere, except within a table - where they will be sized .9em.
body {font-size:1em}
table {font-size:.9em}
Or... link colors...
a:link {color:#990000}
table a:link {color:#0000FF}
This means links on the page will be red (first one), and links inside tables will be blue (second one).
You don't have to change anything within your HTML to get this to have an impact on your page. You only have to link or embed the CSS to the HTML doc.
These guys, higher in this thread, were trying to get you to a lower level than this - where you can go into your HTML code and add some references to classes - which takes you into it deeper.
CSS:
p {font-size:1em}
p.italic {font-style:italic}
In your HTML:
<p>this font size will be 1em</p>
<p class="italic">this font will be italic</p>
Not sure if this helps at all... just kind of spewing stuff at this point, because I don't want to get back to my real work.
Good luck,
SchomerN/M
I'm trying to use an in-line style block to dictate font size. I know that I can modify HTML tags, such as H1 commands, to whatever size I want. Problem with using the H1 command though is that it automatically bolds the text being affected.
So are there any neutral ways to identify a block of text to change with CSS?
I hope this made sense!* Do not use the DIV element to ape the old FONT element. It was done away with for a reason.
* Do use HTML to describe the content and structure of your document. Headings need to be marked up with the H elements, paragraphs each with a P and so on.
* You can do away with bold text by setting the font-weight property to "normal".Okay, I'm really stupid. Here's the page I'm toying around with:
<!-- m --><a class="postlink" href="http://www.gamexplain.com/test2.shtml">http://www.gamexplain.com/test2.shtml</a><!-- m -->
I'm trying to change the font in the cells. What should I tag those as?1. Remove ALL presentation information from your table. The kindest thing I can say is it's a gibberish filled bandwidth hog at this point.
<table id="pricing">
<TR><TD>HALO 2 - Coagulation Multiplayer Strategies</TD><TD class="cost">$1.50</TD></TR>
<TR class="even"><TD>HALO 2 - Coagulation Multiplayer Strategies</TD><TD class="cost">$1.50</TD></TR>
</table>
2. Define TD and class styles for the table in the head section and get rid of those H1,H2 defs.
<style type="text/css">
table#pricing {
border-collapse: collapse;
border:1px solid #717171;
width:289px;
}
td {
width: 247px;
padding: 1px 1px 1px 2px;
font-size: 8pt;
font-family: arial sans-serif;
}
.cost { width: 42px; color: red; }
.even { background: #e5e5e5; }
</style>
That's a start anyway.Thanks a lot, that's a lot cleaner.
As you can tell, I'm still a babe in the woods when it comes to CSS.
Oh, one more question.If I want to apply different properties to the "description" text and the "cost" text, how would I do that (such as change the font for each, independent of one another)?
Here's the page I'm dinkin' around with again:
<!-- m --><a class="postlink" href="https://www.gamexplain.com/test4.shtmlOriginally">https://www.gamexplain.com/test4.shtmlOriginally</a><!-- m --> posted by duderdude2
Oh, one more question.
If I want to apply different properties to the "description" text and the "cost" text, how would I do that (such as change the font for each, independent of one another)?
Here's the page I'm dinkin' around with again:
<!-- m --><a class="postlink" href="https://www.gamexplain.com/test4.shtml">https://www.gamexplain.com/test4.shtml</a><!-- m -->
Let's say you want "normal" TDs in your table to have one font, but want the cost TDs to be in a different font and color and right-justified:
...
<style type="text/css">
td {
margin: 0;
padding: 2px;
font: small normal arial, sans-serif;
}
.cost {
font-family: "courier new", monospace;
color: red;
text-align: right;
}
</style>
...
<table>
<tr><th>Description</th><th>Cost</th></tr>
<tr><td>Item #1</td><td class=cost>$9.99</td></tr>
<tr><td>Item #2</td><td class=cost>$19.99</td></tr>
</table>
...What NogDog said. 8)
That takes advantage of the "cascading" nature of CSS. You apply all the general styles you want for a <td> then create a class like .cost that "enhances" the special <td>s. This enhancement includes the ability to override any aspect of the styles (like the font-family) that are already applied to the "unclassed" <td> element.I get the basic idea, but I'm still confused about the implementation.
How do I apply what NogDog most recently said to this table:
<!-- m --><a class="postlink" href="http://www.gamexplain.com/test4.shtml">http://www.gamexplain.com/test4.shtml</a><!-- m --> (so the "Test - Description Goes Here" will be, say Verdana, while the "cost" will be in Arial).
I'm sorry, I'm just having a tough time getting used to CSS. I'll try and work on this myself in the mean time..cost { background: #3F4458; width: 42px; color: E1E100; }
Becomes
.cost { background: #3F4458; width: 42px; color: #E1E100; font-family: "courier new", monospace; }
BTW, if you styled the rows like I did it would eliminate some redundancy and classitis in the mark up.One more novice question.
<!-- m --><a class="postlink" href="https://www.gamexplain.com/test5.shtml">https://www.gamexplain.com/test5.shtml</a><!-- m -->
Again on that page, how do I add class elements to the link commands I've added? I want it so the link commands only affect the links in my "Latest Videos" sidebar, and not the rest of the links on the page. Thanks!Use the " Id " Attribute in <A ... > tag And See the StyleSheet Closely below:
...
<style type="text/css">
...
a#first:hover {color:#ff0033}
a#second:hover {color:#99CC00}
...
</style>
...
<table>
<tr><th>
1) <a id="first" href=http://www.webdeveloper.com/forum/archive/index.php/"abt%20rabie.htm">Link 1</a>
</th>
<th>
2) <a id="second" href=http://www.webdeveloper.com/forum/archive/index.php/"GulfNet%20Solutions%20-%20About%20Us.htm">Link 2</a>
</th></tr>
</table>
Hope u understand.
*** P.S: Please don't use style tag twice, mention all styles using one style tag, it will present ur code more pretty. all the best (Y).Do it by qualifying the link is in the pricing table.
table#pricing a:link {}
If that doesn't get it try
table#pricing td a:link {}Hope u understand.
I wish I did
I'm having an unusually hard time with some parts of CSS, this being one of them. You lost me amongst some of the commands you were using.
Oh, and I did remove the multple instances of the style tag, but I just wanted to make sure I did it correctly. I just had to remove all the <style type="text/css"> and </styles> aside from the first and last, right?Oh, and I did remove the multple instances of the style tag, but I just wanted to make sure I did it correctly. I just had to remove all the <style type="text/css"> and </styles> aside from the first and last, right?
Remove one <style type="text/css"> you put for second definition and its end tag </style>. This is not a big deal.
Sorry, I put the same code that i have used on my system, following is what follows your code:
...
<style type="text/css">
a#first:hover {color:#ff0033}
a#second:hover {color:#99CC00}
td {
margin: 0;
padding: 2px;
font: small normal arial, sans-serif;
}
.cost {
font-family: "courier new", monospace;
color: red;
text-align: right;
}
</style>
...
<table>
<tr><th>Description</th><th>Cost</th></tr>
<tr><td>
<a id="first" href=http://www.webdeveloper.com/forum/archive/index.php/"yourfilename1">
Item #1
</td>
<td class=cost>
$9.99
</td>
</tr>
<tr>
<td>
<a id="second" href=http://www.webdeveloper.com/forum/archive/index.php/"yourfilename2">
Item #2
</td>
<td class=cost>
$19.99
</td>
</tr>
</table>
...
in <A> Tag "id" attribute represents the style which is mentioned above in the <Style> and it applies the style to the tag which contains the "ID" attribute, which ever tag contains it.
anything else in which i lost you ?
all the best.Originally posted by khuishaque
anything else in which i lost you ?
I know I should be getting this, but I'm not. I really think the only way I'll understand how this works is if someone could show me what to tag, and where to put it in my actual document ( <!-- m --><a class="postlink" href="https://www.gamexplain.com/test5.shtml">https://www.gamexplain.com/test5.shtml</a><!-- m --> )
If not though, I'll understand. I'm unusally dense on this subject matter.
Thanks for the help regardless =)It's hard to just read through suggestions in a forum and figure out how CSS works with text attributes if you don't have a more general knowledge of how the cascading of CSS works.
I learned a lot from reading through more general CSS info online. For instance, I found a nice tutorial at WestCiv. (I don't know these guys, so this is not a sales pitch, BTW.)
<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/house/tutorials/index.html">http://www.westciv.com/style_master/hou ... index.html</a><!-- m -->
You really need to understand the "cascading" part of CSS to get your head around how it works. Otherwise, you'll just be taking a shot in the dark each time with your code and won't really understand why it works when it does, and what broke when it's not working.
For instance, you need to understand, from looking at the follwing CSS code, that fonts will be sized 1em everywhere, except within a table - where they will be sized .9em.
body {font-size:1em}
table {font-size:.9em}
Or... link colors...
a:link {color:#990000}
table a:link {color:#0000FF}
This means links on the page will be red (first one), and links inside tables will be blue (second one).
You don't have to change anything within your HTML to get this to have an impact on your page. You only have to link or embed the CSS to the HTML doc.
These guys, higher in this thread, were trying to get you to a lower level than this - where you can go into your HTML code and add some references to classes - which takes you into it deeper.
CSS:
p {font-size:1em}
p.italic {font-style:italic}
In your HTML:
<p>this font size will be 1em</p>
<p class="italic">this font will be italic</p>
Not sure if this helps at all... just kind of spewing stuff at this point, because I don't want to get back to my real work.
Good luck,
SchomerN/M