CSS font stacks & developer FAQs with Web standards
Put your text ad here 
WestNIC provides reliable web hosting services
Web hosting directory, find affordable web hosting
Fastwebhost offers cheap web hosting & reseller hosting services
This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQ answers.
plain text, on topic, no spam
div for any monitor?
.rolloverfordnd for?
#content do?
A: One of the key issues for writing Cascading Style Sheets is to be aware of the variety of software and hardware combinations and configurations that people use on the Web, and accept that you cannot precisely predict or 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 your document should still be legible when the user has specified personal style settings.
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.
… full answer hidden
Premium members click below for full answer
What is “presentational markup”?
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 particular style.
A: To check if an external stylesheet file has loaded, add an extreme style rule to make it obvious and reload the HTML in the browser:
body {
color: black;
background: red;
}
A: It is not possible to prevent read access to CSS files on the server side and have client browsers render the style sheet. 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.
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. If the navigation bars run down the page and the text is full width when CSS is switched off, you may be in luck.
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. To ensure that everybody gets the dynamic style sheet you intend, you should also set Cache-Control: no-cache HTTP 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.
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.
… full answer hidden
Premium members click below for full answer
How can I block overrides from another stylesheet?
div for any monitor?
A: The most reliable way to ensure that HTML elements are sized according to the canvas area of any Web browser, whatever the viewer's monitor resolution, is to use percentage length units. The overall width of an HTML element is also affected by any margin, border and padding. 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;
}
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.
… full answer hidden
Premium members click below for full answer
How do I set the background colour in CSS?
A: List items can be selected in CSS with 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 list items, as below.
… full answer hidden
Premium members click below for full answer
How do I style list elements?
A: It would preferable to control your image placement than try to restrict the size of the fonts, which can affect 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. The image need only be a single pixel high, set to repeat vertically. In this example, the image is 20 pixels wide and runs down the left of the div element, the padding-left: 30px; property creates a 10 pixel gap between the right edge of the image and left edge of the text in the div:
… full answer hidden
Premium members click below for full answer
How do I make the text fit alongside an image bar?
A: To create frame-like sites using CSS use a position: fixed declaration on the container element for your navigation menu, marked with a class="Menu" attribute. You must also set the CSS 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, as below.
… full answer hidden
Premium members click below for full answer
Is it possible to create a frames effect with CSS?
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.
… full answer hidden
Premium members click below for full answer
Can I scale background images to different screen resolutions?
A: The CSS declaration to set the case of text is text-transform. To set all paragraphs in lower case you would use the following rule:
p {
text-transform: lowercase;
}
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”.
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.
… full answer hidden
Premium members click below for full answer
How can I style browser window components?
.rolloverfordnd for?
A: In this CSS style rule .rolloverfordnd is the class selector to which 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.
A: These blocks of code are Cascading Style Sheet (CSS) rules that appear to be “built-in” to the Web page template you are using. The first line prefixed by a dot is a CSS class selector, which says the declarations that follow apply to any HTML element that has the class attribute Data_Central_color1, as below.
<divclass="Data_Central_color1">Example text</div>
.Data_Central_color1 {
background-color:#CC0000;
color:#FFFFFF;
}
The part inside the curly braces are CSS declarations that set specific style properties on the selected HTML elements, in this case the text “color” and the “background color” for the whole of the HTML element, not just the area where the text is displayed.
The colour values in this example are given in a hexadecimal number scheme in which the colour is composed of Red, Green and Blue (RGB) pixel brightness values on a scale of zero to 255. The first two hexadecimal digits, CC, for the red component equate to a decimal value of 204, which is relatively high. The second and third pairs of hexadecimal digits, both 00, also equal zero in decimal so they represent no green or blue pixel brightness. Each hexadecimal pair in the value #FFFFFF is the maximum 255 value in decimal, which means “full-on” pixel brightness for red, green and blue, a combination that displays white.
In summary, this style rule sets the text white on a fairly bright pure red background.
#content do?
A: The selector #content matches any element with the id attribute content, as below:
<h3id="content">Table of contents</h3>
… full answer hidden
Premium members click below for full answer
What does the selector #content do?
A: To apply so called “inline” styles, use the style attribute of the element you want to style.
<pstyle="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, an external style sheet can apply the same styles to any number of pages.
A: It is not possible to combine rules in a CSS stylesheet, but you can assign multiple classes to a single HTML element in a space separated list, as below.
<pclass="Opening Classic">...</p>
This heading should then be selected by both the following rules and be rendered in a larger cursive font:
.Opening {
font-size: 110%;
}
.Classic{
font-family: "Apple Chancery",
cursive;
}
Multiple class selectors are not supported by the old Netscape 4 Web browser, typically resulting in no relevant styles being applied at all, but all contemporary browsers support this approach reliably.
… full answer hidden
Premium members click below for full answer
How can I combine style rules with each other?
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.
… full answer hidden
Premium members click below for full answer
How do I remove underlines from links in my pop-ups?
A: 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.
| Front-end FAQs | Back-end FAQs | Learn Java |
|---|---|---|
About us: site help, text ads and premium content FAQs.