Can inline styles be used with classes?

**0sync0** · 02-19-2008, 11:10 AM

While I'm learning and testing CSS examples I find it a big nuisance to constantly scroll back and forth between content and styling. It looks like inline styles only work with elements but I'm hoping there is a way to make them work with classes.

**dtm32236** · 02-19-2008, 11:20 AM

huh?

inline styles work with classes:

<style type="text/css">
.className {...}
</style>

or <div class="className" style="...">

anything in .className or the style=".." will overwrite your external styles.

**David Harrison** · 02-19-2008, 11:22 AM

0sync0, that's why most people put styles in a separate file, you can then just switch between two open windows, or depending on your editor, two open tabs.

**0sync0** · 02-19-2008, 11:28 AM

Originally Posted by dtm32236

huh?

inline styles work with classes:

<style type="text/css">
.className {...}
</style>

or <div class="className" style="...">

anything in .className or the style=".." will overwrite your external styles.

I had already tried that. I guess there is something else wrong.

**Frank62** · 02-19-2008, 12:59 PM

Sync,

If you want to do the styling inline, it is no use and maybe even counterproductive to give elements (= everything in the <body> except scripts) a className. Just use <div style="">, <p style="">, etc.

But I would strongly recommend to use style blocks or external style sheets. With a proper editor (www.htmlkit.com, build 292 is good and free) you can indeed easily switch between tabs, as David suggested.

And when you use a style block, you can jump to the top of the code file with Ctrl + Home, and to the bottom with Ctrl + End.

**0sync0** · 02-19-2008, 01:33 PM

Originally Posted by Frank62

Sync,

If you want to do the styling inline, it is no use and maybe even counterproductive to give elements (= everything in the <body> except scripts) a className. Just use <div style="">, <p style="">, etc.

But I would strongly recommend to use style blocks or external style sheets.

I realized that using the class didn't make sense with an inline style. Removing the class solved the problem.

The site already uses external style sheets.

Right now I'm working on a test page converting a header within a table to CSS. When I'm done it will become a server side include. In a situation where you have a SSI header, is using inline styles so horrible?

The code below shows what I'm doing to get a graphic to display acroos the screen. Is the method used ok or is there a better way?

HTML Code:

<div style="background-image: url(images/g_molding.jpg);
	background-repeat: repeat-x;
	height: 17px;">
</div>

**Frank62** · 02-19-2008, 01:43 PM

Is the method used ok or is there a better way?

That's quite alright. As long as you don't use the old FrontPage method, which declares styles in every tag. Also if the tag is a repetitive one, such as <p>s. Changing such a page is a horrible task. That's why I emphasized the strongly so strongly... :-)

**0sync0** · 02-19-2008, 01:48 PM

Originally Posted by Frank62

Changing such a page is a horrible task. That's why I emphasized the strongly so strongly... :-)

I will be for 'real' content. But I don't see the point for a header that consists of empty DIVs.

**Frank62** · 02-19-2008, 01:55 PM

Empty divs should be deleted, but furthermore your thought isn't that peculiar. Unless the inline style declaration consists of a number of property-value combinations. Then it will be more difficult to see errors than it is when you have them neatly arranged in a style block.

**0sync0** · 02-19-2008, 02:03 PM

Originally Posted by Frank62

Empty divs should be deleted

HTML Code:

<div style="background-image: url(images/g_molding.jpg); background-repeat: repeat-x; height: 17px;"> </div>

In this code example, which I posted earlier, if I take out the styling it will be an empty DIV except for the class.

**Frank62** · 02-19-2008, 02:42 PM

Sync,

An empty div is a div without content, so without anything between <div> and </div>.

**dtm32236** · 02-19-2008, 02:44 PM

some browsers don't like empty divs and will treat them improperly...

it's suggestible to put a comment or something inside of it

<div class="emptyDiv"></div>

Thread: Can inline styles be used with classes?

Thread Tools

Display

Can inline styles be used with classes?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions