www.codestyle.org

Cascading Style Sheets FAQ

This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQs and more.

Get the latest answers in this FAQ

Follow the Code Style Twitter feed for free one-to-one help sessions by instant messenger: MSN, AIM and Yahoo! Messenger. Sessions are held most Saturdays. Join the Twitter feed then check your direct messages for details.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
What is "presentational markup"?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: What are logical and physical tags?

A: Physical tags are otherwise known as presentational markup and are generally deprecated in recent versions of HTML in favour of CSS to suggest the visual appearance of content. Logical tags are used to mark the nature or purpose of the content they enclose; they have a meaning that is not concerned with appearances. For example, the logical em tag means a phrase should have emphasis, it does not say whether it should be shown in italics, bold, with underlines or any other particular style.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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;
}
      

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
How can I block overrides from another stylesheet?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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;
}
      

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
How do I set the background colour in CSS?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
How do I style list elements?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
How do I make the text fit alongside an image bar?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
Is it possible to create a frames effect with CSS?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
Can I scale background images to different screen resolutions?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
How can I style browser window components?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
How can I combine style rules with each other?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
How do I remove underlines from links in my pop-ups?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
What does the selector #content do?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: What is .rolloverfordnd for?

A: In this style rule .rolloverfordnd is the selector to which the styles are applied. The dot prefix indicates this is a class selector, which means it applies to any HTML elements that have the attribute class="rollverfordnd".

The same class attribute can be added to multiple elements and whichever elements have the attribute will have the same styles applied. However, these styles are applied as part of the overall cascade of all styles, so some elements that match this selector may have other styles applied too. If separate declarations affect the same properties, the declaration with the most specific selector "wins" over any other.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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-2009 Philip Shaw, all rights reserved, terms and conditions apply.
Valid XHTML and correct CSS. Last updated 13 June 2009 at 21:36:23 PM BST.
URI: http://www.codestyle.org/css/FAQ.shtml Metadata: RDF RSS 1.0