|
|
|
For more FAQs, see the HTML Writers' Guild style sheet pages
.
Why don't any of my styles work?At the time of writing, style sheets are at least partially supported by Microsoft Internet Explorer 3 upwards, Netscape Navigator 4 upwards, Opera 3.5 upwards, W3C's Amaya and many UNIX based browsers. If you are not using one of these browsers, then the chances are that is why your style sheeting is having no effect.
There are also a number of bugs in Microsoft Internet Explorer 3 to be aware of. The text-align property, when applied to text in a table, is overridden by ALIGN attributes in <TD> tags, etc. In theory you can use negative values with the margin-left property to move text off the page. Additionally, if you have defined multiple attributes to an element style (such as text font and color) and you find they don't work properly, try changing their order around, ie. define text color before text font.
How do I remove the underlining from links?You need to include the text-decoration attribute for your link text definitions. In a linked style sheet the syntax would be as follows:
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
How do I get links to change when I move the mouse over them?Using style sheet methods, you need to include a link hover definition. In a linked style sheet, the syntax would be as follows to make links go bold as you move the mouse over them:
A:hover {font-weight: bold}
Why don't my background graphics or colours work?Background colours and graphics do not seem to work properly with MS Internet Explorer 3. Currently a more reliable (although not necessarily recommended) method of adding background colour and graphics is by use of tables. See also the Browser Compatibility Charts.
Netscape causes background color to extend only under text. Is there a way around this?The solution here is to add a border with one pixel width to the background declaration so that color extends beyond the text in Netscape.
<STYLE>
<!--
.highlight {background-color: yellow;
color: black;
width:10em;
border: 1px yellow;}
-->
</STYLE>
<P><SPAN CLASS="highlight">This sample text
will have a background color of yellow,
which will extend to encompass the text,
regardless of the length.</SPAN></P>
Which browsers support CSS?Not all of the above browsers implement the CSS specification(s) fully.
Aren't optional closing tags optional any more?Optional closing tags like </P> are and have always been optional. However, some popular browsers, like MS Internet Explorer, have problems rendering elements correctly when these tags are omitted. If, for example, the P element is not closed the properties declared to it will involuntarily be 'inherited' by the element or elements that follow it. Is one such property is 'margin-left' you may end up with a document containing one (or none) word per line.
Although optional closing tags are optional it is nevertheless a good idea to use them.
What is the difference between ID and CLASS?ID identifies and sets style to one and only one occurrence of an element while CLASS can be attached to any number of elements. By singling out one occurrence of an element the unique value can be declared to said element.
How can I specify two different sets of link colors? By classifying each set of links and then attaching desired color to each set.
CSS:
<STYLE TYPE="text/css">
<!--
A.set1:link {color: some_color; background: some_background_color}
A.set1:visited {color: some_color; background: some_background_color}
A.set1:active {color: some_color; background: some_background_color}
A.set2:link {color: some_color; background: some_background_color}
A.set2:visited {color: some_color; background: some_background_color}
A.set2:active {color: some_color; background: some_background_color}
-->
</STYLE>
You can name set1 and set2 any way you like as long as the names are made up of letters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code.
Note: to avoid conflict with user's settings a background property (background color) should also be specified together with the color property (foreground color).
HTML:
<A CLASS=set1 .....> will show colors as specified in class "set1"
<A CLASS=set2 .....> will show colors as specified in class "set2"
What is the percentage value in 'font-size' relative to?It is relative to the parent element's font-size. For example, if the style sheet says:
H1 {font-size: 20pt}
SUP {font-size: 80%}
a <SUP> inside an <H1> will have a font-size of 80% times 20pt, or 16pt.
How do I place two paragraphs next to each other?The following will position two paragraphs next to each other.
<DIV STYLE="float: left; width: 50%">Paragraph 1</DIV> <DIV STYLE="float: left; width: 50%">Paragraph 2</DIV>
Each paragraph will occupy 50% of the screen.
Must I quote property values and if so how?Generally no. However, values containing white spaces, e.g. font-family names should be quoted as whitespaces surrounding the font name are ignored and whitespaces inside the font name are converted to a single space, thus font names made up of more than one word, e.g. 'Times New Roman' are interpreted as three different names: Times, New and Roman.
The attribute values can contain both single quotes and double quotes as long as they come in matching pairs. If two pair of quotes are required include single quotes in double ones or vice versa:
<P STYLE="font-family: 'New Times Roman'; font-size: 90%">
or
<P STYLE='font-family: "New Times Roman"; font-size: 90%'>
It's been reported the latter method doesn't work very well in some browsers, therefore the first one should be used.
How do I have a background image that isn't tiled?Specify the background-repeat property as no-repeat. You can also use the background property as a shortcut for specifying multiple background- properties at once. Here's an example:
BODY { background: #fff url(watermark.jpg) no-repeat }
Why is last row of my justified text spread across the whole row?Netscape seems to have a problem with rendering the last row of justified text correctly, that is not justified last row. The solution to the problem is white space between the text and the closing tag, e.g.
<P style="text-align: justify">Text </P>
Why is do the sizes of my INPUTs and TEXTAREAs differ?The actual width of SIZE and COLS attributes used with INPUT and TEXTAREA elements, respectively, is based on character width. Internet Explorer displays the content of TEXTAREA in monospaced font therefore the width of these two fields differs even when the same value is set to the SIZE and COLS attributes. To get the elements equally long/short the same font must be declared to both of them, e.g.
<INPUT NAME="name" TYPE="text" SIZE=40 STYLE="font: normal 10pt Arial"> <TEXTAREA NAME="name" ROWS=4 COLS=40 STYLE="font: normal 10pt Arial">
   |  |     |