[Top]
More advice for the full screen mode.
   
I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
Table of topic groupsFront page of CSS-guideExtra pages > H What CSS-features I have used in my pages

H What CSS-features I have used in my pages

Topics

Common

This page gives some answers, which CSS-features is reasonable to use. It is then in a way a continuation page to the page Frequently asked questions[S]. I have tested all CSS2 visual features excluding some font-related matters (I have mentioned them in the page 12. What other special features CSS has[S]).

Into CSS is some proprietary extensions. In MS browsers they are designed into common use, but in Opera and Netscape primary into the use of the browser itself. The proprietary CSS, which concerns only the user interface is not harmful for browsers, which don't support it. I had used in my sites scrollbar-base-color (it changes the color of scroll bars), but just now I don't use any non-standard in any actual content page (the previous mentioned property is used in some model pages). In general supporting non-standard features of MS IE is objectionable because of the designing politics of Microsoft (read the page concerning What are purposes of Web standards[S]).

Some browsers support also proposed features for CSS3. I have used one of these features. You can find quite exact information supported CSS-features from two How to set CSS for table elements (CSS table 1[S], CSS table 2[S]) and notes for them. Model pages have an own extra page[S]. Some models are XML-document. I handle XML-documents in in an extra page[S].

I list to this page the CSS, which I use today in my pages. Tables don't have the CSS, which I have use only as demonstrating purposes. Because my site works as an example how to use CSS, I have used quite wide quantity of different CSS-features - in commercial sites it is scarcely not possible to use them so much. I have not however used some non-supported, bad working or not widely supported features. I tell shortly, why I don't use anymore certain CSS. In some cases I tell also, why I recommend to use some CSS features.

Basic concepts, rules and What are selectors, classes and id-attributes

Into basic concepts belong applying CSS to (X)HTML documents. According to the HTML 4.01 specification also user style sheets[S] can regard to belong basic concepts, because the specification highly recommends, that user agents support them.

Basic mechanisms in CSS are also different rules and selectors. Some of them belong into basic concepts and some of them are rather advanced features of CSS.

Elements and attributes
<LINK rel="stylesheet" media="..." ...>
<LINK rel=stylesheet=" media="screen" title="..." ...>

<STYLE media="..." ...>

I give primary site wide CSS by using the LINK element and document wide CSS by using the STYLE element, because all media type supporting browser understand the attribute media (I don't always use at all the attribute media, when CSS concerns automatic all presentation modes). Because Opera supports the "slide show" mode, I have used for the media attribute values print, screen and projection.

Mozilla Gecko browsers (for example Netscape 6.x+) and Opera 7.x+ support alternative style sheets. Because browsers don't keep them when going next pages they are in practice useless and I took them out of use.

I handle basic definitions in the page 2. How to put CSS into Web pages[S] and so-called media types for different devices in the page 6. Font and text properties media types[S].

style

I use the attribute style quite seldom, because they cause problems with the Netscape 4.x series.

I handle this attribute in the page 2. How to put CSS into Web pages[S] and Netscape 4.x series problems in an extra page[S].

class, id

I handle these attributes in the page 4. What are selectors, classes and id-attributes[S].

At-rules
@import

I used import rules before quite much, but I have almost abandon using them because they cause with Opera (my favorite browser) problems with the attribute media. I use them in some situations importing primary such CSS, which is common to all used media types.

I handle the definition of the at-rule in the page 2. How to put CSS into Web pages[S] and problems in the page 6. How to set CSS for texts and different media types[S].

@media

I used media blocks before quite much, but I have primary abandon using them. I use them only in exceptional cases, because MS IE 5.0 Mac doesn't support them.

I handle the problems of media types in the page 6. How to set CSS for texts and different media types[S].

@page

It works at least in quite new Opera browsers. I handle the property in the page 6. How to set CSS for texts and different media types[S].

Important rule
!important

Even if this feature is called as a rule, it is connected among property values and it belongs rather into properties than rules. Netscape 4.x doesn't support this feature. I handle it in the page 5. What is the processing order of CSS[S].

What are selectors, classes and id-attributes
*

Attribute selectors (for example. [class="some"]) work at least in new Opera and Mozilla Gecko browsers. I use them giving additional visual information and in some cases to pass MS IE in situations, where same property values to new Opera and Mozilla Gecko browsers would cause problems.

I handle rules and selectors in the page 4. What are selectors, classes and id-attributes[S].

element
element element
element.class, .class
#id, element#id
element[attribute="value"]
p:first-letter
:before, :after

I use them primary in printing and the "slide show" mode of Opera in order to give assistance information with the property content.

I handle these selectors in the page 4. What are selectors, classes and id-attributes[S] and 9. How to set CSS for list elements[S].

Properties

Standard CSS2 properties (in the alphabetic order)
background etc.

I handle background and border properties in the page 8. Borders and backgrounds[S]. I have used them both as with shorthand properties and by using separate sub-properties.

border etc.
border-collapse

I handle the property in the page 10. How to set CSS for table elements[S].

bottom

It is related to the property position. I handle the property in the page 11. What is the visual formatting model of CSS2[S].

color

I handle the property in the page 3. What are color, units and keywords in CSS[S].

content

This property is very useful in printing and in the "slide show" mode of Opera. Together with :before or :after pseudo-elements it can give useful information with new Opera and Netscape browsers. I generate with this property also automatic ' marks together with the quotes property. I handle this property shortly in the page 9. How to set CSS for list elements[S].

cursor

I use it for special links. I handle the property in the page 6. How to set CSS for texts and different media types[S].

displayThis is one of the basic properties, which I control different presentation modes. I handle the property in the page 11. What is the visual formatting model of CSS2[S].
float

I use this property in positioning some elements but not in basic structures. I handle this property in the page 11. What is the visual formatting model of CSS2[S].

font-family, font-size, font-style, font-weight

I handle the property in the page 6. How to set CSS for texts and different media types[S] and concerning font sizes in the page 3. What are color, units and keywords in CSS[S].

height

I handle the property in the page 8. Borders and backgrounds[S].

left

It is related to the property position. I handle the property in the page 11. What is the visual formatting model of CSS2[S].

line-height

I handle the property in the page 6. How to set CSS for texts and different media types[S].

list-style etc.

I use them by using sub-properties. I handle properties of lists in the page 9. How to set CSS for list elements[S].

margin

I handle the property in the page 8. Borders and backgrounds[S].

max-width, min-height, min-width

I addition of using height and width properties I control block box dimensions with these properties. They work in new Opera and Mozilla Gecko browsers. I handle these properties in pages 8. Borders and backgrounds[S] and 11. What is the visual formatting model of CSS2[S].

orphansThis property and the property widows prevent in some level lonely rows, when pages are printed with Opera. These properties belongs to the paged media, which I handle in the page 6. How to set CSS for texts and different media types[S].
outline (-moz-outline)

I use it in some special links above dynamic menus for Mozilla Gecko browsers. They support the outline property through -moz-outline. It works according to CSS2 specification with a:hover. After discussing with a browser designer the property outline is not directly supported because full support of the property according to the CSS2 specification failed. My purpose is now just try to take off the default outlines of the browser. This aim works partially. Opera 7.x+ supports outline directly and I give it for form control elements together with :focus. I handle it in the page 6. How to set CSS for texts and different media types[S]

overflow

I use in some tables controlling of the content of table cell the value hidden. I handle this property in the pages 10. How to set CSS for table elements[S] and 11. What is the visual formatting model of CSS2[S].

padding

I handle the property in the page 8. Borders and backgrounds[S].

page-break-after, page-break-before, page-break-inside

I control with them page breaks in printing and in Opera changing "slides" in the "slide show mode". The last works only when printing documents with Opera. These properties belongs to the pages media, which I handle in the page 6. How to set CSS for texts and different media types[S].

position

I have used all possible values. I handle the property in the page 11. What is the visual formatting model of CSS2[S].

quotes

Look at notes of the property content.

right

It is related to the property position. I handle the property in the page 11. What is the visual formatting model of CSS2[S].

size

The property belongs to the paged media, which I handle in the page 6. How to set CSS for texts and different media types[S].

table-layout

I handle the property in the page 10. How to set CSS for table elements[S].

text-align, text-decoration, text-indent

I handle these properties in the page 6. How to set CSS for texts and different media types[S].

top

It is related to the property position. I handle the property in the page 11. What is the visual formatting model of CSS2[S].

vertical-align

I handle these properties in the page 8. Borders and backgrounds[S].

visibility

I use this property in the main navigation element to hide some links. I handle the property in the page 11. What is the visual formatting model of CSS2[S].

widows

Look at the property orphans.

width

I handle the property in the page 8. Borders and backgrounds[S].

z-index

I handle the property in the page 11. What is the visual formatting model of CSS2[S].

CSS3-properties
opacity

Mozilla Gecko browsers support it with the -moz- prefix (-moz-opacity). I use it for "shadows" of dynamic menus.

What kind of non-standard (proprietary) CSS browsers support-properties
filter

I use it in shadows of dynamic menus for some MS IE browsers. This property creates special effects in Microsoft for IE 5.5+ Windows browsers. Microsoft informs it to be an implementation of the CSS3 specification. That is not however true. filter has not been intended for ordinary documents in order to create special graphic effects. It belongs to the special SVG language, where the syntax is totally different as the syntax, which MS IE uses.

W3C: Scalable Vector Graphics (SVG) 1.0 Specification (Property Index).
[Top]

   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)
( tapio.markula@nic.fi)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004