I'm reviewing a css file on a corporate intranet. I'm a novice at css - mostly just the basics - and I'm used to defining regular text using body and table references.

body {
	font-family: Tahoma,Arial,Verdana,Helvetica,sans-serif;
	font-size: 12px;
}

table {
	font-family: Tahoma,Arial,Verdana,Helvetica,sans-serif;
	font-size: 12px;
}

I'm looking at the css file and doing some testing. If there were no body or table definition, I would assume the text would show as default Times or something.

But they are showing up as if they are assigned a style. As a matter of fact, they are showing up with the same font, but different sizes.

With no reference to body or table in the css sheet, is there some other way to attribute the style.

Note that I can not see any extra style references in the head section of the HTML page.

Thanks,
Steve

If you take away the css on the body and table that you have above the text should be the default (assuming of course the font hasn't been applied elsewhere)

I would guess the styles have been applied elswhere. Is there an external stylesheet listed in the head of the document?

Other than adding styles directly to an html element you can also add styles to id's and classes. They would appear in the css as # for an id and . for a class and as id="idname" and class="classname" in the html. It can be specified as table#id or table.class or without table in front in the css.

You can also add css directly to an html element. It's called an inline style. The code might look something like:

<table style="property1:value1; property2:value2">

I realize you can't post a link to your company's intranet, but could you post a little more of the html for the specific table and document body that you're having issues with. If there isn't an external style sheet (i would suspect there is, possibly more than one) and no mention of body or table within any of the css code then there is probably an id or a class applied to the specific table and body.

Let me see if I can clarify, and thanks for the prompt reply!

The site does use an external style sheet - in the head section of each page, it does refer to that file.

The style sheet that it refers to (connect.css) does NOT include a body or table reference. My example code was just and example of what I was looking for in the css file that I could not find.

So somewhere along the line, a style for body and table is being applied. It's not in the head of the page and it is not in the code itself.

Here's the twist I think. We use a content management system (Vignette) to manage content on the site. When we create site copy, we're creating a content item with various attributes. For the copy itself, the system uses eWebEdit Pro as an HTML editor.

When I did my test, I created a content item (site copy) and did my creation of the copy itself in Dreamweaver and applied some styles that I knew were in the connect.css file. Then I switched to HTML mode in eWebEdit Pro and pasted in the code.

I did leave some of the text alone, and applied no style - expecting that that text would just come out as default (Times or Arial maybe). I applied a variety of styles from the style sheet to confirm that there was a connection and that it was working and it worked fine.

The thing is, the text on its own and then the text inside a table were different so I know that it's pulling styles - again different (one is a smaller font, both are Arial I think) - from somewhere.

Maybe it is the default built into eWebEdit Pro?

Other than adding styles directly to an html element you can also add styles to id's and classes. They would appear in the css as # for an id and . for a class and as id="idname" and class="classname" in the html. It can be specified as table#id or table.class or without table in front in the css.

I'm not sure what you mean here.

Just noticed that I can add an attachment, would viewing the full css file (as a .txt) help you (anyone)?

Thanks again,
Steve

I wouldn't think it would have anything to do with eWebEditPro since what you're viewing in the browser should be independent from the editor. I've never used eWebEditPro though.

Let me give an example of what I meant in the quote you pulled. In the html iteself the table could have an id or a class assigned. The code would look like:

<table id="idname"> or <table class="classname">

idname and classname can be anything. They're just identifiers so the table can be referenced for other things such as css. You might then see something in the css like:

table#idname {font-size:12px} or table.classname {font-size:12px}

'idname' and 'classname' would be the same as used in the html for the table. # is used with ids and . is used with classes. The 12px is just what I arbitrarily chose as a font-size

In the css you don't actually need the table in front so the code might be:

#idname {font-size:12px} or .classname {font-size:12px}

By adding ids or classes you can specify css on some tables (or any other html element) without your css affecting all tables.

I'm guessing that any css that is applied is being applied to the table, though that's mostly just an educated guess. I'm also thinking it's the font-size that's being applied since it sounds like you're seeing Arial in both.

I'd be happy to look at the css if you want to attach it. You can also put it directly in the post if you want. Seeing the html for the page would help too if you don't mind attaching or posting that as well.

One question. Since this is a content management system is the content management system using it's own css file? Or is connect.css the file from the content management system?

I think I have figured it out. I did not take the obvious opportunity to look at the full HTML code that is generated by the final page.

In the <head> section, it does refer to the .css file.

<link rel="stylesheet" type="text/css" href="/Connect/ccm/cda/files/css/connect.css">

Then I noticed that the same line is found three more times within the <body> of the page!
Then I found this too. . . .

<style>    
  	a /* this class eliminated underline from links.  */
  	{
    	text-decoration: none; 
  	}
   		.data22 /* this class will keep all sections from the left menu closed.  */
  	{
     	position: relative;
     	display: none;
  	}
</style>

Then there were other references to style all over the place like so. . . .

<a  class = textBanner style="text-decoration: none; target="_top" href="/Connect/ccm/cda/views/help.jsp?UID=222222222&IPADDR=10.114.60.63">Help</a>

So it looks like it's all over the place.

When the page is created, it looks like it adds the contentStandardText style to all of the site copy in the main section of the page. I did not add that class in the original, so it must be scripted to add that somewhere automaticly.

<a class="contentStandardText">This is a test of the default style outside of a table. (body style). There does not seem to be a body style defined so it most likely will be default Times. 

<table width="90%" border="0">
<tbody>
<tr>
<td>This is a test of the style inside of a table (table style). There does not seem to be a body style defined so it most likely will be default Times.</td>
</tr>
</tbody>
</table>

<p>This is a <span class="Links">link</span>.</p>

<p>This is <span class="linkedText">linkedText</span></p>

<p>This is <span class="linkedText2">linkText2</span></p>

<p>This is <span class="footerLinkedText">footerLinkedText</span></p>

<p>This is . . . <span class="contentStandardText">contentStandardText</span></p>

<p>This is . . . <span class="contentEmphasizedText">contentEmphasizedText</span></p>

<p>This is . . . <span class="FieldCommHeader">FieldCommHeader</span><br />
(it's bold, white)</p>
</a><br>

I've attached an example of a full page and the CSS file at text documents.

My first impression is that this is very disorganized (and the code is not very clean) as I would expect that the on reference to the one style sheet should cover everything. But since the page is fully generated by JavaScript from the Vignette system, maybe this is the way it should be.

Thanks for the opportunity to allow me to do some "deconstruction" of what's going on here - and thanks again for your help.

I agree the code is very disorganized. For example there's no reason for the external css file to be included more than once and it should only appear in the head of the document.

If you look through the html (which it sounds like you've done) you'll notice a lot of classes and ids applied just about everywhere it seems. They're not applied on the table element, but they're applied to lot's of things within the tables. Looks like they're usually applied to table cells <td> to divs <div> or to spans <span> within the tables.

The css file has a font-size applied to nearly every class in it so the font size seems to be controlled on nearly everything which is why you see different sizes than you expected.

If you would like to change the font for a particular piece of text you can search for that text in the html and once you've located it you should notice a class applied to an element somewhere shortly before the text. If you then look for that class in the css file you should see how that particular piece of text is styled and make changes if you want.

For example here's a line of code from the html:

<p><span class="contentStandardText">contentStandardText</span>

Say you want to change the way the text contentStandardText is displayed. If you look in front of tis line of text you notice a class applied to the span element. In this case it's class="contentStandardText"

Now if you go to the css and search for .contentStandardText you'll find

.contentStandardText
    {
    font-family: Arial;sans-serif;    
    font-size: 10pt;
    color: black;
    font-weight: normal;
    text-decoration: none;
    }

You can change those properties to affect the way the text displays in the html. Be careful though, because it will probably change other text as well. Anything element in the html that has been assigned a class="contentStandardText" will be affected.

Thanks again for the help.

I've got the basics on how to change the .css file and associations to the text in the HTML document so I'm good there.

Thanks for confirming that the code is disorganized. I'll even go as far as saying that it's a total mess. It will be one of the items that is addressed in the site redesign scheduled this year.

Have a great weekend and thanks again.