[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-guidePractice > Model, test and example pages

Model, test and example pages

Topics

Common

I list in this page referred model, test and example pages in my CSS-tutorial. They are related HTML, XML or CSS encoding. Some of them are very simple, but some are quite complex. I handle them in the same order as they are in my CSS-site, but it is a little bit inconsistent, because the numbering of the model pages isn't fully consistent. In addition I have put comparison pages and screen capture images. These can be use in practising.

Model, test and example pages

Pages 1-11

  1. What are basic structures of HTML and XML documents
    1. ./Models/Model0a.html[S][Pw] - text without any structure. It does have also a comparison page:
    2. ./Models/Model0c.html[S][Pw]- organized text.
    3. ./Models/Model1.html[S][Pw] - a simple paragraph.
    4. ./Models/Model2.html[S][Pw] - a document tree.
    5. ./Models/Model3.html[S][Pw] - a centered paragraph.
    6. ./Models/Model4.html[S][Pw] - an example of linked CSS.
    7. Oppilas.html[S][Pw] - comparison between a page without style sheets and a the page 2, which use style sheets.
    8. ./Models/Model4a.html[S][Pw] - an example of simple XHTML-document.
  2. How to put CSS into Web pages
    1. ./Models/Model5.html[S][Pw] - a model of the usage of the style attribute. Concerns also the page 11, How to put CSS into Web pages (position:absolute).
    2. ./Models/Model5a.html[S][Pw] - a model of the usage of the style attribute and external style sheets.
    3. ./Models/Model5b.html[S][Pw] - a model of the usage of the STYLE element and external style sheets.
    4. ./Models/Model6.html[S][Pw] - an example of an incorrect set @import at-rule and concerning the page 4, What are selectors, classes and id-attributes examples of invalid named selectors. It has also a parallel model page ./Models/Model6NoDTD.html[S][Pw].
    5. ./Models/Model6a.html[S][Pw] - demonstrations of the differences of various browsers.
    6. ./Models/Model7.html[S][Pw] - a model of using shorthand properties (concerns also the page 8, How to set CSS for backgrounds and borders).
  3. What are color, units and keywords in CSS
    1. ./Models/Model8.html[S][Pw] - a model page of the usage of text colors.
    2. ./Models/Model8a.html[S][Pw] - another model page of the usage of text colors.
    3. ./Models/Model8b.html[S][Pw] - a model page of the usage of relative font-size values.
    4. ./Models/Model8c.html[S][Pw] - a comparison page of xx-small - xx-large font sizes.
  4. What are selectors, classes and id-attributes (+ following: 12.)
    1. ./Models/Model9.html [S][Pw] - an example of the usage of universal selectors.
    2. ./Models/Model10.html[S][Pw] - a model of the usage of an element type selector (H2).
    3. ./Models/Model11.html[S][Pw] - grouping examples. It has also a model of a table resembling list, which concerns the page 9, How to set CSS for list elements.
    4. ./Models/Model12.html[S][Pw] - a model of the usage of class selectors.
    5. ./Models/Model13.html[S][Pw] - a model of the usage of attribute selectors.
    6. ./Models/Model14.html[S][Pw] - a model of the usage of id-selectors.
    7. Virheet.php3#listat2[S][Pw] - a test to attribute and id-selectors.
    8. ./Models/Model15.html[S][Pw] - a model of the usage of paragraph related pseudo-elements.
  5. What is the processing order of CSS
    1. ./Models/Model16.html[S][Pw] - a model of contextual selectors.
    2. ./Models/Model17.html[S][Pw] - another model of contextual selectors. Concerns also the pages 9, What is the processing order of CSS.
    3. Virheet.php3#listat[S][Pw] - a selector test with list elements. Concerns also the pages 9, What is the processing order of CSS.
    4. ./Models/Model18.html[S][Pw] - a model of the usage of the !important rule.
  6. How to set CSS for texts and different media types
    1. ./Models/Model19.html[S][Pw] - models of defining the FONT element.
    2. ./Models/Model20.html[S][Pw] - a model of basic font definitions to the BODY element.
    3. ./Models/Model21.html[S][Pw] - a model of defining the H2 element.
    4. ./Models/Model22.html[S][Pw] - a model of defining shorthand properties of font property (concerns also the page 8, How to set CSS for backgrounds and borders).
    5. Virheet.php3#fontti[S][Pw] - in this place was intention to have a test concerning supporting the @font-face at-rule but I don't have a suitable font file at this moment. That's why there is not really a test.
  7. How to set CSS for anchors and links (+ following: 44., 57., 58.)
    1. ../Yleiset/englishb2.htm[S] - demonstrates the usage of link and dynamic pseudo-classes.
    2. ../Tests/ElementitTestB.html[S] - tests the property display with image links. Concerns also the page 11, How to put CSS into Web pages.
  8. How to set CSS for backgrounds and borders (+ following: 14., 34.)
    1. ./Models/Model23.html[S][Pw] - a model of border properties to a BLOCKQUOTE element.
    2. Virheet.php3#reunat[S][Pw] - demonstrates problems with borders to inline level elements.
    3. Illegal.php3[S][Pw] - another page, which has an example, which demonstrates problems with borders to inline level elements.
    4. ./Models/Model23a.html[S][Pw] - a model of using box dimension properties with following screen captures:
    5. ../modeltable2.html[S] - demonstrates the previous problem. Concerns also the page 11, How to put CSS into Web pages (position:fixed).
    6. ../Tests/Girl.html[S] - test supporting of background-attachment:fixed and position:fixed; I have taken three screen captures of the page:
    7. ./Models/Model23b.html[S][Pw] - an example of form elements and a screen capture ../Tests/model000.gif[S] from Mozilla 0.7. In this page is used dynamic pseudo-classes, when this model concerns also the page 7, How to set CSS for anchors and links.
  9. How to set CSS for list elements (+ following: 21., 28., 29.)
    1. ./Models/Model24.html[S][Pw] - a model of the usage of the list-style-image property.
    2. ../Nt/MISSION_FAILED.php3#Summary[S][Pw] - an example of using small faces as list markers.
    3. ../Tests/ElementitListTest.html[S] - test indents, when margin:0, but the padding is undefined. I took two screen captures of it:
    4. ./Models/Model24a.html[S][Pw] - tests generated contents, quotes and some values of the display property. This model concerns also the page 11, How to put CSS into Web pages. ../Tests/Quotes.html[S] is an additional test page for quotes.
  10. How to set CSS for table elements
    1. ./Models/Model25.html[S][Pw] - demonstrations of border-collapse, border, background and some other properties in tables.
    2. ./Models/Model25a.html[S][Pw] - another model, which demonstrations of border-collapse, border and background properties in tables.
    3. ./Models/Model25b.html[S][Pw] - demonstrations of caption-side, border, background and some other properties in tables.
    4. ../HTMLKit/Attributes2.php3[S] - an example of a heavy table, which use the table-layout:fixed table layout model.
  11. What is the visual formatting model of CSS2 (+ following: 5., 37., 42., 49.)
    1. ./Models/Model26.html[S][Pw] - a model of using the float property.
    2. ./Models/Model27.html[S][Pw] - another model of using the float property.
    3. ../Tests/ElementitTestFloat.html[S] - an example page of using the float property. If you have Opera 4.x+, it gives also in the full screen mode an example of a "slide show" (change "slides" with PageUp/PageDown keys).
    4. ./Models/Model28.html[S][Pw] - a model of the usage of the position:absolute.
    5. ./Models/Model29.html[S][Pw] - a model of the usage of the display property as an alternative to the visibility property. In this page is used dynamic pseudo-classes, when this model concerns also the page 7, How to set CSS for anchors and links.
    6. ./Models/Model30.html[S][Pw] - a model of the usage of the visibility property as an alternative to the display property. In this page is used dynamic pseudo-classes, when this model concerns also the page 7, How to set CSS for anchors and links.
    7. ./Models/Model30b.html[S][Pw] - a model of the usage of the display:none to hide elements.
    8. ./Models/Model31.html[S][Pw] - a model of the usage of the position:fixed.
    9. Model31b.html[S][Pw]- another model of the usage of the position:fixed.
    10. ../Tests/BasicLayout.html[S] - model of the usage position:fixed and margin:auto. I have screen captures of it:
    11. ../Nt/ongelmia-us.xml[S][Pw] - an example of XML + CSS, which tests especially the display-property. It has following comparison pages and a screen capture:
    12. ../Tests/Model25b.xml[S] - another XML-example, which use the display-property.

Extra pages

Other pages

[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