CIS195 Web Authoring 1: HTML

More CSS: Colors, Text, Fonts and Pseudo-classes

Topics by Week for the Eight-Week Term
1. Intro to HTML	5. Midterm, Layout with CSS
2. More HTML, file paths	6. HTML Tables
3. Site structure and navigation	7. HTML Forms
4. Formatting with CSS	8. Multimedia, Final

Topics by Week for the Ten-Week Term
1. Intro to HTML	6. Layout with CSS
2. More HTML, file paths	7. CSS Flexbox and Grid
3. Site structure and navigation	8. HTML Forms
4. Formatting with CSS	9. Multimedia
5. Midterm, Project Propposal	10. Tables, Project Completion
	11. Final

IntroductionDefining ColorsHexadecimal numbersText and font stylesText PropertiesFont PropertiesWeb FontsList Style PropertiesPseudo-ClassesExampleReferences

Introduction

Review due dates on Moodle.
Answer questions about this week's lab assignment.

Defining Colors

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
  - The range for each color is 0 to 255
  - Example: 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 2²⁴).
Special colors
- White consists of all colors
- Black is the absence of color
Opacity Higher numbers make the color more opaque.
- Decimal
  - The range it 0 .0 to 1.0
  - Example:color: rgba(0, 0, 255, 0.5);
- Hexadecimal
  - The range is 0 to FF
  - Example:color: #0000FF7F;

W3Schools tutorial on CSS color properties

Hexadecimal numbers

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:

0 hex is 0 decimal
A hex is 10 decimal
F hex is 15 decimal
10 hex is 16 decimal
1F hex is 31 decimal
20 hex is 32 decimal
FF hex is 255 decimal
100 hex is 256 decimal

Math is Fun: Hexadecimal Number Tutorial

Text and font styles

Text Properties

text-align
Sets horizontal alignment of text.
- left—aligns text to the left.
- right—aligns text to the right.
- center—centers the text.
- justify—Inserts spaces between words so that the line fills the whole width.
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:
  - % (percent)
  - Numeric length
- example: text-indent: 5em;
letter-spacing
Sets the spacing between characters of text.
- normal—sets spacing to the default
  Example: letter-spacing: normal;
- Numeric length, either absolute or relative. Negative numbers are allowed.
  Example: letter-spacing: 5px;
word-spacing
line-height

Font Properties

font-style
- normal
- italic
- oblique
font-variant
- normal
- small-caps
font-weight
- lighter, normal (default), bold, bolder
- A number from 100 to 900
  - 400 = normal
  - 700 = bold
font-size
- xx-small, x-small, small, medium (default), large, x-large, xx-large
- larger, smaller
- An absolute size using length units
font-family
Can either be specific font families or a generic family names.
- specific family name examples: times, courier, arial, etc.
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;
  }

Numeric lengths in CSS

absolute length units
- cm—centimeters
- mm—millimeters
- in—inches
- px—pixels
- pt—points
- pc—picas
relative length units
- em—the size of an 'm' in the current font
- ex—the height of an 'x' in the current font
- ch—the width of a '0' (zero) in the current font
- rem—font-size of the root element (browser's font size)
- vw—1% of the width of the viewport (browser window size)
- vh—1% of the height of the viewport
- vmin—1% of the viewport height or width, whichever is smaller
- vmax—1% of the viewport height or width, whichever is larger
- %—percntage of the parent element's width

Web Fonts

Web fonts allow developers to use fonts that may not be installed on end user's computers.

Save the font file in your web site's folder, and it will be automatically loaded to by the user's browser when needed.
Define any web fonts your web site uses within the CSS @font-face rule.

W3 Schools tutorial: CSS Web Fonts

List Style Properties

list-style-type
- List style types
list-style-image
- list-style-image property
list-style-position
- list-style-position property

Pseudo-Classes

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.