Css Minus The <p> A very newbie CSS question

[Animator 0]

Most beginner pages on CSS give introductory examples of how to change font style for a page, by doctoring up the <P> tag,

 

<p class="somestyle">blah blah blah blah blah</p>

I'm finding that this is pretty annoying to use. It doesn't always work and it adds blank lines (being the <P> tag because that's what <P> does) around things when I want those lines to be close together. In Tables, it's really annoying to have <P>...</P> inside every <TD>.....</TD> just because I want to return to my standardised "somestyle" font settings.

 

...so yeah... there is a way in CSS for just setting the style for all text right?

 

Complete CSS newbie wants to know.

[vujsa 0]

Most beginner pages on CSS give introductory examples of how to change font style for a page, by doctoring up the <P> tag,

 

<p class="somestyle">blah blah blah blah blah</p>

I'm finding that this is pretty annoying to use. It doesn't always work and it adds blank lines (being the <P> tag because that's what <P> does) around things when I want those lines to be close together. In Tables, it's really annoying to have <P>...</P> inside every <TD>.....</TD> just because I want to return to my standardised "somestyle" font settings.

 

...so yeah... there is a way in CSS for just setting the style for all text right?

 

Complete CSS newbie wants to know.

I think that the example that you are referring to is just that, an example...

 

I completely understand your issue with the <p> (paragraph) tag. It has it's uses but not as often as the WYSIWYG editors thing nor people writing CSS tutorials.

 

You can use any tag that you want actually. I don't even think it has to be a valid HTML tag to work but that is a different discussion.

 

If you want to format a string of text, you can use <span>. You use it the same as <p> but it doesn't have any default formating so you can use it for a whole paragraph or just a single letter in that paragraph!

<span class="redText">This is red</span> and this is not!

You should use the <div> tag for very large blocks of text but it will divide your text somewhat even without specific CSS to tell it to. It works kind of like table cells without the table!

 

If you are using tables anyhow, you can just apply the style to the table, row, or cell that you want.

<td class="cellStyle">This is my table cell content</td>

Just remember that every tag has some type of property to it that you may need to compensate for with the CSS to get it to work that way you want it to.

For example, if you have a CSS entry for the <p> tag to remove the extra spaces, then you might be happier. I'm not sure but maybe like this:

p {	margin-top: 0px;}

it could be the padding command instead. I just don't use the <p> tag at all so I can't remember how to do it.

 

hope this helps,

vujsa

[Arbitrary 0]

I'm finding that this is pretty annoying to use. It doesn't always work and it adds blank lines (being the <P> tag because that's what <P> does) around things when I want those lines to be close together. In Tables, it's really annoying to have <P>...</P> inside every <TD>.....</TD> just because I want to return to my standardised "somestyle" font settings. (IMG:style_emoticons/default/dry.gif)

Hmmm, you probably shouldn't have the <p> </p> tags inside a table cell. Unless you're using a javascript wysiwyg editor that automatically puts <p></p>'s around data. In that case, you're probably better off stripping away the paragraph tags. A lot of times, you're better off using <br /> for paragraph breaks instead of the paragraph tag as <br /> gives you more control over where your breaks are.
<div>'s have the same properties as <p> in terms of paragraph breaks--it also starts a new paragraph. <span>'s don't do anything to the data that's within it, so that could be a useful tag if you just want to alter a single attribute of the text. You might try, as vujsa suggest, altering the margin or padding of the <p> tag. You can also use negative margin to force the lines to be close together.

Also, as a side note, have you tried the line-height property yet? That can change the density of your lines. Line-height is relative to your font size. So if you have a font-size of 16px and a line-height of 16px, the lines will be of normal density. If you have a font size of 26px and a line-height of 16px, then the lines will be closer together.

All in all, I still think the line break <br /> is the way to go.

Good luck, Lancer!

[faulty.lee 0]

I think what you wanted was a style to apply to all font in your page. You can declare page wise style sheet to do that.

td {	font : normal bold 12pt;	text-align : center;	text-decoration : none;	text-transform : capitalize;  }

This style will apply to all <TD> in your page, unless in within <TD> you had style that contradict the general declaration, that's the meaning of cascaded, btw. So just put this within a style tag at your header area would do the job.

Like vujsa said, you can also do that to <p> tag and others. If you really need to specified individual area to apply the style to, then use <span>, it's less intrusive. If you have different style for use with your <span> tag, then you can give it a class name, and declare that in your header, like this

.stylea {	font : normal bold 12pt;  }.styleb {	font : normal bold 10pt;  }

To use it just specified the class name like this

<span class="stylea">Font here will be 12pt<span><span class="styleb">Font here will be 10pt<span>

With this method, you'll get an additional advantage, you can change all your style at one place, without having to do a search and replace for every iteration you had.

Good Luck

[Mordent 0]

<span class="stylea">Font here will be 12pt</span><span class="styleb">Font here will be 10pt</span>

Fixed it for you (you'd used an open <span> tag instead of a close </span> tag).

 

Anyway, aside from that I've personally no problem with tinkering with the <p> tag if it gets me what I want. <p> and </p> are used for paragraphs. By default each paragraph goes on to a new line, so in terms of keeping to the general standards I leave it like that. For special formatting within paragraphs (i.e. emphasising sections) you can use <em> and <strong> tags. Although you can get a lot nicer results from using certain class spans (e.g. <span class="emphasis">foobar</span>) I've never had a problem with using <em> (and potentially customising it a little) to get the result I want.

 

That said, I'm often very fussy with my CSS, and I keep all sense of styling out of the (X)HTML document. This means I have great fun playing with classes and whatnot, as I have to give them relevant class names (class="bold" brings style back in to the markup, which I want to avoid). Anyway, in general you should use tags which are right for the area you're working in. Use <p> if it's a paragraph, use <td> if it's a table cell, etc. You can style these individually using CSS without too much hassle, and it's always best to use the right tag in the right place than one that you can make look right. Just for reference, I barely ever use <br />.

 

Hope this helps in general.

[faulty.lee 0]

Fixed it for you (you'd used an open <span> tag instead of a close </span> tag).

Thanks, apparently I too used to those editor that auto complete the tags for me

[Animator 0]

Thanks for all your help. Most was solved by making p,td style so table cells defaulted to the standard font settings of the main page. I got my page, small though it is, up and running enough that I'll be able to hand around business cards with my website on them searching for work....never seen a <BR /> tag. Was that made to sort out the discrepancy between those who use <BR> and those who use <BR></BR> ?

[faulty.lee 0]

<BR /> is the shorter form of <BR></BR>, introducing during implementation of XHTML. It makes code looks cleaner when you have no content in between the enclosing tags

[turbopowerdmaxsteel 0]

I think the <BR><BR/> pair of tags is not even valid for an XHTML document, as empty tags must be of the form <BR/> (according to the XML standards). Sure, browsers will render it in the same way, but I think a document with <BR><BR/> will fail to validate against the XHTML specification.

[vujsa 0]

I think the <BR><BR/> pair of tags is not even valid for an XHTML document, as empty tags must be of the form <BR/> (according to the XML standards). Sure, browsers will render it in the same way, but I think a document with <BR><BR/> will fail to validate against the XHTML specification.

Well to clarify...
In HTML1.0, there were tags that didn't come in pairs since the tag didn't modify anything. For example, you have to use and opening and closing anchor tag <a> and </a> so that the browser understood that whatever was in between the two was the anchor! However, horizontal rule <hr> is it's own entity and it doesn't modify something else so there wasn't any reason to close the tag...

In XML, all tags must be closed! There are no exceptions to the rule but most views / browsers are very forgiving! So, when you combine the two languages, you have to follow the rules for both to make XHTML. So, in HTML1.0, we used <br> that was it but for compliance with the XHTML standard, you must use the <br /> which opens and closes the tag at the same time. Basically, it tells the viewer / browser that the next tag found is not a child of the last tag.

I hope this clears things up.

vujsa