Is It Okay to Use CSS and HTML in the Same Statement?

[gouri]

I have heard that it is better to use CSS instead of HTML when you can but sometimes there are situations in which you need to use HTML.

For a heading tag, I have two options.

One of them is to use CSS and HTML together:

<h1 style="text-align: center;"><font size="5" face="arial, sans-serif">Text Here</font></h1>

and the other is to use only HTML:

<h1 align="center"><font size="5" face="arial, sans-serif">Text Here</font></h1>

Can you please tell me if it is good to use both CSS and HTML or is it better to use only HTML?

All the pages on the site would have an h1 tag.

[Brett_Tabke]

> The <font> tag has been wildly deprecated for years

Which means nothing. The 55 Chevy was deprecated in 1956, but I just saw one sell for $250,000 on TV. It still drives nicely and looks better than most cars sold today.

Granted browsers have come a long ways in standarization, but with the explosion of small screens (eg: phones), the FONT tag is making a bit of a comeback with mobile designers. The flexibility of allowing the device to determine the correct font via the FONT tag, means far less dreaded 'pinch' and 'zoom'. Having to zoom the screen is slowly becoming a known hazard to mobile programming and the font tag size (+ and -) suggestions tend to be more flexible and user friendly than CSS dictates.

Additionally, the FONT tag is always faster than CSS declared fonts. Fonts are always inline and render faster than CSS applied fonts. Additionally, css is usually external with require another file load or a cache if modified check.

[httpwebwitch]

The benefits of a modern approach to CSS style outweigh the arguable benefits on small screens. If proper caching is employed, reusing a CSS external sheet is better than forcing the client to download the complete stylistic makeup with every page view.

For example.

The markup of this page you're viewing right now uses the <font> tag extensively. I just did a fun experiment - removing all the <font>s from this page reduced the page size by 11K.

Throwing out the <table> markup, I'd guess would slim it down by approximately 7,200 characters. there are 84 <b> tags... so using a once-defined CSS rule for bold would lighten this page by another 588 characters.

I bet this page could be redesigned to use half the bandwidth it currently uses, by employing modern web design techniques. And by modern, I mean techniques people were using 8 years ago.

[albo]

I think you should read lucy24’s posts very carefully. She is wise. Also, you said: "I am using a template and it does have stylesheets, but I need some more knowledge about programming and CSS before going in them and working on the elements they have specified." Fine. But an essential part of CSS programming knowledge is the "C" - the Cascade - seeing how parents influence children, and seeing the priorities and strengths of selectors. For that, you could build your own style sheet and either link it *after* the template one or put it in the head section of your html.

As for font-sizes, give up on being pixel-perfect. Aim for legibility across browsers. I'm typing this comment now on an iPad in a surprisingly small font-size: partially my fault, because I've not clicked to zoom. But the rest of this page appears in a very decent and legible font size. In many circles it's argued that a fair method is to go with initial font-size 100%, then go with either ems or percentages thereafter (remembering *also* to do the math to adjust margins and padding accordingly). One *brief* (thank goodness) book that goes into all this is Ethan Marcotte's Responsive Web Design. Of course, for the depths, plunge into master Eric Meyer's stuff.

[Fotiman]

The flexibility of allowing the device to determine the correct font via the FONT tag, means far less dreaded 'pinch' and 'zoom'

I have no idea what this is supposed to mean. By "correct font" do you mean the font size, the font family, or both? Whatever you meant, there is absolutely nothing that the font tag gives you that CSS doesn't, except for more muddled HTML and less efficiency. The font tag size using + and - just give you relative sizing, which is not any more flexible or user friendly than using relative sizing in CSS.

Additionally, the FONT tag is always faster than CSS declared fonts. Fonts are always inline and render faster than CSS applied fonts. Additionally, css is usually external with require another file load or a cache if modified check.

Hahahahahahahahahahahahah!
Oh, I'm sorry, I thought you were joking for second there, simply because that's such a ridiculous argument. The font tag is going to add to your HTML page weight, adding to the download time. An external CSS file, on the other hand, will likely be cached. In addition, it's not as though you would have 1 external CSS file just for your fonts. And rendering of CSS applied fonts... you're talking microseconds. There's no logical argument to be made for speed by using font tags. Sorry, this point of view is just plain silly.

In addition, not having a clean separation of markup and presentation will probably lead to increased maintenance time, as developers will need to be looking in multiple places if they want to change the font appearance.

I bet this page could be redesigned to use half the bandwidth it currently uses, by employing modern web design techniques. And by modern, I mean techniques people were using 8 years ago.

I've been saying that for years, but it falls on deaf ears. There's a ton of efficiency to be gained on WebmasterWorld.

[StoutFiles]

Granted browsers have come a long ways in standarization, but with the explosion of small screens (eg: phones), the FONT tag is making a bit of a comeback with mobile designers. The flexibility of allowing the device to determine the correct font via the FONT tag, means far less dreaded 'pinch' and 'zoom'. Having to zoom the screen is slowly becoming a known hazard to mobile programming and the font tag size (+ and -) suggestions tend to be more flexible and user friendly than CSS dictates.

True, but that's what browser checking is for. Sites should consider mobile versions with mobile CSS ready to go.

[Fotiman]

@StoutFiles, "True" in what sense?

[lucy24]

Goodness. Turn my back for a second and suddenly it's a Featured Front Page Discussion. (Never figured out what that means. Does Brett or someone like him pull numbers out of a hat?)

gouri, still with us? I was thinking it would be useful to backtrack a little bit here. Talk about what you want your page to do, who your target audience is, how important it is (or isn't) to keep control of site appearance. That kind of thing.

When you're talking about the look of a site, "target audience" basically means age and Internet experience. Do they have certain expectations about what a www page is supposed to look like? Are they likely to have physical needs? You've asked several times about zooming text, which implies that this is a potential concern.

A site aimed at 19-year-old rappers will look very different from a site aimed at 50-year-old philosophy professors. A site that people pull up on their cell phones to check something will look different from a site they're planning to read slowly on a full-size screen.

[lucy24]

Now then...

:: turning back to previous page ::

Can you change the "16px" setting? It's an odd size for a sans-serif font; it makes the whole box look a little bigger and more emphatic than ordinary type. Is that the intention of this area? It seems redundant if you're also going to put in a heading.

Are you saying that the 16px setting is not big as you would expect it to be? I looked and the default font size for the heading box is 18px, not 16px but the h1 tag, I believe, is not defined in the CSS stylesheet. If this is the size, are you saying that I don’t need to put an h1 tag on my webpage now? Just type the words that I want to put in the heading without using an h1 tag? Or are you thinking that I don’t have to change the size, but that I should put the h1 tag in and use font-size:100%?

It all depends on what the box is meant to do. If it's intended to contain only the primary heading,* then 16pt sans-serif is actually on the small side: only a little bigger than regular body text. If it's meant to contain the heading plus some further text, then that would be fairly emphatic text. But for SEO purposes you'll definitely need explicit <h1> tags. (Bing is always grumbling at me because my secondary pages start with <h2>.) Since there is only one <h1> on a page, it doesn't really matter whether its styling is inline or in the page's stylesheet. But if you have lots of pages, each with an <h1>, you should have a shared external stylesheet that says it once and for all.

* Am I the only person in the world who has an ineradicable mental block on "header" vs. "heading"? I have to look them up every time. <th> is one and <h1> is the other. And, er, <head> is the third.

Font-family and font-size can both be applied to divs. So if it is genuinely impossible for you to use a stylesheet, then you can wrap all your paragraphs in a single div.

Would I style the divs so I wouldn’t have to style every p style tag with font-family and font-size and save on coding in the process? By styling the divs, would all the paragraphs inside of it take the styling specifications of the div?

Exactly. UNLESS-- this is a significant "unless"-- there is a stylesheet somewhere else that gives explicit styles for the paragraph element. But this is best explained if you can point to specifics.

Inline, you could say
<div style = "font-size: medium; font-family: Arial, sans-serif; line-height: 1.2;">

But margins above and below paragraphs would have to be set individually on each paragraph. A stylesheet could say

p.nameofpara {margin: .5em auto 0;}
or
div.nameofdiv p {margin: 1em auto;}

The second declaration overrides the first-- not because of position but because it's more specific. "Any paragraph that comes inside <div class = 'nameofdiv'>." Inline styles override everything.

But, again, think carefully about whether you want to force a size or font-family for the body text. Does your template say anything about size of body text? Can you change it? If it has to say something, you can say "font-size: inherit" and it will be just as if you didn't mention a size at all.

I don’t want to force a size or font family for the body text but if I want to change what I see when I start typing in the body text, I think that I would have to make some specifications? If I don’t make any specifications, I am not sure how I would be able to make changes?

The body text in my template has a default of 12px, so if I just start typing in my body text box, it would be Arial 12px. I feel that this is too small so I am trying to figure out what I should do so that I have a larger font-size in my body text. I can change it to another number (e.g. making it 16px in a div using inline CSS). If I say font-size:inherit and just start typing in my body text box, would the text be 12px? If that is the case, should I use a percentage such as 133% for font-size so the text is 16px instead of 12px and not use font-size: inherit?

Can you change the template itself? Or only override it inline? There is one crucial difference between "font-size: medium" and "font-size: 100%". The "medium" version means use the user's own preferred default size, whatever it may happen to be. The percentage version means make it the same size as its parent element. So if you say "font-size: 100%" inside of something that is set to 12px, your added text will continue at 12px.

Microsoft Word is a word processor. Are you talking about an HTML Preview function?

I am copying and pasting the text from the webpage to Microsoft Word the word processor and the text looks larger there (the size that I want it to be) than it does on the webpage. I also looked at it in HTML preview function and the size that the text appears in Microsoft Word is the size that it is appearing in the preview. That is how I want it to appear on my webpage, but at the moment, it isn’t.

HTML Preview always has its own preferences. You may or not be able to change them. I know this one well: Every time there is an upgrade to SubEthaEdit, I have to go find the plist file, hunt down the HTML Preview font-size, and change it from 11 point Lucida Grande back to 15 point Palatino. (I have no idea where it gets the 11pt stuff. It isn't a Webkit default; nothing else uses it.)

Please don't use the HTML <font> property at all, for any reason. It is heavily deprecated and there are always alternatives. This goes double for values like "size='3'" or "large" where the exact proportion is up to the browser. If you use percentages, the proportions will be almost identical everywhere. Sometimes there will be tiny hiccups based on the user's physical setup, but these are most noticeable at very small sizes.

I will switch from using the font tag to using CSS but I have seen the same situation with CSS with regard to the size of the body text being the browser’s default size and not the size that I specified. Maybe this is due to the browser’s default size for text being shown if a specific font size (using CSS or HTML) is mentioned. When you say this goes double, do you mean “The same thing applies for….”? I think that you are saying it is better to use percentages (CSS).

As you see, there are different opinions about <font> ;)

The problem with anything like "size='3'" or "font-size: smaller" is that it is up to the User-Agent (browser or whatever) to decide just how much larger or smaller to go. This in turn depends partly on the age of the browser. Remember when fonts only came in permitted sizes? 7, 9, 12, 14, maybe-but-not-necessarily 16, 18, 24...

Maybe this is due to the browser’s default size for text being shown if a specific font size (using CSS or HTML) is mentioned.

Did you mean "is not mentioned" ? The user's default size will be used

#1 in the entire document, if you don't say anything about font size or if you say something like

body {font-size: 100%;}
or
body {font-size: medium;}

#2 in selected parts of the document, if and only if you say something like

<p style = "font-size: medium"> (inline)
or
p.basic {font-size: medium;} (style sheet)

These will override any intervening size changes.

[sidhucollettepf]

Both are very important.CSS helps for creating a better design with the help of HTML.

[gouri]

@lucy24,

I know that I have not posted in this thread for a while, but I was hoping that you could give me your opinion.

Talk about what you want your page to do, who your target audience is, how important it is (or isn't) to keep control of site appearance. That kind of thing.

The site is an information site. Most visitors come from a desktop or laptop, but I have seen some increases in visitors from smartphones. Most visitors are probably experienced web surfers. The target audience is individuals between 20 and 40 years old.

Based on these factors, can you make any recommendations to me about font size and maybe any other presentation factors that I should be keeping in mind.

Thanks.

[lucy24]

I've said from the beginning that you're better off not setting an absolute font size at all. Just relative sizes for the parts you want to be bigger, like headers or emphatic text.

Mobiles are definitely on the increase. They tend to be much more limited than desktops in their range of available fonts along with user options in general. This will change in time of course-- but no matter how you slice it, there just isn't physical room for a long string of menus.

I detoured here and spent some time looking at my iPad's options. There basically are no browser preferences as I think of it: default fonts, sizes and so on. There are system-wide accessibility settings.

You've got a choice between making a separate mobile-specific version of the site-- which involves extra work making sure the users end up on the appropriate page-- and making a responsive site. That means let it be as flexible as possible. Less is more.

In the course of looking around, I discovered that Safari-- the real one, not the stripped-down iPad version-- comes with a whole menu of user-agent spoofers. If I claim to be an iPad, half the menus in Google Advanced Search disappear. If I claim to be an iPhone, the whole black bar disappears.

So look around your current array of browsers, find one that can impersonate other user-agents, and look at your site in as many as possible. If you're pretending to be a mobile you'll have to resize your browser window manually to get the full effect: when you claim to be an iPhone you'll get a different version of the site, but it still spreads out to fit the whole window.

Conversely, try setting your regular browser to different fonts and sizes. Now look at your site and make sure it looks right. Not the text, the overall layout. Menus crashing into each other? Pictures overlapping? Unwanted scroll bars?

I can't remember if it was this thread or another one where I mentioned finding a blog by a writer I was interested in. The body text was explicitly set to ten-point medium-gray Courier. (I am not making this up.) The author is almost exactly my father's age-- old enough to know better. When you hit something like that, it becomes a choice between not reading it at all, and changing your browser preferences to "always use my fonts and colors" (exact wording may vary). You don't want your young able-bodied readers making that choice, because the odds are overwhelming that they'll come down on the "I'm outta here" side.

[gouri]

@lucy24,

Thank you for describing the differences in what I will see in desktops and mobiles. It is very informative.

Also, thanks for mentioning the different ways in which I should look at the site so I have a good idea of how it appears on different screens.

I've said from the beginning that you're better off not setting an absolute font size at all. Just relative sizes for the parts you want to be bigger, like headers or emphatic text.

Is it good to use percentages?

Also, the template that I use has defined font sizes for the h1, body text, header and footer so will the percentage that I use (e.g. 105%) for the body text, for example, use the defined font size for the body text from the template as the base value instead of the default font size (which, I believe, is usually medium) of the browser?

I appreciate your help.

[lucy24]

For ordinary text, "105%" means "105% of the size it would have been if I hadn't said anything". But headers aren't ordinary text. The difference is that even if you don't say anything about header size, the browser has laid down a default.

Let's do some hands-on stuff. It's more useful than reading explanations.

Make this into a document, name it anything ending in .htm or .html, and open in a browser:

<html>
<head>
</head>
<body>
<h1>Header 1</h1>
<p>Plain paragraph here</p>
<h2>Header 2</h2>
<p>Plain paragraph here</p>
<h3>Header 3</h3>
<p>Plain paragraph here</p>
<p>... and a second one so you can see the spacing</p>
<h4>Header 4</h4>
<p>Plain paragraph here</p>
<h5>Header 5</h5>
<p>Plain paragraph here</p>
<h6>Header 6</h6>
<p>Plain paragraph here</p>

<hr>

<table>
<tr>
<td>First row, first table cell</td>
<td>First row, second table cell</td>
</tr>
<tr>
<td>Second row, first table cell</td>
<td>Second row, second table cell, with extra text so you can see how it behaves when the browser has to wrap things around and make decisions about alignment</td>
</tr>
</table>

</body>
</html>

Pretty revolting isn't it? All those different sizes, margins and layouts are set by your browser. (Most browsers seem to come out pretty similar, although they don't have to.) You can throw in other things like lists if you feel like it.

Your template has taken a preliminary step by replacing these default styles with something intended to look a little less horrible. Anything written in a stylesheet takes priority over the browser's built-in styles. And you're going to take a further step by editing your template's stylesheet to make things look the way you want them to look.

Posts from earlier in this thread make it sound as if you're able to edit your stylesheet but you're afraid of breaking something. There is an easy way around this. Suppose your current stylesheet says

h1 {text-align: left; font-size: 120%; font-weight: bold;}

You are not going to change or delete this. Not yet. Instead, copy and paste the rule-- make sure you get the whole thing, down to the closing } brace-- and wrap one of them in comment tags so it looks like this:

/* original style */
/* h1 {text-align: left; font-size: 120%; font-weight: bold;} */
h1 {text-align: left; font-size: 120%; font-weight: bold;}

Anything inside those /* tags */ will be invisible to the CSS parser-- but it's perfectly visible to you. If you're working in a friendly editor, it may even show up in a different color to remind you. If you now change the working CSS

h1 {text-align: center; font-size: 200%; font-weight: normal; font-style: italic;}

and then decide you've made a dreadful mistake, all you have to do is copy from the original into your active CSS. Takes all the scariness away doesn't it? If the CSS is a free-standing document, you can even make a copy of the whole file and name it something like "original.css". Now edit away, and if you goof, just copy again from the original.

Now make a style sheet

<style type = "text/css">
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
</style>

and paste it into that generic html document, between the <head> and </head> lines. Open in a browser again-- or refresh the page if you never closed it-- and you'll see that all the headers are now the same size: you've replaced the browser's range of sizes. But they are still boldface and still left-aligned, because you didn't say anything about {text-align} or {font-weight}.

Delete or comment-out that "h1, h2..." line and replace it with

body {font-size: 200%;}

Reopen or refresh, and your headers are back to their original proportions-- only now everything is twice as big. Headers are inside the body (technical term: they are descendants of the body), so anything you say about the body will apply to the headers as well. Unless there's an intervening <div> that changes the size again.

Is the table at the bottom now smaller than everything else? Your browser has probably set it to
{font-size: medium;}
meaning the user's overall default size, regardless of what's happening around it. But if you add a line to your CSS

table {font-size: inherit;}

the table will puff up to match the surrounding text, whatever it happens to be. Change the line
body {font-size: 200%;}
to a different number, like 50%, and everything including the table will zoom downward.

And now let's give it all some proper styling. Replace the current stylesheet with

h1, h2, h3, h4, h5, h6 {font-weight: normal; font-family: sans-serif; margin-top: 2em; margin-bottom: 1em;}
h1 {font-size: 250%;}
h2 {font-size: 200%;}
h3 {font-size: 150%;}
h4 {font-size: 120%;}
h5 {font-size: 100%;}
h6 {font-size: 85%;}
table {font-size: inherit; border-collapse: separate; border-spacing: .25em; border: 1px solid black;}
td {text-align: left; vertical-align: top; padding: .5em; border: 1px solid black;}
p {margin-top: .5em; margin-bottom: 0;}

Notice all those measurements in ems? An em always means, uh, your own em. That is, it's determined by the current font size. Most of what I put in here is my own boilerplate. For example, headers generally have the same margins on paper-- but a higher-level header will have a physically bigger margin because it's in a bigger font.

---

Wasn't that fun?

[confused76]

It's better to use css than html, but nowadays,most of us used javascript in making a web page.

[remas2010]

Also, can divs be used with inline CSS or would I have to use span? <snip URL>

I appreciate your help.

[edited by: bill at 2:07 am (utc) on Mar 31, 2013]
[edit reason] no links to your sites [/edit]

[lucy24]

<ot>
How on earth did the auto-converter make that into a straightforward link when I can't even identify the encoding?

:: shuffling papers ::

Oh, D8 and D9. Arabic?

:: further shuffling ::

Yup.
</ot>

spans and divs are different things. In general span = inline element; div = block-level element. Both can be used inline--
whoops! two different meanings of "inline" there
--but really it's better for several reasons not to use inline CSS at all.

[drhowarddrfine]

Two things:

Don't know if it was said but not only was the font element deprecated 15 years ago, it no longer exists in HTML5 so that's one more reason not to use it.

@packmover - Do your logs really show users going back that far? My little company has almost 20 clients we actively maintain and the oldest IE version we ever see is IE7 and that's only one or twice a week.

Our standard contract only guarantees back to IE8.

[MarkTheMan]

I often use CSS mainly.
I believe it makes the code look tidier, because the HTML has less to look at, and you can focus more on content, and SEO. whereas if you use internal CSS, ie. <h1 style=" "></h1> , It looks messy as you have more than is necessary.
You can simply replace it by using an external css file.
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

Simple.
Define all CSS there,
and use <h1 style="bob"></h1>
Looks neater.

[lucy24]

Oh, lord. It's The Thread That Wouldn't Die :)

[gouri]

@lucy24,

You are not going to change or delete this. Not yet. Instead, copy and paste the rule-- make sure you get the whole thing, down to the closing } brace-- and wrap one of them in comment tags so it looks like this:

/* original style */
/* h1 {text-align: left; font-size: 120%; font-weight: bold;} */
h1 {text-align: left; font-size: 120%; font-weight: bold;}

Anything inside those /* tags */ will be invisible to the CSS parser-- but it's perfectly visible to you. If you're working in a friendly editor, it may even show up in a different color to remind you. If you now change the working CSS

h1 {text-align: center; font-size: 200%; font-weight: normal; font-style: italic;}

and then decide you've made a dreadful mistake, all you have to do is copy from the original into your active CSS. Takes all the scariness away doesn't it?

Thanks for the detailed instructions about this. They definitely help to test things.

h1, h2, h3, h4, h5, h6 {font-weight: normal; font-family: sans-serif; margin-top: 2em; margin-bottom: 1em;}
h1 {font-size: 250%;}
h2 {font-size: 200%;}
h3 {font-size: 150%;}
h4 {font-size: 120%;}
h5 {font-size: 100%;}
h6 {font-size: 85%;}
table {font-size: inherit; border-collapse: separate; border-spacing: .25em; border: 1px solid black;}
td {text-align: left; vertical-align: top; padding: .5em; border: 1px solid black;}
p {margin-top: .5em; margin-bottom: 0;}

Notice all those measurements in ems? An em always means, uh, your own em. That is, it's determined by the current font size.

This is a good way to style a page. Thanks for the recommendations.