1. /k/k 1212 Cascading Style Sheets Part one Marko Boon http://www.win.tue.nl/~marko/cursusCSS

2. /k/k 1212 Part 1: introduction Introduction to CSS Structure and syntax Part 11: appearance Part 111: positioning

3. /k/k 1212 Introduction to CSS Internet HTML –Markup language –Static User interaction –hyperlinks –scripts Part 1

4. /k/k 1212 Introduction to CSS Part 1 Browser:defines appearance (text height, font, colour) HTML: defines style (heading, paragraph, list, address)

5. /k/k 1212 Introduction to CSS Part 1 CSS: defines - appearance - location/placement on page HTML tags for appearance are deprecated! bgcolor="…" width="…"

6. /k/k 1212 Advantages of CSS: Browser no longer in control of appearance One, common style and syntax Define styles for –one element –all elements of a certain tag –All elements of a certain class External file  reusable

7. /k/k 1212 Where to specify styles: Between and tags As style="…" property within a tag Load external.css file

8. /k/k 1212 <style </style> CSS code Or in an external.css file: <link type="text/css" rel="stylesheet" href="mystyles.css"> <!–- Hide script from old browsers --> Or in an individual tag: <p style=" C SS code ">

9. /k/k 1212 CSS Syntax selector { property:value; } body { color:blue; }

10. /k/k 1212 p { font-family:"sans serif"; } Selectors: p { font-family:"sans-serif"; } h1, h2, h3, h4 { color:red; } 1. HTML Tag(s):

11. /k/k 1212 Selectors:.center { text-align:center; } 2. Class: This text will be centered.

12. /k/k 1212 Selectors: #abstract { font-size:9pt; } 3. id: This text has font size 9pt.

13. /k/k 1212 Values: td { border-style:solid; } 1. string:

14. /k/k 1212 Values: p { line-height:2; } 2. number:

15. /k/k 1212 Values: table { width:80%; } 3. percentage:

16. /k/k 1212 Values: body { font-size:10pt; } 4. length: Units:in, cm, mm, px, pt (=1/72 in) em (= current font size)

17. /k/k 1212 Values: 5. colour: value: red, blue, green, gray, … rgb value: rgb(255, 0, 0) rgb percentage: rgb(50%, 50%, 50%) hexadecimal: #FF0000 body { color:rgb(0,0,255); }

18. /k/k 1212 Values: 6. url: body { background-image: url("images/bg.jpg"); }

19. /k/k 1212 Comments: /* Smaller font for abstract */ #abstract { /* 9pt instead of 11pt */ font-size:9pt; } body { font-size:11pt }

20. /k/k 1212 My first page with CSS Hello world

21. /k/k 1212 My first page with CSS <link rel="stylesheet" type="text/css" href="mystyles.css"> Hello world

22. /k/k 1212 mystyles.css body { color:blue; background-image:url( " bg.jpg " ); } h1,h2 { color:black; font-family:arial,sans-serif; }

23. /k/k 1212 Hello world

24. /k/k 1212 Hello world

25. /k/k 1212 body { color:blue; background-image:url("bg.jpg"); } Hello world

26. /k/k 1212 Hello world Some text in a paragraph.

27. /k/k 1212 Hello world Some text in a paragraph.

28. /k/k 1212 Hello world Some text in a paragraph.

29. /k/k 1212 Multiple Style Sheets <link rel="stylesheet" type="text/css" href="mystyles.css"> body { color:red; font-size:14pt; } Replaces external Style sheet settings