css digital media: communication and design 2007

CSS

Digital Media: Communication and design

2007

Digital Media: Communication and Design F2007

Comments

Exercise on Photoshop Evaluation

AssignmentsBook


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


Index

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


Behavioural layerJavaScript

Layers

Presentational layerCSS

Structural layerXHTML


Why to use styles

Control the presentationWay the document is displayed/deliveredMany many many more possibilities

Keep presentation separate from contentWe can change the presentation by just

editing one file Improve accessibility

A single style sheet can be used by many XHTML documents

Style sheet

XHTML-document

XHTML-document

XHTML-document

 <link rel="stylesheet" type="text/css"

href="/graphics/system/default.css" media="all"><link rel="stylesheet" type="text/css"

href="/graphics/system/default.css" media="print">


Index



Syntax

Example

h1 {color: #fff;}p {

font-size: 12px;font-family: Verdana, sans-serif;

}


Syntax

selector {property: value;}

Declaration

Selector: select the element Property: style we’re going to apply Value: what will be the property


Syntax

One line with multiple properties

Multiline declarationp {

font-size: 12px;font-family: Verdana, sans-serif;

}

p {font-size: 12px; font-family: Verdana, sans-serif;}


Index



Adding styles

3 ways: Inline: style added within element tagEmbedded: styles added in the head of the

HTML documentExternal style sheet: separate document

containing all styles


Adding styles: inline

Uses style attribute

Deprecated in XHTML 1.1

<h1 style=“color: red”>This is a red header</h1>

<h2 style=“color: red; font-family:’Courier New’,serif”>This is a red header with another font</h2>


Adding styles: embedded

<style>…</style> Uses style element in the head of the

XHTML document

<head><style type=“text/css”>

h1 {color: red;}p {color: blue; font-size: 12px;}

</style><title>Stylesheets embedded</title></head>

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 */

Commentsmystyles.css

<head><link rel=“stylesheet” href=“styles/mystyles.css” media=“screen” type=“text/css” /></head>

<head><style>

</style></head>


Media

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


Inheritance


Cascade

We can apply many styles Order of style applied:

5. Browser default4. External style sheet3. Imported external style sheet2. Embedded style sheet1. Inline style sheet


Index



Box model<body><h1>Heading</h1><p>Lorem ipsum dolor sit amet, consectetuer <em>adipiscing elit</em>. Aliquam accumsan, leo vel gravida placerat, est nulla <strong>sollicitudin</strong> mi, ut dignissim eros urna sit amet sem. Phasellus posuere malesuada tortor</p><ul>

<li>This is a list of items</li><li>This is another element</li><li>This is another element</li>

</ul></body>


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

Box model II

Heading

•This is a list of items

•This is another element•This is another element

body

h1

p

ul

li

emstrong


Box model III

This is a paragraph that runs over two lines

margin

padding

content

border


Specifying values

Units:Do NOT add a space: 14px, 0.3cm

Color:Name:RGB value:

{color: #00CCFF;}{color: #0CF;}{color: rgb(0,204,255);}{color: rgb(0%, 80%, 100%);}

p {color: blue;}


Index



Selectors

Element selector Contextual selector Class and id selector Pseudoselector


Selectors: element

We specify the HTML element

h1 {color: blue;}

h1, h2, p {color: blue;}


Selectors: contextual

Specify the context where the style will be applied

Descendant: Child: Adjacent:

h1 em {color: blue;}

h1 > em {color: blue;}

h1 + p {padding-left: 10px;}


Selectors: class

Class: group elements that share a common characteristic

p.first {color: blue;}.first {padding-top: 10px;}

<h1 class=“first”>First heading</h1><p class=“first”>This is the first paragraph in the article</p>


Selectors: id

id: give an element a unique name

<div id=“header”>…</div><div id=“menu”>…</div>

div#header {background-color: red;}#header {background-color: red;}


Selectors: pseudoselectors

Used to apply styles to “pseudoclasses”

a:link {text-decoration: none;}a:visited {text-decoration: none;}a:hover {text-decoration: underline;}a:active {text-decoration: none;}


Index



Font properties

Font issues: not all users have all fonts Size issues: OK for me is probably too

small for my father


Font family

serif sans-serif monospace cursive fantasy

h1 {font-family: Helvetica, Arial;}p {font-family: “Trebuchet MS”, sans-serif;}


Font size

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

h1 {font-size: larger;}p {font-size: 80%;}#menu {font-size: 10px;}


Font weight / style

Font weight:

Font style

h1 {font-weight: bold;}p {font-weight: normal;}

h1 {font-style: italic;}p {font-style: oblique;}


Text decoration

Remove the underline in linksBe careful

a:link {text-decoration: none}a:visited {text-decoration: none}


Text alignment

Text indent: Indent in the first line of text

p {text-indent: 3em;}p {text-indent: 10%;}


Text alignment

p {text-align: justify;}p {text-align: right;}


Questions?

css digital media: communication and design 2007

Documents