CMPT 165
Introduction to the Internet
and the World Wide Web
Unit3: Stylesheets
Topics
- Styles
- CSS Basics
- CSS Properties
- CSS Selectors
- Colors in CSS
- Styling Pages with CSS
- Browser Compatibility
- Separating Content and Appearance
- CSS Fonts [optional content]
- Interactive Color Mixer [optional content]
CSS Selectors
Example HTML Code
Class Selectors
CSS Code
ul {
list-style-type: disc;
}
ul.problems {
font-size: smaller;
}
.optional {
color: gray;
font-style: italic;
}
ID Selectors
CSS Code
p#copyright {
font-weight: bold;
color: red;
}
Contextual Selectors
what would you do if you want to modify
emphasized text that is in headings but not elsewhere,
or only list items in ordered lists but not unordered ?
the contextual selector (space) will select an element that's anywhere inside the element
h2 a {
color: black;
}
ol li {
margin-top: 1em;
}
The selector "ol li" will select any <li> that is inside an <ol> element but not other list items
Pseudo-class Selectors
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:active {
color: red;
}
Child selectors
ol>li {
list-style-type: decimal;
}
ul>li {
list-style-type: circle;
}
this CSS will change the appearance of list items that are immediately within <ol>s and <ul>s
Combining Selectors
ul.ingredients li {
color: green;
}
ul.ingredients li.optional {
color: blue;
}
a:link.external {
color: yellow;
}
Colors in CSS
by far we have seen "color", "background-color", and "border-color" which are using different color values, lets learn more about these values.
Color Schemes
- CMYK color model (subtractive colour model)
- RGB colour model (additive colour model)
CMYK Color Model
the physical paint (used to draw paintings) removes parts of the reflected light
(usually the original color of light is white!)
from the surface of the painting canvas,
main colors:
- Cyan (Blue)
- Magenta (red)
- Yellow
- Black
RGB Color Model
computer screens do not reflect the light, they produce it!
they start from black, and add colors to it to make the desired color,
main colors:
- Red
- Green
- Blue
Working with RGB
- we will use the three-character method of specifying a CSS color
-
the amount of each primary colour is specified with a character on this scale:
- 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
- the 0 end of the scale is little of the color (dark/off)
- the f end is a lot of the colour (bright/on)
- the three primary colors are specified in the order red, green, blue, prefixed with a
# - example: #F70
* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/colour1.svg
* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/colour2.svg
* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/colour3.svg
Let's guess the colors!
| Code | Colour | Rationale |
|---|---|---|
#000 | black | as dark as possible |
#fff | white | as bright as possible |
#f00 | red | only red light |
#0f0 | green | only green light |
#00f | blue | only blue light |
#060 | dark green | a little green, no red or blue |
#99f | light blue | more blue than the others, closer to white |
try your guess here: Interactive Color Mixer
Other Ways to Specify Colour
* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/colour6.svg