- CSS specifies sizes in several places. These need units. CSS has several
units. The book discusses these on Page 431.
- Pixel, px. The size of this depends on the monitor, and makes
sense on a screen.
- Point, pt. The point unit is often used to express the
size of a font. It is 1/72 of an inch.
- Picas, pc. 12 points.
- Inches, in, Centimeters, cm, Millimeters mm.
Useful on paper.
- Ems, em. This is equal to the width of the letter m
in the current font. It's different from the others because it
changes when the font size changes.
- Exs, ex. This is equal to the height of the letter x,
which changes like em.
- Percent, %. When applied to a font, it is relative to
the normal font size. When applied to anything else, it is relative
to the container size.
- Display units, vh and vw each represent 1% of the
viewport (browser window) height and width, respectively.
[ Dimensions Source ]
- CSS Colors. CSS has many ways of specifying colors.
- CSS defines several hundred colors
by
name. Welcome to the Internet paint store: darkred,
gold, midnightblue, sandybrown, etc.
- Colors on a computer screen:
- Represented by three numbers, indicating
the amount of each primary color: red, green and blue.
- Conventionally, each amount is given by an unsigned byte.
That means a range 0–255.
- In hexadecimal (base 16), that is 00–FF.
- Can specify a color by six hexadecimal digits run together, giving
the amount for red, green and blue.
#000000, #A34491, #1256AB, #55BB33,
#BBBB55, #555555
- Can alternatively specify three digits, which are doubled.
#888, #1F3, #2AF, #902
- Can specify the three values in decimal with the rgb
notation. rgb(10,145,170), rgb(0,0,255) or
rgb(150,250,0)
- Can specify the three values using percentages.
rgb(4%,57%,67%), rgb(0%,0%,100%) or
rgb(59%,98%,0%)
- CSS Fonts.
- Fonts have four basic paramaters: family, style, size and weight.
- Families have two flavors
- Actual fonts available on the system, such as Arial or
Helvetica. If the name contains spaces, you must
use quotes, like "Times New Roman"
- Generic fonts defined for all systems:
serif, sans-serif, cursive, fantasy and
monospace.
- Specify as a comma-separated list. Uses the first one available.
- Always end with a generic, since they are always available.
- font-family: Verdana, Arial, Helvetica, sans-serif;
- Styles are normal, italic or oblique
font-style: italic;
- Sizes
- Can be given as a dimension, usually points.
- Can be given as a percentage of the default size.
- Several absolute names,
small, medium, large, x-small, xx-small, x-large and xx-large.
- Relative sizes smaller and larger.
- The weight is the boldness of the font.
- Usually just bold or normal.
- Also takes percentages of the default.
- Can specify all at once, but usually separately.
- Text Properties
- text-decoration: underline, overline,
line-through.
- alignment: left, right, center and
justify.
- Several others to control spacing and indents.
[ Really Ugly Source ]
- Google Fonts
- HTML 5 allows fonts to be loaded dynamically by a web page.
- Google provides
a large collection of these for free.
- Google has
instructions
for using them.
- Header: <link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=family">
- You can request multiple families using & to
combine them.
- Use font or font-family to set the font in the
family.
- If a font name has spaces, use a + in the link
tag, and put the name in quotes within CSS.
- Using one of these in your we page means everytime it loads, a
web request is sent to a Google server, which may have privacy
implications. Google has this to say about that.
[ Google Fonts Source ]