CSS Units of Measurement
Basics of Web Units
- J06a - (0:59)
- In CSS all measurement units must be specified, including pixels.
- In html, attribute values that use numbers and not percentages ( % ) are interpreted by the browser to be pixel values.
- In html there is no need to specify the unit pixels because that is the only size unit there is, other than percent which requires the % symbol.
- In CSS there must be no space between the value and the unit type. Examples:
- 1.75em
- 5px
- 80%
- In CSS all measurement units must be specified, including pixels.
Web Units of Measurement
Introduction to web measurement units
- J06b - (2:57)
- pixels - used for providing specific sizes.
- % - used to keep proportions of a layout constant.
- ems - used for specifying font sizes and keeping container widths relative to font sizes.
- Using the em measurement is very helpful because its size is relative to the font that the browser or parent is set to.
- ems can be used to ensure that the same amount of specific characters will go on one line regardless of the browser magnification or font-size settings.
- More about the em:
- The meaning of em has changed over time.
- The original meaning was that one em equaled the width of an upper case M.
- But not all alphabets have an uppercase letter M - for example Arabic and Armenian.
- However, all fonts do have a height.
- Because of this, an em now means the height of the tallest character of the current font.
- So, an em is said to equal to the current font size, which means the size set by the parent element, even if it's inherited.
- 1.5em means 1.5 times the size of the current font-size.
- Example:
If the font-size of the parent is 10px, then 1.5em is 15px
- Example:
Relative Sizes
Sizes relative to the parent's font size
- J06c - (3:40)
- % - Percentage of the size of the container
- This text is set to 100%
- em - The height of the font used by the container element:
- This text is set to 1em
- Using em's is very similar to using percentages.
- Using em’s for font sizes provides the best results across browsers and platforms.
- ex - Not well supported, it is supposed to be the height of the letter x
- This text is set to 2.2ex
- The sizes of smaller and larger may vary in size from one browser to the next; their size is not specifically defined by the css. Here they are:
- smaller = approximately .85em
- larger= approximately 1.2em to 1.5em
- Warning!
- If you define a tag or class selector size as smaller, the size of all the same selectors nested within it will get smaller and smaller! For example, if the ul tag is used as a selector and you set its font-size to smaller, any nested ul tags will make the font smaller and smaller.
- In such cases, do the following instead in order to maintain a consistent size for smaller:
ul {font-size:smaller;}ul ul {font-size:1em;}- This will make the text in nested ul tags the same size as the parent ul tag.
- On a side note, there are special characters named the following. Note that these are not related to css:
- em-dash
- —
- code used:
—
- en-dash
- –
- code used:
–
- em-dash
- % - Percentage of the size of the container
Sizes relative to the page's default font size
- J06d - (0:54)
- The following sizes can vary from one browser to the next.
- xx-small
- x-small
- small
- medium - this is the same as the current font size, about 16px.
- large
- x-large
- xx-large
The following shows the result of a div tag that includes the following declarations
- J06e - (1:42)
- font-size:1em;
- line-height:1em;
- width:10em;
- height:10em;
- Note that the height is 10 times the height of the character
1.) This is an M.
2.) This is an M.
3.) This is an M.
4.) This is an M.
5.) This is an M.
6.) This is an M.
7.) This is an M.
8.) This is an M.
9.) This is an M.
MMMMMMMMMM
2.) This is an M.
3.) This is an M.
4.) This is an M.
5.) This is an M.
6.) This is an M.
7.) This is an M.
8.) This is an M.
9.) This is an M.
MMMMMMMMMM
A pixel is relative to the computer's resolution setting
- J06f - (1:05)
- px - pixel
- pixel is an abbreviation of picture element
- It is the size that a pixel is displayed by a computer monitor or handheld device.
- It is based on the resolution of the screen that is displaying it.
- If a computer is set to display 1280x1024 pixels, then their will be 1280 pixels shown horizontally and 1024 vertically.
- Standard screen resolutions from 2011 are shown here.
- px - pixel
Print sizes
These units are used for hard copy print outs
- J06g - (1:27)
Note: The video refers to 12 pica per inch, when in fact there are 6 pica per inch.- mm - millimeter
- cm - centimeter
- in - inch
- pc - pica: 1pc = 12pt
- pt - point: 72pt = 6pc = 1 inch
Assignment
- J06h - (1:35)
- Create a new html5 file and name it yourlastname_J06.html
- Make the following into a bulleted list:
broccoli
cabbage
carrots
cauliflower
celery - Make classes using the same names as the list items.
- For example
.asparagus
- For example
- For each class, make declarations using the font-size property using the values listed in the next step.
- For example, for the following:
- asparagus 125%
- Make the following rule:
- .asparagus {font-size: 125%;}
- Then apply the class to the corresponding list item tag. For example:
- <li class=asparagus>asparagus</li>
- For example, for the following:
- Here are the names to use for the classes and the values to assign to them:
- Be sure to use the correct unit names.
- broccoli - 2 ems
- cabbage - small
- carrots - extra, extra small
- cauliflower - 18 pixels
- celery - extra large