CODEWITHSUNDEEP
htmlcssformatting
technillogue
technillogue

Reputation: 1571

What is good HTML in-line CSS form?

I want to make bubbles containing content, placed around a HTML page. So, I made a .bubble CSS class, and put the positional values as an in-line style. This gave me some rather long lines. The style guides of programming languages I've used dictate a maximum line length, and specify how overly long lines should be broken up. Something like

<div class="bubble"
    style="top: 10%;
    left: 40%;
    right: 60%;
    width: 480px;
    height: 295">
    Content.
</div>

...looks absurd. What is good form for this?

Upvotes: 1

Views: 221

Answers (3)

harrypujols
harrypujols

Reputation: 2284

EDIT: It's not necessary to have both left and right declarations. If you tell the browser that the element is 40% from the left, it will know that it's 60% from the right. That will save you a few characters of code, and will not change the outcome.

You didn't make a bubble css class. You made a bubble class and added inline css to the div tag. You have quite a few alternatives. I'm not quite sure why you haven't chosen them.

If line length is an issue, delete the spaces. You don't need them, and keeps the line shorter.

<div class="bubble" style="top:10%;left:40%;width;480px;height:295;">
Content.
</div>

But, agreeing with another post here, do not use inline css. It's bad practice. If the styles must be within the file (as in Tumblr themes) put them inside a style tag.

<style> .bubble {top:10%;left:40%;width:480px;height:295;}
</style>

Or do what most of us do, and put the style on a separate css file, with a link to it between the head tags.

 <link href="yourstyles.css" rel="stylesheet" />

Upvotes: 1

vector
vector

Reputation: 7576

Did you consider doing this through js and jQuery? Alternatively, you could something like this:

$('.someBubble').css({
top: 10%;
    'left': '40%',
    'right': '60%',
    'width': '480px',
    'height': '295px'
});

Not knowing what constraints or limits you have to work with, this would at least let you keep styles from inlineing.

Upvotes: 0

Justin Self
Justin Self

Reputation: 6255

I would rather look at that in one line. With that said, I pretty much never see it broken like that. And in some cases, I think the browser removes the line breaks anyways.

Though I would really rather not see in-line CSS.

However, if you have to have in-line CSS, I think the standard of 'whatever fits on the screen' which is 80 characters-ish still holds.

EDIT

Just to be sure, I did some light searching for in-line CSS guidelines and ever site I found is strongly against it as a practice all together. I know your question was about in-line CSS but I feel obligate to say don't. It breaks the concept of separation of concerns. It tightly couples your html to your CSS. What if you want to play around with a new design? Now you have to edit your html directly and risk breaking the flow or the page altogether instead of just pointing to a new CSS file.

If you need specific CSS for one particular element, slap an ID on it and throw it in your external CSS doc.

Upvotes: 4

Related Questions