www.codestyle.org

Cascading Style Sheets FAQ

This FAQ is part of the Code Style Help and FAQ section. Use the help request form below if your question is not answered here, but make sure you are asking the right question first.

Subscribe to this FAQ:

Getting started with CSS

Q: What are your general guidelines about CSS?

A: One of the key issues for authoring stylesheets is to be aware of the complex variety of software and hardware combinations and configurations that people use on the Web, and concede that you cannot predict or ultimately control the way your documents are presented to users. Therefore it is vital that the underlying markup of your HTML document makes sense without CSS.

• Unless there is an exceptional case, and with font-size in particular, use proportional length values in stylesheets for the Web, preferably percentages % or em values. Proportional values allow Web documents to scale relative to users' browser settings and screen resolution.
• Wherever you specify a color property, also specify a suitable, contrasting background property and vice-versa. This helps ensure that if the user has specified any personal style settings, your document should still be legible.
• Many HTML elements do not strictly require a close tag, but it is important to explicitly close all relevant elements to optimise CSS rendering with certain browsers.

Q: What is "presentational markup"?

A: The most common example of HTML used primarily for presentational effect is the font element, which may specify the font family, size and colour of text on screen. Other textual examples include big, small, b and i elements, or the link, background, vlink and alink attributes of the body element.

More details available to subscribers:
What is "presentational markup"?

Q: Where can I find out more about CSS?

A: The primary source of answers to frequently asked questions about CSS is the comp.infosystems.www.authoring.stylesheets (C.I.W.A.S) newsgroup FAQ.

CSS techniques

Q: Has the stylesheet loaded?

To check if an external stylesheet file has loaded, add an extreme style rule to make it obvious and reload the HTML:

BODY{
  color:            black;
  background:       red;
}
      

Q: How can I hide my CSS?

A: It is not possible for you to prevent read access to CSS files on the server side and have client browsers render the stylesheet. The browser must be able to download a CSS file to render the styles it contains, this is the nature of the Web. The only way to prevent others viewing your CSS is not to publish it at all.

Q: Can I resize a whole site with CSS?

A: If the site was designed for a fixed size then it may be quite difficult to adjust. If the widths of the page elements are set exclusively in the CSS, not in HTML tables, you may be in with a chance; it would make the job easier. But the standard markup of the page may be the limiting factor. If the document markup is too rigid, you may need to go back to the drawing board.

One quick way to get the measure of a Web site is to switch off CSS in your browser and see how it looks (see CSS browser configuration). If the navigation bars run down the page and the text is full width when CSS is switched off, you may be in luck.

Q: Can I use script variables in my CSS?

A: Yes, you can use an ASP, JSP or other scripting mechanisms to customise a style sheet, but you must serve it with the right HTTP Content-Type header: text/css. Also, bear in mind that what you serve one person, may be held in shared caches and viewed by other people too. So, to ensure that everybody else gets the default style sheet settings, you should also set no-cache headers.

If you prevent caches from storing your style sheet, it puts a heavier load on your Web server and will slow down every page request, which defeats one of the great strengths of CSS.

Q: How can I block overrides from another stylesheet?

A: CSS is implemented in a way that applies a style sheet to the whole of a Web document; specific style rules are attached to page elements based on selectors. One style sheet cannot "block" part of another, but you can override a style rule with a more specific selector.

More details available to subscribers:
How can I block overrides from another stylesheet?

Q: How can I set the width of a div for any monitor?

A: The most reliable way to ensure that HTML elements are sized according to the canvas area of users' Web browser, whatever their monitor resolution, is to use percentage length units. The overall width of an HTML element is also affected by any margin, border and padding that is set. If you choose to use 100% width for an element, you should ensure that the margin, border and padding properties are set to zero or you will get horizontal scrolling.

div {
    width:        100%;
    border-width: 0;
    margin:       0;
    padding:      0;
}
      

CSS styling tips

Q: How do I set the background colour in CSS?

A: When you set the background colour of a Web page using CSS you should also set the text colour, to ensure that there is a legible contrast between them. This is because some people configure their browsers to display Web pages with their own style sheet, which may have its own text colour setting. If you set the background colour without the text colour, your background may be the same as the reader's foreground text colour.

The background colour for the whole page is attached to the HTML body element, as below, but you can use any CSS selector to colour more specific areas of the page.

More details available to subscribers:
How do I set the background colour in CSS?

Q: How do I style list elements?

A: List items can be selected in CSS using the li element selector. It is also possible to select and style items in un-ordered lists independently from those in ordered lists, and style specific items, as below.

More details available to subscribers:
How do I style list elements?

Q: How do I make the text fit alongside an image bar?

A: It would preferable to control your image placement than try to restrict the size of the fonts, which can be very harmful to the legibility of your documents. One suggestion is to put the text in a div element with a specific class, and set the bar as a background image.

More details available to subscribers:
How do I make the text fit alongside an image bar?

Q: Is it possible to create a frames effect with CSS?

A: To create frame-like sites using CSS use a position: fixed declaration on your menu division. You must also set the properties top, left and width. It's best to stick with percentage values for these lengths, to position your menu according to the size of the users' screen.

More details available to subscribers:
Is it possible to create a frames effect with CSS?

Q: Can I scale background images to different screen resolutions?

A: It is difficult to answer questions like this without seeing the background image and the visual design you are trying to achieve. If you plan to use a "liquid" page layout, where the page elements may expand proportionally to the width of the screen, consider how you might slice the image up and use the parts as the background image for different page elements. In particular, focus on any horizontal lines in the background that may define different navigational parts of the page, these can be the most difficult part of a liquid design.

More details available to subscribers:
Can I scale background images to different screen resolutions?

Q: How can I style browser window components?

A: The browser window properties you are seeking to influence are proprietary features of individual browsers that are not currently part of the W3C CSS recommendations. However, these features are directly accessible in recent versions of Microsoft Internet Explorer and Opera ...

More details available to subscribers:
How can I style browser window components?

CSS syntax and markup

Q: How can I combine a style rule with HTML code?

A: To apply so called "inline" styles, use the style attribute of the element you want to style.

<p style="font-size: larger; text-transform: uppercase;">
 Paragraph text
</p>
          

This technique can be useful when experimenting with new designs, but defeats one of the great strengths of CSS, using an external stylesheet to apply the same styles to any number of pages.

Q: How can I combine style rules with each other?

A: It is not possible to combine rules in a CSS stylesheet, but you can assign multiple classes to a single element in a space separated list...

More details available to subscribers:
How can I combine style rules with each other?

Q: How do I remove underlines from links in my pop-ups?

A: General usability advice is that people expect hyperlinks to be underlined, so your navigation may be overlooked if they are not. If you disable underlines, you should use text and colours to make the links as conspicuous as possible.

Where you use dynamic markup techniques to create whole Web pages, such as pop-up windows, you must ensure that the HTML includes valid references to your cascading style sheets. You must add a head element to the HTML root element and all necessary link elements, as below.

More details available to subscribers:
How do I remove underlines from links in my pop-ups?

Q: What does the selector #content do?

A: The selector #content matches any element with the id attribute "content", as below:

<h3 id="content">
  Table of contents
</h3>
          

More details available to subscribers:
What does the selector #content do?

CSS browsers

Q: There are no CSS configuration options in Firefox!

A: The Code Style CSS browser configuration article is about enabling CSS in browsers. Firefox does not have a user configuration option to disable CSS, but it is possible to switch it off on a page by page basis. Go to the View menu and hover over the Page Style option to expand it. As well as showing any alternative style sheets on the selected page, there is an option to choose No Style. This will show the page without any CSS applied to it. Depending on any presentational markup that may be used on the page, it is likely to show a very plain, vertical, linear flow of headings, text, images and lists.

Help request

Use the form below to submit a help request or general enquiry about the Code Style Web site. Read our guidelines on asking the right questions first.

Name:
Email*:
Example URL:
Comments:
Do NOT put any URLs here
Join mailing list:	Yes, join the mailing list No
* Required fields

Your email address will not be mis-used. If you include your address you may be sent a personal reply, you will not be added to any mailing list unless you request it. Read the site privacy statement for details.

Navigation

• Home page
• CSS style guide
  • Web font sampler
  • CSS media monitor
• Java & servlets
• Javascript & DOM
• HTML & XHTML
• Help and FAQs
• Site log

Site search

Home · CSS · Java · Javascript · HTML · Help · Log

Copyright © 2000-2008 Philip Shaw, all rights reserved, terms and conditions apply.
Valid XHTML and correct CSS. Last updated 20 August 2008 at 07:23:00 AM BST.
URI: http://www.codestyle.co.uk/css/FAQ.shtml Metadata: RDF RSS 1.0