CMPT 165 Unit 3 – CSS – Part 1
Sept. 24th, 2015
Summary of key concepts/terms • Components of good website designs… and why?
• Structure of a markup file: DTD vs. head vs. body
• Elements vs. tags vs. content: know the difference
• Tags examined so far:
– List <ol><ul><li><dl><dt><dd>
– Image <img>
– Anchor <a>
– Usage info: http://www.w3schools.com/tags/
• Other important concepts:
– Tags vs. attributes
– Relative vs. absolute URL (from last Thurs.)
• Terms to keep in mind (more late)
– Style vs. semantic meaning of an element
– Usability + accessibility issues
2 CMPT 165 D1 (Fall 2015)
(Templates for) defining lists
3
<h1>Unordered list</h1>
<ul>
<li></li>
</ul>
<h1>Ordered list</h1>
<ol>
<li></li>
</ol>
<h1>Definition list</h1>
<dl>
<dt>Term</dt><dd>Description</dd>
</dl>
<dt>: definition term <dd>: definition description
CMPT 165 D1 (Fall 2015)
What’s wrong?
<img href="http://troy.lib.sfau.ca/screens/banner_left.jpg"
alt="The library logo">
<img src="http://troy.lib.sfau.ca/screens/banner_left.jpg"
alt="The library logo"/>
<img src="http://www.w3.org/2015/05/logoWWW2015.png"
alt="Another logo" width=50%" height="25%" />
<img src="http://www.w3.org/2015/05/logoWWW2015.png"
alt="Another logo" width="50%” height="25%" />
4 CMPT 165 D1 (Fall 2015)
And how about this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<h1>EXERCISE 1
<title>exercise1</title>
</h1>
<body>
<head>CMPT165 Lab 01</head>
<p>Lorem ipsum dolor sit amet, eum ad insolens sadipscing
philosophia, nostro recusabo posidonium ne mea. Cu clita aperiri
cum, eam ad labore philosophia. Ius cotidieque efficiantur ad.
Noster integre intellegat has ex. Eu pro volutpat tractatos.
Salutatus forensibus no quo.
</p>
<p1>Eum ad insolens sadipscing philosophia, nostro recusabo
posidonium ne mea. Cu clita aperiri cum, eam ad labore philosophia.
Ius cotidieque efficiantur ad. Noster integre intellegat has ex. Eu
pro volutpat tractatos. Salutatus forensibus no quo.</p1>
</body>
</html>
CMPT 165 D1 (Fall 2015) 5
And how about this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<h1>EXERCISE 1
<title>exercise1</title>
</h1>
<body>
<head>CMPT165 Lab 01</head>
<p>Lorem ipsum dolor sit amet, eum ad insolens sadipscing
philosophia, nostro recusabo posidonium ne mea. Cu clita aperiri
cum, eam ad labore philosophia. Ius cotidieque efficiantur ad.
Noster integre intellegat has ex. Eu pro volutpat tractatos.
Salutatus forensibus no quo.
</p>
<p1>Eum ad insolens sadipscing philosophia, nostro recusabo
posidonium ne mea. Cu clita aperiri cum, eam ad labore philosophia.
Ius cotidieque efficiantur ad. Noster integre intellegat has ex. Eu
pro volutpat tractatos. Salutatus forensibus no quo.</p1>
</body>
</html>
CMPT 165 D1 (Fall 2015) 6
Q: Was it easy to read this code? Q: How would you improve its readability?
CMPT 165 D1 (Fall 2015)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>exercise1</title>
</head>
<body>
<h1>CMPT165 Lab 99</h1>
<!–- Intro about myself -->
<p>Lorem ipsum dolor sit amet, eum ad insolens sadipscing
philosophia, nostro recusabo posidonium ne mea. Cu clita aperiri
cum, eam ad.</p>
<!–- Code below was as extension from lab 2 -->
<p>Eum ad insolens sadipscing philosophia, nostro recusabo
posidonium ne mea. Cu clita aperiri cum, eam ad labore
philosophia.</p>
</body>
</html>
How about this ?
7
Indentation
Add comments to remind yourself of things
Indentation
Use spaces generously… It’s free!
Ways to improve code readability
1. Spacing
2. Indentation
3. Add comments: <!-- text in here is ignored by browser -->
4. Other ideas?
CMPT 165 D1 (Fall 2015) 8
<h1>Common fruits in BC</h1>
<ul>
<li>Apples
<ul><li>Granny smith</li>
<li>Golden delicious</li>
</ul>
</li>
<li>Oranges
<ul><li>Naval
oranges</li><li>Mandarin oranges
</li></ul></li>
<li>Bananas</li>
</ul>
<h1>Common fruits in BC</h1>
<ul>
<li>Apples
<ul>
<li>Granny smith</li>
<li>Golden delicious</li>
</ul>
</li>
<li>Oranges
<ul>
<li>Naval oranges</li>
<li>Mandarin oranges </li>
</ul>
</li>
<li>Bananas</li>
</ul>
vs.
Questions?
INTERACTION
• Give feedback/responses to your audience
Web-programming
(Python, Javascript, PHP, etc.)
STYLE
• Describe visual properties of each element
Cascading Style Sheets (CSS)
Elements to good webpage designs
CONTENT
• Messages to your audience
You provide in this course
reminder: typos/grammar? (professionalism/ impression)
10
STRUCTURE
• Give semantic meaning to each element
• “Meta” data (meta=about)
Done via a markup language
CMPT 165 D1 (Fall 2015)
Effect of styling
• What do sites look like without style?
• To turn on/off:
11 CMPT 165 D1 (Fall 2015)
Cascading Style Sheets (CSS)
A sheet defining styles …
Why “cascading”?
– Answered later
Why CSS?
– By now, you should know what it serves
– E.g. you want “center-align” all your paragraphs
– To center-align, one way is to add attributes in your markup:
<p align="center">
12 CMPT 165 D1 (Fall 2015)
Structure of an essay The coolest dissertation
By ABC
I. Introduction
II. Body
II.A - Topic 1
II.A.i - Subtopic A
II.A.ii - Subtopic B
II.B - Topic 2
II.B.i - Subtopic A
II.B.ii - Subtopic B
III. Conclusion 13
<h1> </h1>
<p align="center"> </p>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h3> </h3>
<h3> </h3>
<h4> </h4>
<h4> </h4>
<h4> </h4>
<h4> </h4>
A complete example
CMPT 165 D1 (Summer 2005) 14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading</h1>
<p align="center">This is Paragraph1.</p>
<p align="center">This is Paragraph2.</p>
</body>
</html>
Q: What happens when you have an essay of 8 paragraphs?
A: Specify align attribute for each paragraph???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading</h1>
<p align="center">This is Paragraph1.</p>
<p align="center">This is Paragraph2.</p>
<p align="center">This is Paragraph3.</p>
<p align="center">This is Paragraph4.</p>
<p align="center">This is Paragraph5.</p>
<p align="center">This is Paragraph6.</p>
<p align="center">This is Paragraph7.</p>
<p align="center">This is Paragraph8.</p>
</body>
</html>
…But what if you have 100 paragraphs???
<style> tag
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading</h1>
<p align="center">This is Paragraph1.</p>
<p align="center">This is Paragraph2.</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
p {
text-align: center;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Demo
<style> tag
16
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css" media="all" >
p {
text-align: center;
}
h1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Required attribute Optional attribute
CMPT 165 D1 (Fall 2015)
Selector: an HTML element that you want to style
selector1 {
property_1: value_1;
property_2: value_2;
…
property_N: value_N;
}
selector2 {
property_1: value_1;
property_2: value_2;
…
property_M: value_M;
}
CSS syntax
17
ol {
list-style-type: circle;
start: a;
}
p {
text-align: center;
}
vs. “Attribute specification”
in older versions of HTML
name_of_attribute="value"
<p align=" center"> Note: declarations are separated by semicolons!
Declaration
CMPT 165 D1 (Fall 2015)
“Curly brace”
3 ways to define visual styles
1. In the header 2. “Inline”
CMPT 165 D1 (Summer 2005) 18
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading</h1>
<p style=“text-align: center;
color: blue;”>This is a
paragraph.</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css”>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3 ways to define visual styles
1. In the header
2. Inline
3. In a separate CSS file:
19
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css">
p {
text-align: center;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
remove
CMPT 165 D1 (Fall 2015)
Linking to an external stylesheet
20
p {
text-align: center;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Title</title>
<link href=“my_style.css" type="text/css" />
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
my_style.css
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Page 2</title>
<link href=“my_style.css" type="text/css" />
</head>
<body>
<h1>Heading</h1>
<p>This is yet another page.</p>
</body>
</html>
second_page.html
CMPT 165 D1 (Fall 2015)
3 ways to styling markup
Amount of work?
1. Inline
2. In the header
3. In a separate CSS file
21
Most Least
CMPT 165 D1 (Fall 2015)
CSS: Summary
What?
“Cascading” stylesheet?
– “Cascading”: answered later
Why CSS?
– You should know
How?
<style>
<link>
22 CMPT 165 D1 (Fall 2015)
Key items learned so far • Tags:
List <ol><ul><li><dl><dt><dd>
Image <img>
Anchor <a>
Linking to external data <link>
Styling <style>
http://www.w3schools.com/tags/
• Key concepts:
– Relative vs. Absolute URL
– Attribute specification vs. stylesheet
– attribute=“value” vs. CSS (selector, property, value)
23 CMPT 165 D1 (Fall 2015)
Q/A
25
http://cmpt165.cs.sfu.ca/ ~ /demos /SFU_logo.png lisat
Remote Local
Absolute vs. Relative URL SFU_logo.png + index.html in same folder (demos)
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Title</title></head>
<body>
<h1>Heading</h1>
<p>
<img src="http://fraser.sfu.ca/
~lisat/demos/SFU_logo.png" />
</p>
<p><img src="SFU_logo.png" /></p>
</body>
</html>
index.html:
CMPT 165 D1 (Fall 2015)
Absolute vs. Relative URL SFU_logo.png + index.html not in same folder
Q: what is the relative URL for the SFU_logo.png file?
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Title</title></head>
<body>
<h1>Heading</h1>
<p>
<img src="http://cmpt165.csil.sfu.ca/
~lisat/SFU_logo.png" />
</p>
<p><img src="../SFU_logo.png" /></p>
</body>
</html>
index.html:
Answer: use “..” (“parent” directory)
/home/lisat/public_html/SFU_logo.png
/home/lisat/public_html/demos/index.html
“parent” directory
CMPT 165 D1 (Fall 2015)
Absolute vs. Relative URL SFU_logo.png + index.html not in same folder
Q: what is the relative URL for the SFU_logo.png file?
28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Title</title></head>
<body>
<h1>Heading</h1>
<p>
<img src="http://cmpt165.csil.sfu.ca/
~lisat/SFU_logo.png" />
</p>
<p><img src="../../SFU_logo.png" /></p>
</body>
</html>
index.html:
public_html/SFU_logo.png
public_html/d1/d2/index.html
“grandparent” directory?
CMPT 165 D1 (Fall 2015)
/home/lisat/public_html/SFU_logo.png
/home/lisat/public_html/d1/d2/index.html
Absolute vs. Relative URL SFU_logo.png now moved to another subfolder test
Q: what is the relative URL for the SFU_logo.png file?
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Title</title></head>
<body>
<h1>Heading</h1>
<p>
<img src="http://cmpt165.csil.sfu.ca/
~lisat/test/SFU_logo.png" />
</p>
<p><img src="../../test/SFU_logo.png"/></p>
</body>
</html>
index.html:
public_html/test/SFU_logo.png
public_html/d1/d2/index.html
“grandparent” directory?
CMPT 165 D1 (Fall 2015)
/home/lisat/public_html/test/SFU_logo.png
/home/lisat/public_html/d1/d2/index.html
Questions?
Putting all in context (from last Tues.) Keywords:
• URL: a resource, e.g. a file: study-guide.pdf, E1.html
• Upload
• Local vs. remote
Steps:
1. You do coursework on your local computer, e.g.
C:\user\165\E1.html
2. When done, you upload files to a remote server that accepts request for resource
– You store these files in a file location on our cmpt165 (remote) server, e.g.
cmpt165.csil.sfu.ca\home\lisat\public_html\E1.html
– Others on Internet may request to view E1.html using this URL:
http:\\cmpt165.csil.sfu.ca\~lisat\E1.html
– Server cmpt165 is configured to look at the location “\home\lisat\public_html”
3. Users request the URL of your work from their browser (e.g. Firefox, etc.)
CMPT 165 D1 (Fall 2015)
Questions?
CMPT 165 Unit 3 – CSS – Colour
Sept. 24th, 2015
CSS: background
• Levels (version number):
– Level 1: released in Dec 1996
– Level 2: released in May 1999
– Level 2.1: released in June 2011
– Level 3 is being developed
– Level 4 is planned for the future
34 CMPT 165 D1 (Fall 2015)
CSS Level 1
Style support for:
• Color of element text, backgrounds, etc.
• Alignment of elements (text, images, etc.)
• Text formatting: e.g. spacing of words, letters, lines
• Font properties: typeface and emphasis
• Boxing: margin, border, padding, and positioning
• Unique identification: explained later
• Generic classification: explained later
35 CMPT 165 D1 (Fall 2015)
Colors
• White
• Silver
• Gray
• Black
• Red
• Maroon
• Yellow
• Olive
• Orange
• Lime
• Green
• Aqua
• Teal
• Blue
• Navy
• Fuchsia
• Purple
36
17 standard color presets in CSS 1
CMPT 165 D1 (Fall 2015)
RGB model • “primary colors”: Red + Green + Blue
• “Additive” model: i.e. Red + Green = Yellow
Red + Blue = Purple
RGB model/coding:
• A system for specifying colors
• A numerical value reflecting intensity (“strength”) of a color channel: e.g. – 5 is brighter than 0
– 8 is brighter than 2
• 3 channels 3 sets of values, e.g. Bright red given by “900”
37
http://en.wikipedia.org/ wiki/File:AdditiveColor.svg
CMPT 165 D1 (Fall 2015)
RGB model
Examples:
• Bright green?
• Dark green?
• Bright blue?
• Dark red?
• Dark blue?
• Purple?
• Black?
• Gray?
38
Possible RGB encoding:
0 9 0
0 5 0
0 0 9
5 0 0
0 0 5
5 0 5
0 0 0
5 5 5
Red Green Blue
CMPT 165 D1 (Fall 2015)
Color specification Decimal system (base=10):
0 1 2 3 4 5 6 7 8 9
Darkest Brightest
This is not used in CSS! CSS uses hex system…
Hexadecimal system (base=16):
0 1 2 3 4 5 6 7 8 9 A B C D E F
Darkest Brightest
Example:
Brightest red? RGB = X X X?
= F 0 0
39
CMPT 165 D1 (Fall 2015)
RGB model
Examples:
• Bright green?
• Dark green?
• Bright blue?
• Dark red?
• Dark blue?
• Purple?
• Black?
• Gray?
40
0 9 0
0 5 0
0 0 9
5 0 0
0 0 5
5 0 5
0 0 0
5 5 5
0 F 0
0 8 0
0 0 F
8 0 0
0 0 8
8 0 8
0 0 0
8 8 8
Decimal Hexadecimal
0 1 2 3 4 5 6 7 8 9 A B C D E F
Red Green Blue
CMPT 165 D1 (Fall 2015)
0 1 2 3 4 5 6 7 8 9
Always start with hash key (#),
e.g.
p {
background-color: #0F0;
color: #AF0;
}
hr {
border-color: #0a0;
color: black;
}
Colour specification in CSS
41 CMPT 165 D1 (Fall 2015)
We’ll look more on colour specification next class…
Today’s Highlights
• CSS: motivation and practicalities
• So far, things we learned related to CSS:
– RGB color model
– Hexadecimal color coding
– 3 ways to colour specification in both CSS+Markup
43 CMPT 165 D1 (Fall 2015)
Tips for preparing the exams
• Exercise on your own: summarize key concepts seen so far in Unit 1 + Unit 2
• For all coursework: start by writing the code in paper + pen!
CMPT 165 D1 (Fall 2015) 44
Top Related