Inline styling with HTML or CSS?

N

Namibnat

New member
I just wanted to throw this out there, I usually use the span tag with a style attribute to a lot of styling, just because I always keeping going back an forth (make it a little more bold, a little bigger, etc) but I realize that I often waste a lot of time when all I end up doing is making something italics and stuff like that. I'm just thinking out loud because of stuff that I read recently, and thought it would be interesting to get some opinions.
 
I like Joshua's approach to your problem. Eric Meyers does some pretty wild things and he knows what he is doing so the other approach is fine in that case. Your easiest is to define a bunch of classes. These could be for specific changes in color and font size among others. You could also set some attributes for <strong> and <em> that would control how those tags displayed their results. Just about everything else that is individual will need a class assigned. Also remember that the entire paragraph can be control by setting the attributes for the <p> tag.
 
if your problem is redundancy, then just use classes. You could even make a class that just bolds whatever you wish to bold. Never use HTML properties, they are being deprecated and replaced by CSS styles. The whole point of CSS is to make styling your web page easier, it is just a matter of knowing how to make CSS work for you and not against you.
 
What I find myself doing, is using a span/div tag any setting the style in the "style=" attribute. If I find that I am using the same style more than once, I'll make it a CSS class and use it that way.

The biggest thing I use is the base CSS is used to clear all default for all browsers. You can visit Eric Meyer's website for that CSS, I think it's called "browser reset". it basically removes all margins / borders / spacing between elements.

Here's what I've used for a little while:

/* General reset for almost all browsers */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
 
Back
Top