Course Topics by Week | |
---|---|
1. Intro to HTML 5 | 6. Page Layout with CSS |
2. More HTML 5 | 7. HTML Tables |
3. Developing a Web Site | 8. HTML Forms |
4. Styling with CSS | 9. Multimedia |
5. Midterm Quiz | 10. Review and Term Project |
11. Final Quiz |
Review due dates on Moodle.
Answer questions about this week's lab assignment.
By name
color: blue;
There are 140 standard color names that are understood by all the browsers. Here's a list of color names on W3Schools
By numeric color code The codes are based on the RGB color system. R is for red, G is for green, B is for blue. There are two ways to represent RGB colors:
Decimal
color: rgb(0, 0, 255)
Hexadecimal
color: #0000FF;
A total of 16,777,216 different colors can be represented (256 x 256 x 256, or 224).
Special colors
Opacity Higher numbers make the color more opaque.
Decimal
color: rgba(0, 0, 255, 0.5);
Hexadecimal
color: #0000FF7F;
W3Schools tutorial on CSS color properties
One of the ways to represent colors in CSS styles is using the base 16 number system, hexadecimal, or "hex". The hex number system uses the digits 0 through 9 (ten digits) along with the letters A through F (six digits) for a total of sixteen digits. This is how you count in hexadecimal:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F, etc.
Here are examples of hex values and their decimal equivalents:
Math is Fun: Hexadecimal Number Tutorial
text-align
Sets horizontal alignment of text.
text-indent
Sets the indentation of the first line in a block of text. For example, indenting the first line of a paragraph.
Units can be:
example: text-indent: 5em;
letter-spacing
Sets the spacing between characters of text.
letter-spacing: normal;
letter-spacing: 5px;
word-spacing
line-height
font-style
font-variant
font-weight
lighter, normal (default), bold, bolder
A number from 100 to 900
font-size
font-family
Can either be specific font families or a generic family names.
generic family name examples: serif, sans-serif, monospace, etc.
Font properties can be set individually or all at once
Example of setting each property separately:
xxxxxxxxxx
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: large;
font-family: arial, sans-serif;
}
Example of setting multiple properties at once:
xxxxxxxxxx
p {
font: italic small-caps bold large arial, sans-serif;
}
absolute length units
relative length units
Web fonts allow developers to use fonts that may not be installed on end user's computers.
@font-face
rule.
list-style-type
list-style-image
list-style-position
Use these to define special appearance or behavior for HTML elements.
The syntax of the selector is similar to that of a class selector.
a:visited
Sets the color of links that have been clicked on.
Example:
xxxxxxxxxx
a:visited {
color: green;
}
a:hover
Sets the color links change to when a user hovers over them in the browser.
Example:
xxxxxxxxxx
a:hover {
color: purple;
}
Read about more about pseudo-classes on W3 Schools.
Web Authoring Lecture Notes by Brian Bird are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.