css digital media: communication and design 2007
TRANSCRIPT
CSS
Digital Media: Communication and design
2007
Digital Media: Communication and Design F2007
Comments
Exercise on Photoshop Evaluation
AssignmentsBook
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
Index
Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts
Digital Media: Communication and Design F2007
Behavioural layerJavaScript
Layers
Presentational layerCSS
Structural layerXHTML
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
A single style sheet can be used by many XHTML documents
Style sheet
XHTML-document
XHTML-document
XHTML-document
<!-- Stylesheets --> <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">
Digital Media: Communication and Design F2007
Index
Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts
Digital Media: Communication and Design F2007
Syntax
Example
h1 {color: #fff;}p {
font-size: 12px;font-family: Verdana, sans-serif;
}
Digital Media: Communication and Design F2007
Syntax
selector {property: value;}
Declaration
Selector: select the element Property: style we’re going to apply Value: what will be the property
Digital Media: Communication and Design F2007
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;}
Digital Media: Communication and Design F2007
Index
Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
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>
Digital Media: Communication and Design F2007
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>
Digital Media: Communication and Design F2007
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>
<!-- @import url(styles/mystyles.css); --></style></head>
Digital Media: Communication and Design F2007
Media
Screen: display in a computer monitor Print: printing or “show preview” Handheld: mobile phones, PDAs All
Digital Media: Communication and Design F2007
Inheritance
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
Index
Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts
Digital Media: Communication and Design F2007
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>
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
Box model III
This is a paragraph that runs over two lines
margin
padding
content
border
Digital Media: Communication and Design F2007
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;}
Digital Media: Communication and Design F2007
Index
Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts
Digital Media: Communication and Design F2007
Selectors
Element selector Contextual selector Class and id selector Pseudoselector
Digital Media: Communication and Design F2007
Selectors: element
We specify the HTML element
h1 {color: blue;}
h1, h2, p {color: blue;}
Digital Media: Communication and Design F2007
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;}
Digital Media: Communication and Design F2007
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>
Digital Media: Communication and Design F2007
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;}
Digital Media: Communication and Design F2007
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;}
Digital Media: Communication and Design F2007
Index
Intro to CSS Syntax Adding styles to our document Box model Selectors Fonts
Digital Media: Communication and Design F2007
Font properties
Font issues: not all users have all fonts Size issues: OK for me is probably too
small for my father
Digital Media: Communication and Design F2007
Font family
serif sans-serif monospace cursive fantasy
h1 {font-family: Helvetica, Arial;}p {font-family: “Trebuchet MS”, sans-serif;}
Digital Media: Communication and Design F2007
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;}
Digital Media: Communication and Design F2007
Font weight / style
Font weight:
Font style
h1 {font-weight: bold;}p {font-weight: normal;}
h1 {font-style: italic;}p {font-style: oblique;}
Digital Media: Communication and Design F2007
Text decoration
Remove the underline in linksBe careful
a:link {text-decoration: none}a:visited {text-decoration: none}
Digital Media: Communication and Design F2007
Text alignment
Text indent: Indent in the first line of text
p {text-indent: 3em;}p {text-indent: 10%;}
Digital Media: Communication and Design F2007
Text alignment
p {text-align: justify;}p {text-align: right;}
Digital Media: Communication and Design F2007
Questions?