CSS

1
CSS

• Digital Media Communication and design
• 2007

2
Comments

• Exercise on Photoshop
• Evaluation
• Assignments
• Book

3
Goals of the lecture

• Learn the syntax of CSS
• How to include styles in our XHTML document
• How to select where we want the styles applied
• Basic typographic styles

4
Index

• Intro to CSS
• Syntax
• Adding styles to our document
• Box model
• Selectors
• Fonts

5
Layers
Behavioural layer JavaScript
Presentational layer CSS
Structural layer XHTML
6
Why to use styles

• Control the presentation
• Way the document is displayed/delivered
• Many many many more possibilities
• Keep presentation separate from content
• We can change the presentation by just editing
  one file
• Improve accessibility

7

• A single style sheet can be used by many XHTML
  documents

Style sheet
XHTML-document
XHTML-document
XHTML-document
lt!-- Stylesheets --gt ltlink rel"stylesheet"
type"text/css" href"/graphics/system/default.c
ss" media"all"gt ltlink rel"stylesheet"
type"text/css" href"/graphics/system/default.c
ss" media"print"gt
8
Index

• Intro to CSS
• Syntax
• Adding styles to our document
• Box model
• Selectors
• Fonts

9
Syntax

• Example

h1 color fff p font-size
12px font-family Verdana, sans-serif
10
Syntax
selector property value
Declaration

• Selector select the element
• Property style were going to apply
• Value what will be the property

11
Syntax

• One line with multiple properties
• Multiline declaration

p font-size 12px font-family Verdana,
sans-serif
p font-size 12px font-family Verdana,
sans-serif
12
Index

• Intro to CSS
• Syntax
• Adding styles to our document
• Box model
• Selectors
• Fonts

13
Adding styles

• 3 ways
• Inline style added within element tag
• Embedded styles added in the head of the HTML
  document
• External style sheet separate document
  containing all styles

14
Adding styles inline

• Uses style attribute
• Deprecated in XHTML 1.1

lth1 stylecolor redgtThis is a red headerlt/h1gt
lth2 stylecolor red font-familyCourier
New,serifgtThis is a red header with another
fontlt/h2gt
15
Adding styles embedded

• ltstylegtlt/stylegt
• Uses style element in the head of the XHTML
  document

ltheadgt ltstyle typetext/cssgt h1 color
red p color blue font-size
12px lt/stylegt lttitlegtStylesheets
embeddedlt/titlegt lt/headgt
16
Adding styles external file(s)
/ This is the beginning of the CSS file / h1
color red p color blue font-size
12px / This is the end of the file /
Comments
mystyles.css
ltheadgt ltlink relstylesheet hrefstyles/mystyle
s.css mediascreen typetext/css /gt lt/headgt
ltheadgt ltstylegt lt!-- _at_import url(styles/mystyles.c
ss) --gt lt/stylegt lt/headgt
17
Media

• Screen display in a computer monitor
• Print printing or show preview
• Handheld mobile phones, PDAs
• All

18
Inheritance
19
Cascade

• We can apply many styles
• Order of style applied
• 5. Browser default
• 4. External style sheet
• 3. Imported external style sheet
• 2. Embedded style sheet
• 1. Inline style sheet

20
Index

• Intro to CSS
• Syntax
• Adding styles to our document
• Box model
• Selectors
• Fonts

21
Box model
ltbodygt lth1gtHeadinglt/h1gt ltpgtLorem ipsum dolor sit
amet, consectetuer ltemgtadipiscing elitlt/emgt.
Aliquam accumsan, leo vel gravida placerat, est
nulla ltstronggtsollicitudinlt/stronggt mi, ut
dignissim eros urna sit amet sem. Phasellus
posuere malesuada tortorlt/pgt ltulgt ltligtThis is a
list of itemslt/ligt ltligtThis is another
elementlt/ligt ltligtThis is another
elementlt/ligt lt/ulgt lt/bodygt
22
Box model II
em
strong
body h1 p ul li
Heading
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aliquam accumsan, leo vel
gravida placerat, est nulla sollicitudin mi, ut
dignissim eros urna sit amet sem. Phasellus
posuere malesuada tortor

• This is a list of items

• This is another element

• This is another element

23
Box model III
margin
padding
This is a paragraph that runs over two lines
content
border
24
Specifying values

• Units
• Do NOT add a space 14px, 0.3cm
• Color
• Name
• RGB value

p color blue
color 00CCFF color 0CF color
rgb(0,204,255) color rgb(0, 80, 100)
25
Index

• Intro to CSS
• Syntax
• Adding styles to our document
• Box model
• Selectors
• Fonts

26
Selectors

• Element selector
• Contextual selector
• Class and id selector
• Pseudoselector

27
Selectors element

• We specify the HTML element

h1 color blue
h1, h2, p color blue
28
Selectors contextual

• Specify the context where the style will be
  applied
• Descendant
• Child
• Adjacent

h1 em color blue
h1 gt em color blue
h1 p padding-left 10px
29
Selectors class

• Class group elements that share a common
  characteristic

lth1 classfirstgtFirst headinglt/h1gt ltp
classfirstgtThis is the first paragraph in the
articlelt/pgt
p.first color blue .first padding-top 10px
30
Selectors id

• id give an element a unique name

ltdiv idheadergtlt/divgt ltdiv idmenugtlt/divgt
divheader background-color red header
background-color red
31
Selectors pseudoselectors

• Used to apply styles to pseudoclasses

alink text-decoration none avisited
text-decoration none ahover
text-decoration underline aactive
text-decoration none
32
Index

• Intro to CSS
• Syntax
• Adding styles to our document
• Box model
• Selectors
• Fonts

33
Font properties

• Font issues not all users have all fonts
• Size issues OK for me is probably too small for
  my father

34
Font family
h1 font-family Helvetica, Arial p
font-family Trebuchet MS, sans-serif

• serif
• sans-serif
• monospace
• cursive
• fantasy

35
Font size
h1 font-size larger p font-size 80 menu
font-size 10px

• Absolute size
• From xx-small to xx-large, default medium
• Length units cm, in
• Relative size
• larger and smaller
• Percentage they accumulate
• Length units em and px

36
Font weight / style

• Font weight
• Font style

h1 font-weight bold p font-weight normal
h1 font-style italic p font-style oblique
37
Text decoration
alink text-decoration none avisited
text-decoration none

• Remove the underline in links
• Be careful

38
Text alignment
p text-indent 3em p text-indent 10

• Text indent
• Indent in the first line of text

39
Text alignment
p text-align justify p text-align right
40
Questions?