Do you ever use inline styles for per-page changes?

HTML & CSS
1

I am currently converting a website I did a while back to tableless CSS. One thing that I have learned in embracing CSS layout, is that tables did have this advantage: On various product pages there is a list of advantages in the left column, and benefits in the right column. Then the description follows in a couple paragraphs which span both columns. On each product page the list on the left column could be a couple words, or a whole sentence. So to keep the page looking good, I would simply adjust the widths of the table divider either right or left depending on the content.

Now, since all the style and layout is in the CSS sheet separate from the HTML, I don’t have the ability to make those adjustments per page to make it visually professional. I can only make global changes. My question is, when there are pages that benefit from incremental changes per page, do you use inline styles, or just accept the layout as is? Just to clarify: I am talking about using inline styles to override widths and lengths unique to a page, not styling the whole box inline.

2

No, I never use inline styles as there is never a need for them. If you are going to add a special rule to one line only such as this:


<p style="width:300px;background:red;margin:0;padding:10px">Test</p>

Then it is still far neater and easier to do just this:


<p class="test">Test</p>

That will allow you to change it from the stylesheet later also.

If you are constantly micro managing pages this way though then there is something seriously wrong with the design. Designs need to be consistent, usable and manageable as well as good looking.

The only time you would use inline styles is if you wanted to over-ride some css that may be coming from somewhere that you have no control over and even then a !important in the stylesheet should still take care of it.

If a single page has a lot of unique styles then there may be a case for having a separate stylesheet for that page but I’ve never yet found a reason to use inline styles apart from laziness :slight_smile:

3

Yeah that’s why I thought I would ask. It’s tempting to override certain widths of columns, just because I am picky about spacing. I come from a graphic design background so that kind of thing is like an OCD. I see alot of websites where there is too much space between columns for no other reason but because that is the layout. I just have to remember, it’s not print, so I need to forgo that much control when styling everything globally. In print, you can have global styling, but then override when you need to because not every page is exactly the same. Consistency doesn’t necessarily require EXACT sameness on every page all the time. I think that is a misunderstanding in the design world. It’s ok to fudge at least in the print world, because most of the times the eye will notice the difference in spacing between columns before it will notice whether you adjusted columns closer, in order to respond to the content.

It’s not really a problem with the design. It’s more like, whenever you have two columns and you don’t know exactly what content will go there (which is a real-world inevitability) you can end up with some columns with lots of space between eachother and others not.

4

Obviously when working with real data you have to accept that sometimes content will be one or two words or it may be half a dozen lines. Your design should cope with that automatically rather than having to adjust. Minor differences shouldn’t really be an issue.

I can’t really imagine a scenario where I would have to tweak things on an individual basis and hopefully the design would work whether there was one word or a thousand words.

I know you probably have a specific example in mind but I’m sure you could find a middle ground that would suit both aesthetics and manageability. It may be helpful if you have a picture of the problem unless you were just thinking out loud with no specific layout in mind.:slight_smile:

5

I actually do have a specific thing in mind. I will mock it up and cut and paste it.

Coping with it automatically is what I was wishing for, but it’s hard with global styles. For example, consistency could be: 300 pixel wide left column, and 200 pixel wide right column. Then whatever content goes in there, goes in there.

Another kind of consistency will be: I have two columns, and I always want 30 pixel space between each column regardless of what content is there. So, if there is only one word in the left column, the right column will automatically collapse so that there is 30 pixel space between the columns, adjusting widths organically to the amount of content within. That’s what tables did, organically adjust to the content. And maybe CSS3 tables will do that.

With a hard set widths for the columns, according to the external styles, I may end up with 50 pixel negative space between columns or 20 depending on the length of content. That actually reads to the eye as inconsistent spacing.

I’ll mock it up though to show what I mean.

6

Visually, this is what I mean. In print there are global styles but to respond to content differences, it is perfectly fine to override the styles. In web standards, that flexibility is absent, or at least as far as I know:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<strong style="color:#03F">With Tables I could adjust the widths of the columns to respond to the content so that the space between right and left columns is consistent pixel amount.</strong><br />
<br />
<table width="696"  border="0" cellpadding="10" cellspacing="0" style="background-color:#DDD">
  <tr>
    <td width="328" valign="top"><strong>Advantages  </strong><br />
      Lorem ipsum dolor sit amet,  consectetuer adipiscing <br />
       Elit sed diam <br />
       Nonummy nibh euismod<br /></td>
    <td width="328" valign="top"><strong>Benefits</strong><br />
      Facilisis at vero eros et accumsan <br />
      <br />
      <strong>Other</strong><br />
    adipiscing elit</td>
  </tr>
  <tr>
    <td colspan="2" valign="top">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis </td>
  </tr>
</table>
<br />
<br />
<table width="696"  border="0" cellpadding="10" cellspacing="0" style="background-color:#DDD">
  <tr>
    <td width="129" valign="top"><strong>Advantages </strong><br />
      dolor sit <br />
      Elit <br />
    Nonummy <br /></td>
    <td width="527" valign="top"><strong>Benefits</strong><br />
      Facilisis at vero eros et accumsan <br />
      <br />
      <strong>Other</strong><br />
      adipiscing elit</td>
  </tr>
  <tr>
    <td colspan="2" valign="top">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis </td>
  </tr>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
<strong style="color:#03F">With CSS the result is the same as in this below table, hard widths, lots of strange space between columns. I could if I overrode the global style inline.</strong><br />
<br />
<table width="696"  border="0" cellpadding="10" cellspacing="0" style="background-color:#DDD">
  <tr>
    <td width="328" valign="top"><strong>Advantages </strong><br />
      Lorem ipsum dolor sit amet,  consectetuer adipiscing <br />
      Elit sed diam <br />
      Nonummy nibh euismod<br /></td>
    <td width="328" valign="top"><strong>Benefits</strong><br />
      Facilisis at vero eros et accumsan <br />
      <br />
      <strong>Other</strong><br />
      adipiscing elit</td>
  </tr>
  <tr>
    <td colspan="2" valign="top">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis </td>
  </tr>
</table>
<br />
<table width="696"  border="0" cellpadding="10" cellspacing="0" style="background-color:#DDD">
  <tr>
    <td width="327" valign="top"><strong>Advantages </strong><br />
      dolor sit <br />
      Elit <br />
      Nonummy <br /></td>
    <td width="329" valign="top"><strong>Benefits</strong><br />
      Facilisis at vero eros et accumsan <br />
      <br />
      <strong>Other</strong><br />
      adipiscing elit</td>
  </tr>
  <tr>
    <td colspan="2" valign="top">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis </td>
  </tr>
</table>
</body>
</html>
7

No, I never use inline styles and I never will. I’m totally with Paul on this, I think he’s got this down 100% so no need for me to ramble on. :slight_smile:

8

The only time I’ve used inline styles in recent years is on a couple of occasions when I’ve needed to add an “emergency” notice to a page that I hadn’t expected to have to add an emergency notice to, at very short notice. By using inline styles, it saved time in both writing and testing to make sure I hadn’t caused any conflicts, as I really did only have a few seconds to make the change!

9

I don’t really like the idea either, because it of course goes against the idea of separating content from styling. Then again, you may not have a very insistent and picky creative director, dnordstrom ;). There might not be a solution to this that satisfies the pixel-control tendencies of a graphic designer but was also wondering if there is a external style solution. Maybe not. The fact of the matter is, web is not print, so you cannot expect the same things out of both. I am fine with that.

I definitely do NOT like the idea of muddying HTML with styling, just for the record.

10

NO, never. Paul had the best answer in his original reply, so I wont repeat what he said but I will add three additional reasoning.

1) the slippery slope. Let say you do an inline change.(maybe it was in one page in a site, or maybe it was easier than hunting down a class) and that change that pleases you or your client… it get repeated in a couple of more pages, then again… and again. Now you are essentially coding inline. On the other hand, if you had made class of off a set of rules and that suddenly became prolific in your code… well, that’s what a class is for.

  1. Management. you could do an ID if it’s that unique… or a chained class. It really will be easier to doodle if you managed the style from the style sheet. Consider that , if later on you decide to change the “skin” of your site… you will now have this odd hard coded rules you will have to hunt down and RE-HARD CODE. This may seem like a liltle thing but some sites actually allow visitor a choice of skin… or change look depending on the time of day, etc.

  2. Specificity. Remember , inline code trumps all other CSS rules. you may find random adverse effects when you modify your style sheet and dont see that change affected on this specific element, even tho your rule is the most specific in the style sheet. It’s one of those, that “that would never happen to me, that why i wrote it inline to begin with” things… that it until it DOES happen to you.

Odd that you should mention the CD… because if it requires that that kind of poor coding to create then the concept is probably not a very viable one, and this instance may be just the tip of the iceberg… and this is a Sr. AD saying this.

11

You had me at NO, never. :wink:

Yeah, you’re right, and Paul etc. So what I really want, what I think would be great, is columns that I can create with floats, or with position:relative > position:absolute, where I don’t have to set the width, where the divs will contract and expand depending on the content. That way I could set a padding right of 30px and when I add or subtract content the div would expand.

Ok you can stop laughing now. Really though, I am assuming that this is the intent of display:table-cell? Haven’t tried that yet.

12

Remember that anything display: table-row/table-cell, wont be able to have RP/AP as a child.

In either case, you wont get column width that adjust to each other unless you ALSO build your code as a table ( that is you will need an element for the table, another for the rows, then others for the table cell… and am still not sure that the table-cell elements in one row will flex to the width of corresponding table cell elements in another row .

in another words in order to do do what you are asking you are going to need not just display:table-cell, but also wrappers with display:table-row and display:table; Also that wont be very cross browser friendly… and your code will end up looking like this:


		<style type=text/css>
			.table{display: table;}
			.row{display: table-row}
			.cell {display:table-cell; border:1px solid red}
		</style>

			<div  class="table">
			
				<div class="row">
					<div class="cell"> cell content</div>
					<div class="cell">  table cell content</div>
					<div class="cell"> much longer cell content sample here</div>
					<div class="cell"> maps of reality</div>
					<div class="cell"> HWL</div>
			</div>
				<div class="row">
					<div class="cell"> cell content</div>
					<div class="cell">  table cell content</div>
					<div class="cell"> Longer content</div>
					<div class="cell"> maps of reality</div>
					<div class="cell"> HWL</div>
			</div>
				<div class="row">
					<div class="cell"> cell content</div>
					<div class="cell">  table cell content</div>
					<div class="cell"> Longer content. much longer cell content sample here</div>
					<div class="cell">maps of reality</div>
					<div class="cell"> HWL</div>
			</div>
			
			
			</div>

Which even in this basic example, isn’t pretty.

13

The question seems to have changed completely from the original question about inline styles to a question about css and tables:)

The question about inline styles is irrelevant to the discussion about css and tables as the answer is still don’t use them whether using tables or not. Just add classes where you need things to be different. It’s no harder than adding inline styles but much easier to manage later.

Regarding your question about tables automatically adjusting then I see no automation in your code abut a variety of forced inline styles to accomplish the goals you want. Tables will to some degree automatically adjust and if your data is tabular then you must use a table anyway.

We can still do the exact layout you have shown with css for ie8+ using display:table and no inline styles or without any need to adjust the code for either display.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrapper h3{margin:5px 0 0;}
.wrapper p{margin:0 0 10px}
.wrapper {
    background-color:#DDD;
    width:700px;
    padding:10px;
    margin:0 0 10px;
}
.data {
    display:table;
    width:auto;
}
.cell {
    display:table-cell;
    padding:0 30px 0 0;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="data">
        <div class="cell">
            <h3>Advantages</h3>
            <p>Lorem ipsum dolor sit amet,  consectetuer adipiscing<br />
                Elit sed diam<br>
                Nonummy nibh euismod</p>
        </div>
        <div class="cell">
            <h3>Benefits</h3>
            <p>Facilisis at vero eros et accumsan</p>
            <h3>Other</h3>
            <p>adispicing elit</p>
        </div>
    </div>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis</p>
</div>
<div class="wrapper">
    <div class="data">
        <div class="cell">
            <h3>Advantages</h3>
            <p>dolor sit <br />
                Elit<br>
                Nonummy</p>
        </div>
        <div class="cell">
            <h3>Benefits</h3>
            <p>Facilisis at vero eros et accumsan</p>
            <h3>Other</h3>
            <p>adispicing elit</p>
        </div>
    </div>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis</p>
</div>

</body>
</html>
14

Getting back to the original question about inline styles.

The only use that they have is when testing. If a style isn’t working in the stylesheet but does work when you move it inline then you know that the problem isn’t that the style doesn’t work but that there is something else overriding it.

15

Yeah the question changed, because if I wasn’t already convinced to not use inline for purposes other than what felgall is describing, I was convinced during this conversation. So I began to wonder if there was an external way of adjusting it.

The table-cell is the way to go as you demonstrated. I do not support ie6 at this point because I determined we don’t need to. And it looks like IE7’s fail is graceful.

Thanks everyone for the insight and help. :slight_smile:

16

Definitely not pretty, although I have read that that if you do not specify table-row or table, that the browser will insert an anonymous row div.

Digital Web Magazine - Everything You Know About CSS Is Wrong

17

right… some UAs do this. But the operative term for even those UAs taht do is “AN”. if you dont , add your own “div-row” all your elements with display:table-cell will be assumed to be in the same row. for what I understood from your post about using display:table-cell) this is not what you were going for.

Other than that, taht is handy not for equal col width, but for equal col. HEIGHTS. Again the drawback is that you wont be able to: use margins, relative position or AP direct children of elements with display:table-cell and that it doesnt support IE<8

18

Yes you are correct and the browsers will construct the missing elements and you don’t need to specifically declare a table-row wrapper. There used to be a long standing gecko bug where the table wouldn’t render correctly unless table-row was added but it was also later found that the bug only applied to styles embedded in the page. When located in an external stylesheet the bug went away. Its been fixed in current versions now anyway.

19

I have another reason the answer is “NO!!!” … and also an exception to the rule.

Why No? Because your style you are adding (Paul’s first example is a classic example of this) MAY NOT BE APPROPRIATE FOR ALL YOUR MEDIA TARGETS.

You are using the media attribute, right? As a rule of thumb, sending ANY CSS to “ALL” is a bad idea and frankly, broken methodology. Since most of the inlined style people use doesn’t bother with @media (I’m not even certain it can), when it comes time to make handheld, “screen and max-width” or more importantly “print”… bad things tend to happen. Again as I’ve said a billion times, web design should NOT just be about “screen” at the same magical combination of resolution and dpi setting you happen to be using. People do occasionally print pages, use them on hand-helds or small screens, screen readers, and even braille.

It plays to the four core reasons to use CSS:

  1. Different styles for each media type

  2. Ability to have different skins without changing the markup

  3. reduce the number of redundant declarations in the markup by using separation of presentation from content.

  4. Leverage caching models, not only to reduce bandwidth across pages by sharing like elements, but also to speed up loading of subpages by PRE-CACHING VALUES… Something the people who split up their CSS into page specific files often miss; Unless your page consists of nothing but bounce visits, pre-caching sub-page appearance is often a really good idea. ESPECIALLY when it eliminates an extra handshake on said sub-pages.

It’s like image recombination – loading two images as a single file so when you do the action, there’s no ‘delay’ waiting for the hover state image to load; Go to a sub-page, it’s CSS has already been downloaded making that sub-page appear to load faster, at a minor penalty to firstload.

THOUGH there are always exceptions to the rule – the only reason I wouldn’t remove the STYLE attribute from my toolbox. Sometimes, and this is VERY rare, the style CAN be used to assist in conveying DATA/Content. Not too long ago, ok, maybe a while ago… 13 months ago… We had a discussion here about showing stars for ratings and lighting them up… The solution I came up with:

Index of /for_others/TimMousel

May be nested span hell (might be able to fix that with generated content?), but it also uses the style attribute to pass the actual value to the CSS. Doing it this way also means that it works CSS off and images off without interfering with the different media targets, which can take or leave it.

Like anything else, there are always exceptions.

20

Yes, that’s a good point and there are always exceptions to the rule.:slight_smile:

Your example did also make me remember that I once used an inline style for a progress bar that was updated dynamically. It was easier for the programmer to simply write the percentage into the inline style to update the progress bar from 1- 100% rather than me setting up 100 classes for it.

<div id=“progress” style=“width:95%”>Progress bar</div>