Copenhagen, 6 December 2004

Modern CSS Principles

Miruna Bădescu

Finsiel Romania

2

Result:

Programmer

Web designer

Conclusion: both of them must know and follow (the same) standards from the beginning

Authoring Web pages scenarioProgrammerWeb designer

makes nice

layout

breaks it into HTML and

CSS

integrates layout in dynamic pages

validates pages (WAI, CSS, etc.)

improves HTML and

CSS

goes back to the

designer…

“Your layout looks terrible!”

“This is not my design!”

3

Designing with tables

Designers like it a lot allows accurate control over the layout with down to pixel-level they have tools (from Macromedia, Corel, Adobe Photoshop, etc.) that

slice a picture into a Web page (HTML and CSS) End users suffer

long loading time poor accessibility

Programmers don’t enjoy it hard to maintain longer code

Search engine get confused it’s not semantically correct

4

Use CSS instead

Standard for Web design

Separates the content from it’s appearance

Allows information to be presented differently according to:the target media (screen, printer, aural, small screens,

etc.)client’s settings (alternative layouts, text browsers, etc.)

5

Adding styles to pages (1)

1. Inline CSS handy, but don’t abuse it because it puts presentation back with

the content

6

Adding styles to pages (2)

2. Embedded CSS better, but makes code longer and less visible same style downloaded on client’s machine multiple

times

style-sheet declaration

7

Adding styles to pages (3)

3. External CSS easier to read and modify downloaded once for all website pages separates content from presentation – the way to go

sample.htmlsample_style.css

8

CSS rule

Selector Values

Properties

9

HTML documents are parsed into a document tree Example:

Inheritance in CSS

html

head body

title meta link h1 pul

li li li

• used when building CCS rules

• some properties (e.g. font-family) are inherited from parents if not specified

10

Types of selectors (1)

1. universal selector (CSS2) applies to: all elements in a page e.g.: * { color: red }

2. element type selector applies to: all elements of that type from a page (standard tags) e.g.: h2 { color: red }

3. class selector applies to: elements defined with that class e.g.: .sitetitle { color: red } HTML: <div class=“sitetitle”>…

11

Types of selectors (2)4. ID selector

applies to: the single element with that id from the page e.g.: #content { color: red } HTML: <div id=“content”>…

5. pseudo-element selector (CSS2) applies to: the first letter, line or child of the nominated element e.g.: p:first-letter { color: red }

6. pseudo-class selector (CSS2) applies to: the nominated element in certain conditions e.g.: a:hover { color: red } applies to: all element in a certain language e.g.: :lang(ro) { text-decoration: underline } HTML: <p xmlns="http://www.w3.org/1999/xhtml"

xml:lang="ro">…

12

Types of selectors (3)

7. descendant selector applies to: an element that is a child of another element e.g.: p strong { color: red }

HTML: <p>This <strong>paragraph</strong> is long…

8. parent-child selector (CSS2) applies to: an element that is a strict child of another

element e.g.: body > p { color: red }

13

Types of selectors (4)

9. adjacent selector (CSS2) applies to: an element that appears in the code right

after another e.g.: p + span { color: red }HTML: <p>This is a paragraph.</p>

<span>this one will be red</span> <span>this one not</span>

10. attribute selector (CSS2) applies to: elements that have a property specified or

specified with a certain value e.g.: input[type=“text”] { color: red }

14

The box model

top

rightleft

bottom

Content

border

padding

margin (transparent)

15

Where does it apply

For display purposes, every element in a document is considered to be a rectangular box which has a content are surrounded by padding, a border and margins

16

Example:Defining an unordered list style:

And writing the HTML code:

17

Results in:

18

The display property

Most used values for specifying the display type of an element:block – shows a separate block

e.g. default style for h1, p, form, div

inline – displays inside a text fragment e.g. default style for span, em, code

list-item – used for listse.g. default style for li

nonecan be applied to any elementdoesn’t show the element or the space it would take if shown

19

Positioning (1)

CSS2 provides four types of positioning schemes:

normaldefault positioning:

block boxes flow verticallyinline boxes flow horizontally

20

Positioning (2)

relativedone by browsers in two steps:

first, the normal flow is followedthe box is moved according to its offset properties (top, right, left,

bottom)

Notes:use z-index style property to specify their ordera specific width property might cause an offset to be ignored

Text text text text text text text text text text text text…

Text text text text text text text text text text text text…

paragraph with relative positioning, with positive top and left values

21

Positioning (3)

floatspecify elements to shift either to the left or rightsurrounding content flows around the opposite sidea width should be specified for a floating box

Text text text text text text text text text text text text text text text texttext text text text text text texttext text text text text text text

Text text text

Box floating to the right

22

Positioning (4)

Note: floating boxes take no space on the vertical sideif a floating box is taller than the first surrounding block, it will float around the next block, toosolution: clear the floating

Text text text text text text

Text text text text text texttext text text text text

Text text text text text text

Text text text text texttext text text text text

texttexttexttext

texttexttexttext

clear: right style for this element

23

Positioning (5)

absolute the normal flow does not apply and the element is positioned

according to its offset values (top, right, bottom, left)special case: fixed positioning – the containing block is the

viewport of the browser window

fixed position for this element

browser window

the rest of the content in the page that must be scrolled

24

Scaling

There are two types of lengths units for fonts:relative

em: computed value of the ‘font-size’ex: ‘x-height’px: pixels, relative to the viewing device

absolute in: inchescm: centimeterspt: pointspc: picas

Validate your CSS

http://jigsaw.w3.org/css-validator/validator.html

Exercises

• Modeling a simple page with CSS• Demonstrating the box model• Scaling an image