Table of topic groups > Front page of CSS-guide > Practice > Practice tasks

Practice tasks

Topics

• Common
• Page 2., How to put CSS into Web pages
• Page 3., What are color, units and keywords in CSS
• Page 4., What are selectors, classes and id-attributes
• Page 5., What is the processing order of CSS
• Page 6., How to set CSS for texts and different media types
• Page 7., How to set CSS for anchors and links
• Page 8., How to set CSS for backgrounds and borders
• Page 9., How to set CSS for list elements
• Page 10., How to set CSS for table elements
• Page 11., How to put CSS into Web pages

Common

This site has also files Oppilas.html (oppilas = student) and Oppilas2.html. Task are primary intended to make to the page Oppilas2.html or linked pages from that page. Of course it is possible to use other pages. Collected.php3, Opettaja.html (opettaja = teacher), collected.css ja collected.txt work as models.

Note. Some of the tasks are intended to all browsers, but some only to certain browsers. Think. which matters each browsers support. Much CSS, which is mentioned don't use with Netcape 4.x series properly or not at all. Make at least one file for Netscape 4.x (for example Netscape4x.css) and for other browser several files. Use either JavaScript or sever side encoding (look from an extra page advice). If I have not especially mentioned, tasks are intended to all browsers.

I use following acronyms:

• IE = Microsoft Internet Explorer.
• NS = Netscape.
• OP = Opera.

Page 2., How to put CSS into Web pages

1. Define to some paragraph a style attribute (style=""). Use the property color. Set the color (color:...) by using six digital hexadecimal values (for example #121212), which is the common habit when defining HTML attributes.
2. Define linked style sheets and save it with some names. Remember to set all necessary HTML-attributes for the element LINK!
3. Write to the CSS-files, which you have done body {color:}.
4. Write the last example in the page 2. to a file, which is intended to other browsers than NS 4.x. Note that you have already defined the element BODY. Continue that rule and don't write a new definition. Remember to set separations marks correctly!

Page 3., What are color, units and keywords in CSS

1. Write to CSS-file for NS 4.x to the element BODY a relative font size, which is smaller than the default size. Remember to set the font-size property one step larger than to other browsers. Continue the previous rule.
2. Write to CSS-file for other browsers to the element BODY set the font-size property one step smaller than for NS 4.x. Continue the previous rule.
3. Write to the element H2 an absolute font size (h2 {font-size:}). Test, if the size is really the same in NS 4.x, IE and OP browsers. If the size is not the same, change the font size value either in the NS 4.x CSS-file or in some other file.
4. Define the color to the element H2.
5. Write to some paragraphs (the element P) of the Practice pages inline style by using the attribute style. Give with them different color by using all possible color definition methods.

Page 4., What are selectors, classes and id-attributes

1. Write to CSS-file other browsers than NS 4.x H2 such properties, which has not given to it in the example.
2. Define to the element CODE color and background color properties so, that the element looks out in the practising page approximately at the same way as in this site. If you want, define also other elements (for example BLOCKQUOTE).
3. Write to elements H1, H3-H6 a common rule.
4. Create a common rule to elements TABLE, TH, TD.
5. Define to the element BODY a class (for example BODY class="ownClass").
6. Write and define a rule div.doc {}. If you want, write also other rules.
7. I you have Mozilla Gecko/NS 6.x+ or OP 4.x+, try in some paragraphs attribute selectors.
8. Define to the same element both class and id attributes and corresponding rules. Define rules so that they are partially complementary but partially override each others.
9. If you have Mozilla Gecko/NS 6.0, OP 4.x+ or IE 5.5+, define p:first-letter to CSS-file, which is intended to other browsers than NS 4.x.

Page 5., What is the processing order of CSS

1. Create a table, which have paragraphs and define for them a rule table p {}.
2. Create a corresponding rule to the BODY element, but add the class specifier (for example body.ownClass p {}). Define a the same principle other rules.
3. Write to CSS for other browsers than NS 4.x rules, which have !important.
4. Test the functionality of the important rule in individual paragraphs by using inline styles (style="").

Page 6., How to set CSS for texts and different media types

1. Write or copy examples of the usage of the element FONT to a practising page.
2. Define rules big {} and font.font-style1 {}.
3. If you have Mozilla Gecko/NS 6.0, test to change colors of the element FONT by using rules, which has the format font[color="..."] {} (OP 4.x+ doesn't support changing color by using rule like *[color="..."] even if it supports overall quite well attribute selectors).
4. Define to the practising page the font-family to the element BODY and CODE.
5. Do the same to the group TABLE, TD, TH and possible other groups.
6. Create rule to elements H2 and P. Test with them some of the properties, which I have used in my examples.
7. Create a CSS-file, which use different media blocks (for example @media all {...} ... @media print, projection {...} @media screen {...}.
8. Define to a paragraph the property cursor by using the attribute style.
9. Define to some elements system fonts and colors (they are supported in IE 4.x+, NS 6.x+, OP 5.1x+ browsers).

Page 7., How to set CSS for anchors and links

• Define to the CSS file for NS 4.x a:link and a:visited.
• Define to the CSS file for other browsers a:link, a:visited, a:hover and a:active (if you have a new NS/Mozilla you can define also a:focus).
• Define to the CSS file for other browsers corresponding system by taking account the class, which you have set to the element BODY. Note, that you don't need necessary to redefine the whole series, but you can redefine the whole series (:link > :focus).
• Define to the CSS file for other browsers series, which concerns only images without a class.
• Define to the CSS file for other browsers link and dynamic pseudo-class series, which concerns only images so, that you take account the class, which you have set to the element BODY.

Page 8., How to set CSS for backgrounds and borders

1. Define to a practising page as an embedded style to the element BODY a background image (remember also to use the class specifier). Use all possible properties and compare the functionality in different browsers.
2. Define to a practising page (for example as an embedded style) to a class specified BLOCKQUOTE some borders. Use all possible properties and compare the functionality in different browsers (NS 4.x might crash).

Page 9., Lists

1. Define list-style-type to several list levels.
2. Create to the CSS file for other browsers rules, which define list style images (I recommend to use approximately 16x16 pixel GIF-images).

Page 10., How to set CSS for table elements

1. Check both the CSS files for NS 4.x and other browsers so, that they have at least font definitions to elements TD and TH.
2. Add previous defined rules or create new.
3. Add to the CSS file for other browsers rules, where you have used special CSS properties for tables (the most recommended browser in testing the functionality is OP 4.x+).

Page 11., How to put CSS into Web pages

1. Create a basic structure, which resemble a model, but instead of using the max-width property, use the width property.
2. Set images to the beginning of a practising page. Define for it absolute cordinates (position:absolute) and the property z-index. Test the funcitionality of the z-index propreties in different browsers.
3. Test to hide a paragraph or some other element by using the property display.
4. If you have OP 4.x+ or NS 6.x+, you can test to create table with CSS in XML documents.