This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.

CSShark - Frequently Asked Questions (FAQ)
The CSS Know-How Site

 

Frequently Asked Questions:

Links and Underlines?
Styles not showing?
Border around a table?
'Fixed' Background?
Justified Text?
How to Style Table Cells?
How to Style Forms?
Colored Horizontal Rule?
 

How to style links?

This is the classic CSS question.

It is asked so often, and the reason why the order of the link styles is important doubles as a wonderful explanation of the cascade in CSS. A tutorial about the link styles is located in the 'Basics' section.

Click HERE for an example of the link styles.

 

Styles not showing?

There are different ways to apply CSS to a HTML document with a stylesheet, and these different ways can be combined:

For a more thorough explanation about the implementation of styles go to the Stylesheet section under "Basics".

Note: An external stylesheet is a text file that contains only CSS Styles. HTML comments are not supposed to be in there and can lead to misinterpretation (> is the CSS "Child" selector!).

 

Border around a table?

Try the following:

.tblboda {
    border-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    }
/*color, thickness and style can be altered*/

 Back to the Top 

You put this style declaration either in an external stylesheet (see:Basics - Stylesheet), or you can stuff it in the <head></head> section, like:

    <style type="text/css">
(here you can place your styles)
    </style>

and apply it to the table as follows:

<div class="tblboda">
    <table yaddayadda>
        <tr>
            <td>Content text and more content</td>
        </tr>
    </table>
</div>

That should give you a grey thin border around this table.

Kludge: If you want the border to 'shrink wrap' around the table, then you have to use the <span> tag instead the <div> tag. But that is not quite proper CSS or HTML, because a <span> is for inline elements. A table is not an inline element, therefore the correct tag is a <div>. If you play around with it a bit then you have a good chance to achieve what you want and still have correct HTML/CSS.

The other way would be that you apply the class .tblboda directly to the table (for IE and other contemporary browsers), like <table ... class="tableboda"> and you define another class for each stylesheet: .tblboda2

In the NN4.xx stylesheet, you use the same properties as above, and in the IE and other contemporary browsers you carefully set all those properties to default, like {border-style: none;}

Then you wrap the table in the <div> with the class .tblboda2 (NN4.xx does that) (IE a.o.c.b. don't do anything, because the border-style is set to "none" = no border at all).

This way you have a table that is wrapped in a nice little border: .tblboda2 for NN4.xx, .tblboda for IE and other modern browsers.

Click HERE for an example of the table border, or (for the other way) you can take a look at this example: http://www.sunshinesports.net/Teams.cfm.

 Back to the Top 

 

'Fixed' Background?

There is (was) the possibility to use the HTML tag bgproperties="fixed", but that is IE proprietary, and dependent upon the 'background' attribute (deprecated in HTML4).

With CSS, you can declare the background like:

BODY {
    font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    background-image: url(images/yourimage.gif);
    background-repeat: no-repeat; /*no-tiling background*/
    background-position: center;
    background-attachment: fixed;
    background-color: #hexcolor;
    color : #hexcolor;
    margin: 10px;
}

... and that shows a background-image in the center of the <BODY> element, non-scrolling and non-repeating - in IE or NN6. NN 4.xx gets the non-repeat-part right, but stuffs the picture in the upper left corner and scrolls happily everafter...
Here is the Example page that shows you the 'non-scrolling' BODY.

 Back to the Top 

 

Justified Text?

You redefine the <p> tag like:

p {text-align: justify;}

and that renders all <p>s with justified text.

Another possibility is to define a class, like:

.just {text-align: justify;}

and then you style the paragraphs in question like:

<td class="just">text </td>

Note that NN 4.xx has problems with the inheritance of styles; that some NN4.xx browsers have a funny way to interpret "justify"; and that you have to have at least one blank space between the last character and the </p> tag, because otherwise NN 4.xx likes to justify even a three word half-sentence... also, some browsers do a pretty ugly job of rendering justified text, adding spaces between words, instead of spaces between letters, as with word-processing programs.
This shows the Example page with the justified text.

 Back to the Top 

 

How To Style Table Cells?

Margin, Border and Padding are difficult to apply to inline elements. Officially, the <TD> tag is a block level element because it can contain other block level elements (see Basics - Elements).

If you need to set special margins, borders, or padding inside a table cell, then use this markup:

<td><div class="table-cell"> yourtext </div></td>

to apply the CSS rules to the div inside the cell.

 

How To Style Forms?

Forms and form elements like SELECT, INPUT etc. can be styled with CSS - partially.

Checkboxes and Radiobuttons do not yet accept styles, and Netscape 4.xx has certain issues, but here is a tutorial that explains the application of CSS Styles on Form Elements.

 Back to the Top 

 

Colored Horizontal Rule?

You can apply styles to Horizontal Rules <HR> in IE without problems, but NN4.xx can only render the silvery HR. But there is a way around it:

.rule {border-top-width: 1px;
       border-top-style: solid;
       border-color: #FF0000; 
       margin: 0px 2%;}

that, applied to a div, should give you a red HR in NN4.xx and IE, with a 2% gap on the left and right side.

CSSharky Logo

On this page is an Example of a coloured 'Horizontal Rule'.


Update:

Thanks to Matt Del Vecchio here is an improved format for the Horizontal Rule:

hr { height:0px; 
        border:0px; 
        border-top:1px solid #ff1493; }

....this works in both IE and Netscape. It tells the browser to not render the hr rule itself, and then sets a 1px border, which looks just how most folks want to render the hr rule. It uses the <hr> element and that is better than writing your own class as all devices will know what to do with an <hr> tag.

Clever! Thank you, Matt!

More questions? Is your 'pet' question missing? Ideas? Please mail me at .

Home   • CSS FAQs   • Basics   • NN4 Issues   • CSS-P   • Links   • Books  
Content, Design and Programming © 2001 by MaKo from Orion HiTek, Inc.. All rights reserved worldwide.