CSS font stacks, media style sheets & web standards
Put your text ad here 
WestNIC provides reliable web hosting services
Free software downloads and drivers download resources
25% off cpanel web hosting and reseller hosting deals. Promo: codestyle25off
This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQs, or choose the single FAQ by email option for premium answers.
div for any monitor?
#content do?
.rolloverfordnd for?
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.
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.
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.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
What is "presentational markup"?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
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.
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.
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.
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.
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.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I block overrides from another stylesheet?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How do I set the background colour in CSS?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How do I style list elements?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How do I make the text fit alongside an image bar?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
Is it possible to create a frames effect with CSS?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
Can I scale background images to different screen resolutions?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: The CSS declaration to set the case of text is text-transform, so to set all paragraphs in lower case you would use:
p {
text-transform: lowercase;
}
The other values that can be set on the text-transform property are none, capitalize, uppercase, and inherit to take the setting from the parent element. The capitalize option sets the initial letter of words in upper case, also called title case.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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 ...
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I style browser window components?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
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...
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I combine style rules with each other?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How do I remove underlines from links in my pop-ups?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
#content do?
A: The selector #content matches any element with the id attribute "content", as below:
<h3 id="content">
Table of contents
</h3>
… premium content omitted
Get full access to all FAQs, subscribe now for $40
What does the selector #content do?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
.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.
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.
| Front-end FAQs | Back-end FAQs | Learning Java |
|---|---|---|
About us: site help, text ads, sponsored links and premium content FAQs.
