browser only renders font size change, no color, etc.

labelle · #1 (**permalink**) 02-14-09, 05:55 PM

I'm just learning how to use css and have run into a problem:

The browser seems to be using my css to determine the font size, but nothing else (i.e. text color, font, style).

Also, I can't edit the font size. Once I have opened the page with x font size, if I change the font size, save both the css and html, and refresh the page, the size does not change. I can, however, use a new selector on different text in the html document. I can also change the selector of the original text, reload the page (and it will adjust the font size appropriately), and change it back to the original selector (with different font size), which it will render the correct size.

I am using Firefox, but it does the same thing in IE. I originally thought it was a problem with refreshing the page, but I cleared the cache and that didn't make a difference. I don't have any other tags that would specify font attributes and thus override the H1 tag (see below).

This is what's in my <head> tags:

<title>Title</title>
<STYLE TYPE="text/css">
<LINK REL=STYLESHEET HREF="isufcstyles.css" TYPE="text/css">
</STYLE>

This is what's in my external style sheet:

H1
{
font-family:sans-serif;
font-size:40pt;
font-style:italic;
color:white;
}

This is what's in the html document:

<H1>texttexttext</H1>

The above text is rendered in 40pt font, but it is my default Times New Roman, black, and not italic.

There's probably some fairly obvious error, but I've been staring at the page too long to be able to find it at this point. Any help would be appreciated.

job0107 · #2 (**permalink**) 02-15-09, 04:12 AM

Do it like this:

isufcstyles.css

CSS Code:

body{background:#000;}
H1
{
font-family:sans-serif;
font-size:40pt;
font-style:italic;
color:white;
}

index.html

HTML Code:

<html>
<head>
<title>Title</title>
<LINK REL=STYLESHEET HREF="isufcstyles.css" TYPE="text/css">
</head>
<body>
<H1>texttexttext</H1>
</body>
</html>

labelle · #3 (**permalink**) 03-20-09, 05:54 PM

Thanks! Taking out the style tags fixed it. Not even sure why I had those in there to begin with...

mk456 · #4 (**permalink**) 03-30-09, 02:41 AM

This attribute has been deprecated in favor of style sheets for specifying background color information.
1.Alignment

It is possible to align block elements (tables, images, objects, paragraphs, etc.) on the canvas with the align attribute. Although this attribute may be set for many HTML elements, its range of possible values sometimes differs from element to element. Here we only discuss the meaning of the align attribute for text.

Attribute definitions

align = left|center|right|justify [CI]
Deprecated. This attribute specifies the horizontal alignment of its element with respect to the surrounding context. Possible values:

* left: text lines are rendered flush left.
* center: text lines are centered.
* right: text lines are rendered flush right.
* justify: text lines are justified to both margins.

The default depends on the base text direction. For left to right text, the default is align=left, while for right to left text, the default is align=right.

DEPRECATED EXAMPLE:
This example centers a heading on the canvas.

<H1 align="center"> How to Carve Wood </H1>

Using CSS, for example, you could achieve the same effect as follows:

<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
H1 { text-align: center}
</STYLE>
<BODY>
<H1> How to Carve Wood </H1>

Note that this would center all H1 declarations. You could reduce the scope of the style by setting the class attribute on the element:

<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
H1.wood {text-align: center}
</STYLE>
<BODY>
<H1 class="wood"> How to Carve Wood </H1>

DEPRECATED EXAMPLE:
Similarly, to right align a paragraph on the canvas with HTML's align attribute you could have:

<P align="right">...Lots of paragraph text...

which, with CSS, would be:

<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
P.mypar {text-align: right}
</STYLE>
<BODY>
<P class="mypar">...Lots of paragraph text...

DEPRECATED EXAMPLE:
To right align a series of paragraphs, group them with the DIV element:

<DIV align="right">
<P>...text in first paragraph...
<P>...text in second paragraph...
<P>...text in third paragraph...
</DIV>

With CSS, the text-align property is inherited from the parent element, you can therefore use:

<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
DIV.mypars {text-align: right}
</STYLE>
<BODY>
<DIV class="mypars">
<P>...text in first paragraph...
<P>...text in second paragraph...
<P>...text in third paragraph...
</DIV>

To center the entire document with CSS:

<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE>
<BODY>
...the body is centered...
</BODY>

The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to "center". The CENTER element is deprecated.
15.1.3 Floating objects

Images and objects may appear directly "in-line" or may be floated to one side of the page, temporarily altering the margins of text that may flow on either side of the object.
Float an object

The align attribute for objects, images, tables, frames, etc., causes the object to float to the left or right margin. Floating objects generally begin a new line. This attribute takes the following values:

* left: Floats the object to the current left margin. Subsequent text flows along the image's right side.
* right: Floats the object to the current right margin. Subsequent text flows along the image's left side.

DEPRECATED EXAMPLE:
The following example shows how to float an IMG element to the current left margin of the canvas.

<IMG align="left" src="http://foo.com/animage.gif" alt="my boat">

Some alignment attributes also permit the "center" value, which does not cause floating, but centers the object within the current margins. However, for P and DIV, the value "center" causes the contents of the element to be centered.
Float text around an object

Another attribute, defined for the BR element, controls text flow around floating objects.

Attribute definitions

clear = none|left|right|all [CI]
Deprecated. Specifies where the next line should appear in a visual browser after the line break caused by this element. This attribute takes into account floating objects (images, tables, etc.). Possible values:

* none: The next line will begin normally. This is the default value.
* left: The next line will begin at nearest line below any floating objects on the left-hand margin.
* right: The next line will begin at nearest line below any floating objects on the right-hand margin.
* all: The next line will begin at nearest line below any floating objects on either margin.

Consider the following visual scenario, where text flows to the right of an image until a line is broken by a BR:

********* -------
| | -------
| image | --<BR>
| |
*********

If the clear attribute is set to none, the line following BR will begin immediately below it at the right margin of the image:

********* -------
| | -------
| image | --<BR>
| | ------
*********

DEPRECATED EXAMPLE:
If the clear attribute is set to left or all, the next line will appear as follows:

********* -------
| | -------
| image | --<BR clear="left">
| |
*********
-----------------

Using style sheets, you could specify that all line breaks should behave this way for objects (images, tables, etc.) floating against the left margin. With CSS, you could achieve this as follows:

<STYLE type="text/css">
BR { clear: left }
</STYLE>

To specify this behavior for a specific instance of the BR element, you could combine style information and the id attribute:

<HEAD>
...
<STYLE type="text/css">
BR#mybr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
********* -------
| | -------
| table | --<BR id="mybr">
| |
*********
-----------------
...
</BODY>

15.2 Fonts

The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets.
15.2.1 Font style elements: the TT, I, B, BIG, SMALL, STRIKE, S, and U elements

<!ENTITY % fontstyle
"TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle;|%phrase

- - (%inline

*>
<!ATTLIST (%fontstyle;|%phrase

I hpope it will work for you......................................