Presentation is loading. Please wait.

Presentation is loading. Please wait.

/k/k 1212 Cascading Style Sheets Part one Marko Boon

Similar presentations


Presentation on theme: "/k/k 1212 Cascading Style Sheets Part one Marko Boon"— Presentation transcript:

1 /k/k 1212 Cascading Style Sheets Part one Marko Boon

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 CSS code Or in an external.css file: Or in an individual tag:

"> /k/k 1212 <style </style> CSS code Or in an external.css file: <link type= CSS code Or in an external.css file:

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 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 body { color:red; font-size:14pt; } Replaces external Style sheet settings


Download ppt "/k/k 1212 Cascading Style Sheets Part one Marko Boon"

Similar presentations


Ads by Google