Forum Moderators: open
When I use an H1 tag in Frontpage, I get this massive text. I look at other sites with the text at least half the size of mine, but their source code doesn't really show anything much different than mine. I don't really see that there's any applied CSS or other effects, outside of CSS is there a safe way to reduce the size of my H1 titles without getting penalized?
I don't really see that there's any applied CSS or other effects, outside of CSS is there a safe way to reduce the size of my H1 titles without getting penalized?
Well, the css is there somewhere. Besides reverting to old-style (and horribly un-maintaianable) coding like this:
<h1><font size="2">Lorem ipsum</font></h1>
...css is the only way to affect the presentation of many html elements. If you're trying to find the css in the pages you're looking at, look in the <head> of the document for bits of code like this:
<link href="../lorem/ipsum.css" rel="stylesheet" media="screen" title="Default" />
...or this:
<style type="text/css">
@import url(../lorem/ipsum.css);
</style>
...or this:
<style type="text/css">
h1 { font-size: 120%; color: #900; font-weight: normal; }
</style>
As far as I'm aware, search engine algos do not parse css files. Besides, if you use css as intended--to modify presentation of html elements--I think it's vanishingly unlikely that you'll have a problem.
On the other hand, if you were to mis-use the html in a sufficiently outrageous way--by, for example, marking up an entire page as <h1> in a crazed attempt to game some part of a S.E. alorithm--you are likely to experience problems. But such problems have nothing whatever to do with css.
The only way that I can think of that css could cause you any problems is if you were to use it for keyword stuffing (e.g. by having huge paragraphs of keywords 'hidden' using identical text and background colours). But even in this case, it wouldn't be the css that caused any problems if the algo or a hand-review caught and penalized you, it'd be the attempt to game the system.
As a general rule (no people, you don't have to flame me, I am aware that the algorithms sometimes seem like pretty blunt instruments...), if you don't try to get around the system you won't be penalized, but if you do try to get around the system using any technology, you'll be at increased risk.
-b
WBF
I never use CSS for any sites I develop, and as such don't really know how I would go about using CSS to change the H1 size. I imagine it can't be as simple as sticking some coding in the head area of the html page, I'd need a separate page somewhere on the server specifically telling the page to reduce any H1 tags, right?
CSS Crash Course [webmasterworld.com]
You're making an excellent decision to begin learning CSS,. Especially for controlling the way your fonts display in various elements, it's easy and gives you "powers and abilities far beyond mere html mark-up." This is a good trip makes for greatly improved pages and economical html files!
1. Take a notepad file and rename it styles.css, and inside of that notepad paste the following:
h1 {
font-size: 20px;
}
2. Add the following in the head tags:
<head>
<link rel="styles" type="text/css"
href="/css/styles.css" />
</head>
3. And then in the html when I want to type my H1 tags, I type it like this:
<h1 id="styles">Text I want to Reduce Size of</h1>
Am I getting warm? The CSS tutorial is very good, but I'm not 100% sure if I'm going about it correctly.
The bonus is, you can do that with any element (not to mention positioning, to an extent), using css.
Excellent post, bedlam, that's why I like this place......
1) A CSS file in your root directory called styles.css and containing:
h1 {
font-size: 20px;
}2) A link in the head of your document like so:
<link rel="stylesheet" href="styles.css" type="text/css" />3) An <h1> in the body of your HTML like so:
<h1>This is my heading</h1>Then your <h1> will be 20px tall. The first part of your CSS block is called a selector. In this case you're emplying a simple element selector (h1) which selects all 'h1' elements and applies the following style to them. Of course, the selectors can be more complicated. For example, given the HTML you originally mentions (<h1 id="styles">) you could apply styles only to that particular <h1> with the CSS:
h1#styles { color: red; }[edited by: encyclo at 10:01 am (utc) on July 10, 2006]
[edit reason] fixed markup for future reference, see below ;) [/edit]
