highlighting feature such as Notepad++

(1)

CSS

Maciej Grzenda, PhD

Warsaw University of Technology

Faculty of Mathematics and Information Science M.Grzenda@mini.pw.edu.pl

http://www.mini.pw.edu.pl/~grzendam

(2)

HTML/CSS/JS tasks

• In this task and all the other

HTML/CSS/JavaScript tasks use any text editor you prefer, if possible with syntax highlighting feature such as Notepad++

highlighting feature such as Notepad++

• Verify whether your document is compliant with HTML standard and fix errors, if

necessary

(3)

Task 1 – HTML page with CSS

Develop a web site similar to this one:

p. 3

Maciej Grzenda http://www.mini.pw.edu.pl/~grzendam

1. Place all CSS settings in STYLE tag in the HEAD section of an HTML document

2. Use CSS specification (http://www.w3.org/TR/CSS2/) for fonts, color, background and box model settings

(4)

Task 1 – to start from

Every CSS rule is composed of selector and attributes.

Attribute names and allowed values can be found in CSS specification

(5)

Task 2 - CSS classes

• Move all CSS rules to a separate CSS file (with .css extension) that can be shared among a number of HTML files. Hence, consistent formatting spanning a number of HTML documents can be ensured

• Display links to commercial web sites with 3 times smaller font

p. 5

• Display links to commercial web sites with 3 times smaller font size than the links to non-commercial ones

• Display the names of the authors in uppercase

• Display publisher name underlined

1. Use LINK tag to make a reference to a separate CSS file

2. Different formatting for different instances of the same tag e.g. A are needed. Hence, define CSS classes and add CLASS attribute to such tags

3. Consider using SPAN to provide customised formatting for different blocks of text (here: author and publisher)

(6)

Task 2 – expected visual formatting

The names of the

authors are displayed in upper case thanks to CSS formatting, not the changes in authors’

names in the HTML names in the HTML document

These addresses are still defined with A tags. In spite of this, different

formatting rules have been applied to individual A

tags.

(7)

Task 3 – Dynamic formatting with pseudoclass selectors

• Make unvisited links red

• Make the text of visited commercial links 10pt large and green

p. 7

large and green

• Underline the text of headers when a cursor is placed over them

1. Use pseudoclass selectors

2. If necessary combined class selectors with pseudoclass selectors

(8)

Task 4 – DIVs in action

Develop a web site similar to this one:

1. Use DIV elements to display two layers of a document

2. Use STYLE attributes for DIV elements or standard rules in CSS files

(9)

Task 5 – new selectors

Develop a web site similar to this one:

1. Use no classes, use no STYLE attributes 2. Instead, CSS 3 selectors

(http://www.w3.org/TR/css3-

selectors/#selectors) should be used

p. 9

First row: green

Last row: yellow

Cells with rowspan: blue

Images in a table: with red border

Cells spanning 2 columns with bold font and centred text

selectors/#selectors) should be used

(10)

Task 6 – DIV-based layout

Develop a web site similar to this one:

Justified text

Right-aligned text flowing around the picture

The top DIVs get higher The top DIVs get higher when a mouse cursor is placed on them.

The blue boxes have a fixed position on the screen,

irrespective of the use of scroll bars on the right

When a mouse cursor is placed over some elements, they are resized (see next

(11)

Task 6 – green boxes

p. 11

The top DIVs get higher when a mouse cursor is placed on them. Entire content is

automatically shown. In addition, the boxes are resized horizontally when browser window gets larger or smaller.

(12)

Task 6 – blue boxes

The blue boxes get wider when a mouse cursor is

(13)

Task 6 – yellow boxes

p. 13

The yellow boxes get wider when a mouse cursor is placed on them. Their width is changed to 200px. The content is scrollable if necessary.