CSS Assignment 3 - Fonts and Colours
The Assignment ....
This assignment will be an exercise in using what you've learned from the reading assignment.
Create a web page that includes styles (inline, embedded style sheet, or external style sheet -- your choice) using the following
types of rules:
- font-family
- font-size
- font-style
- font-weight
- font-variant
- text-transform
- text-decoration
- The font shorthand
- word-spacing
- letter-spacing
- line-height
- text-align
- vertical-align
- text-indent
- color
- The background shorthand (note that you don't have to use every background attribute if you don't wish to)
A page that incorporates all of the above will probably be sorta ugly. That's okay -- this is not designed to show how good you
are at mixing and matching these elements to make an attractive design, but rather to learn by doing and master the material.
If you can't see something in your particular browser or you can't get something to work, don't spend too much time on it --
give it a try, post the URL here, and ask a question, but don't knock yourself out over it. :)
The Results ....
Playing with fonts
font-family
This text is in the SERIF generic font.
This text is in the SANS-SERIF generic font.
This text is in the FANTASY generic font.
This text is in the CURSIVE generic font.
This text is in the MONOSPACE generic font.
font-size
points
This text is 6 points high.
This text is 9 points high.
This text is 12 points high.
This text is 15 points high.
This text is 18 points high.
This text is 21 points high.
This text is 24 points high.
This text is 30 points high.
This text is 48 points high.
absolute keywords
This text is "xx-small".
This text is "x-small".
This text is "small".
This text is "medium".
This text is "large".
This text is "x-large".
This text is "xx-large".
relative keywords
This text is "smaller".
This text is "normal".
This text is "larger".
length units
This text is "0.5em".
This text is "1.5em".
This text is "2em".
This text is "2.5em".
This text is "3em".
This text is "0.5ex".
This text is "1.5ex".
This text is "2ex".
This text is "2.5ex".
This text is "3ex".
percentage units
This text is "50%".
This text is "75%".
This text is "150%".
This text is "200%".
This text is "250%".
This text is "300%".
font-style
This text is featured today in "normal" style.
This text is featured today in "italic" style.
This text is featured today in "oblique" style.
font-weight
absolute keywords
This text is of "lighter" weight.
This text is of "normal" weight.
This text is of "bold" weight.
This text is of "bolder" weight.
numerical weight values
This text is of weight 100.
This text is of weight 200.
This text is of weight 300.
This text is of weight 400.
This text is of weight 500.
This text is of weight 600.
This text is of weight 700.
This text is of weight 800.
This text is of weight 900.
font-variant
This text printed as "small caps"
This text printed as "normal"
text-transform
This text printed with the transform of "none".
This text printed with the transform of "capitalize".
This text printed with the transform of "uppercase".
This text printed with the transform of "lowercase".
text-decoration
This text is not decorated,
this is underlined,
this is overlined,
this is line-through,
this is blinking.
Alignment and Spacing
word-spacing Not in NN or IE, try Opera 3.51
This text is spaced "normal".
This text is spaced "0.25em".
This text is spaced "0.5em".
This text is spaced "0.75em".
This text is spaced "1.25em".
This text is spaced "1.5em".
This text is spaced "1.75em".
This text is spaced "2em".
letter-spacing Not in NN or IE, try Opera 3.51
This text is letter spaced "normal".
This text is letter spaced "0.25em".
This text is letter spaced "0.5em".
This text is letter spaced "0.75em".
This text is letter spaced "1.25em".
This text is letter spaced "1.5em".
This text is letter spaced "1.75em".
This text is letter spaced "2em".
line-height
This text is at the default line height. In order to see this there is enough text in this paragraph to ensure that it wraps in the browser window. You should then see a difference in the inter-line spacing of this paragraph, when compared to those that follow, which apart from the first sentence contain the same text.
This text is at line height "0.5". In order to see this there is enough text in this paragraph to ensure that it wraps in the browser window. You should then see a difference in the inter-line spacing of this paragraph, when compared to those that follow, which apart from the first sentence contain the same text.
This text is at line height "1.5". In order to see this there is enough text in this paragraph to ensure that it wraps in the browser window. You should then see a difference in the inter-line spacing of this paragraph, when compared to those that follow, which apart from the first sentence contain the same text.
This text is at line height "2.0" (double spaced). In order to see this there is enough text in this paragraph to ensure that it wraps in the browser window. You should then see a difference in the inter-line spacing of this paragraph, when compared to those that follow, which apart from the first sentence contain the same text.
text-align
The text in this paragraph is left aligned. This is also the default, as you can see in the paragraphs above. The text has an aligned left margin, with a ragged right margin. As this is the default it is the "style" that is most often seen in web pages as it is seldom over-ridden.
The text in this paragraph is right aligned. The text has an aligned right margin, with a ragged left margin. To see the effect you may need to re-size your web-browser window because, depending on the text, it could look to be fully justified.
The text in this paragraph is centred. The text has both a ragged left and a ragged right margin. This effect can also be generated using the HTML tag <CENTER;> To see the effect you may need to re-size your web-browser window.
The text in this paragraph is fully justified. This means that the when it is necessary to start a new line the text will be flowed in the line to have an aligned left and right hand margin. For remaining text (i.e. text that does not fill a complete line) it will appear as if it were left justified.
vertical-align Not in NN or IE, try Opera 3.51
To test vertical alignment everything will be in this one paragraph.
This text is aligned with the baseline,
while this text is sub-script,
while this text is super-script,
while this text is aligned with the "top",
while this text is aligned with the "text top",
while this text is aligned with the "middle",
while this text is aligned with the "bottom",
while this text is aligned with the "text bottom".
Some of the vertical alignment effects are for images. This section includes the same image to view the text alignment.
This text is
aligned with the baseline,
while this text is
sub-script,
while this text is
super-script,
while this text is
aligned with the "top",
while this text is
aligned with the "text top",
while this text is
aligned with the "middle",
while this text is
aligned with the "bottom",
while this text is
aligned with the "text bottom".
text-indent
The first line of this paragraph is indented by 1 imperial inch, which is equal to 254 millimetres. The rest of the paragraph is left justified below the normal start point.
The first line of this paragraph is indented by -5%. As the document has a left margin of 10% the first line will therefore go back into the margin area. This text will be the left most element on the whole page.
Colours and Backgrounds
Colours can be specified using several methods in CSS. Colours can be named, for example
aqua,
black,
blue,
fuchsia,
gray,
green,
lime,
maroon,
navy,
olive,
purple,
red,
silver,
teal,
white,
and yellow.
These colours should all look the same irrespective of browser being used.
Colours can also be specified using the hexadecimal numbering system. This works by specifying
the colour as the amount of red, green and blue that the colour contains, in pairs of hexadecimal
number (00 to ff). Hex numbers consist of 0 to 9, then "a" to "f". So, the full hex colour
will contain six numbers, for example ff0000 (which is red),
00ff00 (which is green), and
0000ff (which is blue). Any combination, or number between can be used giving you full
power of the colours used in your web page.
However, most of the colour combinations may not display
as expected on all browsers, or all displays. To reduce this risk, you should use "safe numbers"
which consist of pairs of numbers incrementing in 3's from 00. i.e. 00, 33, 66, 99, cc and ff.
Another way to specify the colour is to use the RGB values (Red Green and Blue). This method is
similar to the hexadecimal numbering system in that the hex values correspond to the RGB values.
For example Hex 00 is RGB 0, Hex ff is RGB 255 etc. Maybe it is safer to use the Hex values and keep
to the safe colour list.
Colour backgrounds
This text features on a red background, while this has a
green background.
This completes this assignment. Obviously, the style elements above can be used together to create
both interesting, and hideous web pages. My objective was to use it one, and to see how they
were displayed in Internet Explorer 4.0, Netscape Navigator 4.5 and Opera 3.51.
Back to my CSS Course Index.
