PDA

Click to See Complete Forum and Search --> : Font size

slyth
01-06-2007, 06:01 AM
The text defined as "heading" is being displayed with a smaller size than the rest of the text whilst the opposite is intended (see styles)

Attachment contains screenshot.



history_content.html
-----------------------------
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<span class="heading">
Who invented radio?
</span>

<div class="text">
Many people were involved in the invention of radio transmission of information as we know it today. Despite this, during its early development and long after wide acceptance, disputes persisted as to who could claim sole credit for this obvious boon to mankind. Much of this argument was and is driven by perceived profit or national pride, and so tends to consider such issues as 'the first practical...' (for a given value of 'practical'), or whether the development took place in the inventor's country of birth or not.
James Clerk Maxwell performed the theoretical physical research which correctly predicted the existence of radio (and all other electromagnetic) waves, and that Heinrich Rudolf Hertz was the experimental physicist who first created radio waves in a controlled manner. Both, though, did not devise practical systems for widespread use. Later developments are greater or lesser engineering developments of their work and so lead to the 'inventions of radio' (eg., the objects, processes, or techniques to transceive information), which are certainly major developments in the field.
</div>
</html>


styles.css
<style type="text/css">
.heading
{font-size:14pt;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
color:black;
background-color:white}

.link
{font-size:12pt;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
color:#FF4747;
background-color:white}


.text
{font-size:12pt;
font-family:arial,helvetica,sans-serif;
color:black;
background-color:white}

</style>
Centauri
01-06-2007, 07:48 AM
Copying and pasting your code produces the correct result for me in both FF 1.5 and IE6, despite the errors...... (no body element or doctype in html, style tags not needed in css file).

Also, if some text is a heading, USE a heading (h) tag - h1 if main heading, or h2 or h3 etc, and style that to your desired look. Search engines and screen readers will then recognise the text as a heading.

Cheers
Graeme
WebJoel
01-06-2007, 08:38 AM
As above wrote, -use a header tag for a "header text".

<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<h1 class="heading">Who invented radio?</h1>
</span>

Is the more proper, semantic way to writing this. Use of a "span" is for when you want to highlight or affect some part inline, like:


<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<h1 class="heading">Who <span style="font-style:italic; text-decoration:underline;">invented</span> radio?</h1>
</span>

"span" is like a "bridge". I don't think it is meant to be a stand-by-itself tag, but to augment/style some small amount of text within a larger tag. If you are using "italic" alot in your page, you could create a class="italicised" and use <span class="italicised"></span> and save a few keystrokes and save a few kilobytes. :)
felgall
01-06-2007, 01:37 PM
The span and div tags are for use where a tag that has the specific meaning that you require doesn't already exist and should not be used where another tag exists that defines what the content is meant to be. That way when your visitors have stylesheets turned off or override your stylesheet with theirs your page will still make sense.