Transcript CS403: Online Network Exploration

CS403: Online Network Exploration
Cascading Style Sheets
Part 2
Fall, 2007
Modified by Linda Kenney
Oct. 24, 2007
7/17/2015
CS403 Introduction
1
CSS properties
You should have a good understanding of the
basic syntax of CSS and know how to
associate CSS with XHTML in a variety of
ways.
The declarations that appear within style
rules and inline styles consist of properties
and their associated values.
To use CSS effectively, we need to know what
properties are available, which values they
can accept and to which XHTML elements
they may be applied.
7/17/2015
CS403 Cascading Style Sheets
2
Color names
Many of our examples so far have used the color
property with a color name as its value.
However, this is not how Web authors typically use
the color property.

There are only sixteen color names that are mentioned in
the CSS standard.
 These color names are white, black, gray, silver, red, blue,
green, fuchsia, purple, maroon, aqua, navy, teal, lime,
olive and yellow.
 While browsers may recognize other color names of their own
choosing, these sixteen are the only ones you can reasonably
expect all browsers to recognize.
 And since the standard doesn’t specifically define what colors
these names should apply to, they won’t necessarily result in
the same colors in every browser.
7/17/2015
CS403 Cascading Style Sheets
3
Web authors seldom use these color names
and instead use other means of specifying
colors in CSS.
A more efficient (and more common) way of
specifying RGB colors is using a single
number in the hexadecimal number
system.
7/17/2015
CS403 Cascading Style Sheets
4
The hexadecimal number system
The hexadecimal number system is a base 16
system with 16 digits: 0, 1, 2, 3, 4, 5, 6, 7,
8, 9, A, B, C, D, E and F

The beauty of the hexadecimal system is that the
largest six-digit value in this system is FFFFFF,
which represents 16,777,216.
 What is the smallest?

7/17/2015
This makes a six-digit hex value an ideal, if
somewhat odd-looking, way to specify a color.
CS403 Cascading Style Sheets
5
Colors using hexadecimal notation
When using a six-digit hex value to specify a
color in CSS, it must begin with a number
sign (#).
h1 {color: #56F3B4;}

This gives the browser a way to easily distinguish
between color names and color numbers, since a
six-digit hex value may consist of six letters.
h1 {color: #BADCAB;}


Forgetting the number sign may cause some
browsers to ignore the color property altogether.
The letters acting as digits in a hex value may be
either uppercase or lowercase.
h1 {color: #B48;}
h1 {color: #BB4488;}
7/17/2015
CS403 Cascading Style Sheets
6
The Web Color Palette
A collection of 216 colors that display the same on both
the Mac and PC platforms.
See the Color Chart at
http://webdevfoundations.net/color/index.htm
7/17/2015
CS403 Cascading Style Sheets
7
Color names
Some colors can be referred to by their
names.
A chart for these is shown below.
http://webdevfoundations.net/color/index.htm
However, be aware that the W3C does not
recommend the use of color names (use
hexadecimal values instead).
7/17/2015
CS403 Cascading Style Sheets
8
Accessibility and color
Not all users can distinguish all colors.
See:
http://www.vischeck.com/vischeck/vischeckURL.php
It’s best to choose background colors with a high
amount of contrast.


7/17/2015
Avoid using the following colors next to each other – red,
green, brown, gray, purple.
White, black and shades of blue and yellow are easier to
differentiate.
CS403 Cascading Style Sheets
9
The background-color property
The background-color property is used to
set the background color of an element.
When setting an element’s backgroundcolor property, you should always set a
contrasting value for the color property as
well.
h1
{background-color: #000066; color: #FFFF66;}
body {background-color: #FFFF66; color: #000066;}
7/17/2015
CS403 Cascading Style Sheets
10
Fonts
A font, or typeface, is a description of what
characters should look like.

7/17/2015
Consider the following examples showing the
same text in a variety of different fonts
CS403 Cascading Style Sheets
11
Fonts (cont.)
Notice the different types of contrast these
fonts create.






7/17/2015
Some are subtle, others assertive
Some are heavy, others are light
Some are formal, others are informal
Some look like print, others look like handwriting
Some spread the text out, others condense it
Some are easy to read on the screen, others are
more difficult
CS403 Cascading Style Sheets
12
Fonts on the Web
Fonts present special challenges on the Web.



7/17/2015
Most importantly, a Web author must remember
that a browser only has access to the fonts
installed on the computer where it is running.
Different computers have different fonts installed.
Another issue is that most fonts were designed for
use on the printed page, not the computer screen.
As a result, care must be used to select fonts that
are not only likely to be available, but also likely to
be readable on the screen.
CS403 Cascading Style Sheets
13
Fonts on the Web (cont.)
If you ask the browser to use a font that it does not
have access to, it will be unable to comply with your
request.

It will still show the text, but in a font of its own choosing.

Therefore, when telling browsers what font to use, it’s
always best to give them a prioritized list of options.

That allows the browser to look for each font in the order
they’re specified and use the first one it finds.

If it exhausts the list without finding any of the requested
fonts, it uses a font of its own choosing.

7/17/2015
If the list ends with the name of generic font family, the
browser is free to look for any font it has available that falls
into that family if it can’t find any of the others specified.
CS403 Cascading Style Sheets
14
Generic font families
There are five generic font families recognized by CSS.

Fonts in the serif family have serifs at the ends of many of the strokes used to make
the letters.


Fonts in the sans-serif family do not have serifs


Since the results are very hard to predict, it is difficult to use this generic font family effectively.
Fonts in the monospace family have characters guaranteed to be all the same width

7/17/2015
These can range from formal to informal, but are useful when trying to convey a personal
touch.
Fonts in the fantasy family can be pretty much anything that doesn’t fit nicely in the
other families.


These tend to be somewhat less formal, but “cleaner,” fonts well suited to short text such as
headings and captions.
Fonts in the cursive family tend to look like handwriting.


These tend to be the more formal, conservative fonts best suited to large blocks of body text.
These are typically the least attractive fonts and are often used only when predictable
character widths are desired.
CS403 Cascading Style Sheets
15
The font-family property
The font-family property can be used to set the
font that the browser will use to present the text
within an element.
The value of the font-family property should be a
comma-separated list of font names.

Put the preferred fonts earlier in the list and less ideal fonts
later in the list.

It’s recommended that you end the list with the name of a
generic font family.

Font names that contains spaces should be quoted with
single or double quotes.
 Single quotes are useful in inline styles, since they must be
inside a quoted attribute value
7/17/2015
CS403 Cascading Style Sheets
16
The following examples demonstrate some
common font lists
body
{font-family: "times new roman", times, serif;}
h1{font-family: verdana, arial, helvetica, sans-serif;}
h2{font-family: arial, helvetica, sans-serif;}
p {font-family: georgia, "times new roman", times, serif;}
code {font-family: "courier new", courier, monaco,
monospace;}
.signature{font-family: "zapf chancery", cursive;}
7/17/2015
CS403 Cascading Style Sheets
17
The font-weight property
When text is made bold, typographers think
of that as having increased the weight of the
text.



To increase the weight of text with CSS, use the
font-weight property.
The most commonly used value for the fontweight property is bold.
Values of normal, bolder and lighter are also
acceptable.
em
.aside
.important
h4, h5, h6
7/17/2015
{font-weight: bold;}
{font-weight: lighter;}
{font-weight: bolder;}
{font-weight: normal;}
CS403 Cascading Style Sheets
18
The font-style property
The font-style property is used to select a
particular style of text.

It accepts one of three values.
 The most commonly used value is italic.
 The value oblique is also available, but it is not as
commonly used.



In some cases, oblique text and italic text will look the same..
In other cases, they will look different
Oblique fonts will typically appear simply as slanted versions of
the base font, while italic fonts are likely to be more stylized
versions of the base font.
 A value of normal is available to specify “regular” text.

7/17/2015
This is useful for over-riding inherited font-style properties or
ensuring that an element is not rendered in italic or oblique text
due to a browser’s default presentation.
CS403 Cascading Style Sheets
19
Font-style property examples
em {font-weight: bold; font-style:
normal;}
.slanted {font-style: oblique;}
.title{font-style: italic;}
h1, h2, h3 {font-weight: normal; fontstyle: italic;}
7/17/2015
CS403 Cascading Style Sheets
20
The font-variant property
The font-variant property can be used to
select variants of the specified font-family.

A value of small-caps instructs the browser to
search the specified font family for a small caps
variant.
 All letters in a small caps font look like uppercase.

A value of normal instructs the browser to choose
a font that is not a small caps variant.
 This value is useful for over-riding inherited values.
h1, h2, h3 {font-variant: small-caps;}
7/17/2015
CS403 Cascading Style Sheets
21
The font-size property (see p. 89)
The font-size property is used to specify the
size of the font used to present an element.

It can accept several types of value.
 It can accept a length value like em , the width of a
capital M of the current font.
 It can also accept one of seven absolute sizing keywords

They are xx-small, x-small, small, medium, large, x-large
and xx-large.
 It can also accept one of two relative sizing keywords.

They are larger and smaller. Both are relative to the font size of
the parent element
 Or it can accept a percentage value

7/17/2015
Percentages are relative to the font size of the parent element.
CS403 Cascading Style Sheets
22
font-size property examples
p {font-size: 12pt;}
.caption {font-size: 10px;}
#footer{font-size: 0.75em;}
h1
{font-size: 200%;}
h2
{font-size: x-large;}
h3
{font-size: larger;}
7/17/2015
CS403 Cascading Style Sheets
23
The line-height property
The line-height property is used to set the spacing
between the baselines of adjacent lines of text..


When used in conjunction with font size, this property
effectively controls line spacing
The line-height property can accept several types of
values.
 It can accept length values, like em
 It can accept percentage values
 It can accept a numerical value (with no unit or percent sign)


7/17/2015
Such a value is used as a multiplier applied to the font size of the current
element
For example, a value of 2 would produce double-spacing and a value of 1.5
would produce space-and-a-half spacing
CS403 Cascading Style Sheets
24
line-height property examples
p {line-height: 1.5;}
body {line-height: 1.2em;}
#footer {font-size: 9pt; line-height:
10pt;}
.fineprint {font-size: 8pt; line-height:
105%;}
7/17/2015
CS403 Cascading Style Sheets
25
The font property
Since it’s common to use several of these font
related properties together, there is a single
font shorthand property that lets you specify
several values at once.

7/17/2015
The font property can accept a value comprised
of a combination of legal values for the fontstyle, font-variant, font-weight, font-size,
line-height and/or font-family properties.
CS403 Cascading Style Sheets
26
The font property (cont.)

If both font-size and line-height properties are
used, they must be in that order and separated by
a slash.
p {font: bold small-caps italic 12pt/14pt arial, helvetica, sans-serif;}
 The example above is equivalent to the example below.
p {font-weight: bold; font-variant: small-caps; font-style: italic;
font-size: 12pt; line-height: 14pt;
font-family: arial, helvetica, sans-serif;}

If there are not explicit values for every font
related property provided, the font property sets
those values left unspecified to their defaults.
body {font: 75% arial, helvetica, sans-serif;}
 The example above is equivalent to the example below.
body {font-weight: normal; font-variant: normal; font-style: normal;
font-size: 75%; line-height: normal;
font-family: arial, helvetica, sans-serif;}
7/17/2015
CS403 Cascading Style Sheets
27
The text-indent property
The text-indent property is used to specify
how far to indent the first line of a block of
text.

It can accept length values or percentages.
 In this case, percentages are relative to the width of the
parent element.
 The default value is 0.
h2
h3
h4
p
blockquote
7/17/2015
{text-indent:
{text-indent:
{text-indent:
{text-indent:
{text-indent:
2.5%;}
5.0%;}
7.5%;}
3em;}
0.5in;}
CS403 Cascading Style Sheets
28
The text-align property
The text-align property is used to determine how text is
aligned within an element.

It can accept one of four values.
 A value of left aligns the text so that each line of text begins at the left
edge of the element.
 A value of right aligns the text so that each line of text ends at the
right edge of the element..
 A value of center aligns the text so that each line of text is centered
between the left and right edge of the element
 A value of justify aligns the text so that each line is precisely long
enough to begin at the left edge of the element and end at the right
edge.


7/17/2015
The effect of the text-align property also applies to items within
an element that are treated as text, such as images and tables.
From a design perspective it’s generally advisable to keep English
text aligned to the left or justified.
CS403 Cascading Style Sheets
29
text-align property examples
h1, h2, h3, h4 {text-align: left;}
.address{text-align: right;}
p {text-align: justify;}
#footer {text-align: center;}
7/17/2015
CS403 Cascading Style Sheets
30
The text-decoration property
The text-decoration property is used to apply
various types of decoration to text.

It takes one of five values.
 A value of line-through instructs the browser to draw a line
through the mid-line of the text.

This might be useful for indicating text that is being deleted during a
revision
 A value of overline instructs the browser to draw a line over
the top of the text.

This might be useful in certain mathematical and scientific formulas
 A value of underline instructs the browser to draw a line
underneath the text.

This is seldom useful and not recommended since users generally associate
underlined text with links
 A value of none is useful for over-riding inherited values and
browser defaults.

7/17/2015
Setting this value is often used when authors wish to remove the default
underlines beneath link labels
CS403 Cascading Style Sheets
31
text-decoration property examples
.delete {color: #FF0000; textdecoration: line-through;}
.length {text-decoration: overline;}
.badidea {color: #00F; text-decoration:
underline;}
.a:link, a:visited {text-decoration: none;}
7/17/2015
CS403 Cascading Style Sheets
32
The text-transform property
The text-transform property is used to
transform the case of text.

It takes one of four values.
 A value of uppercase instructs the browser to display all
characters of the text as uppercase.
 A value of lowercase instructs the browser to display all
characters of the text as lowercase.
 A value of capitalize instructs the browser to display
the first character of each word in the text as uppercase.
 A value of none is useful for overriding inherited values.
.upper
.lower
h1, h2, h3
.astyped
7/17/2015
{text-transform: uppercase;}
{text-transform: lowercase;}
{text-transform: capitalize;}
{text-transform: none;}
CS403 Cascading Style Sheets
33
Word and letter spacing
There are two properties available to increase the
spacing between words and between the letters
within words.

Use the word-spacing property to specify a length value
that will be added to the spaces between words.
.expanded {word-spacing: 0.25em;}

Use the letter-spacing property to specify a length value
that will be added to the spaces between letters.
 Typographers refer to the spacing between letters as kerning
.expanded {letter-spacing: 3pt;}

7/17/2015
Both may accept a value of normal to override inherited
values and revert an element to the use of normal spacing
CS403 Cascading Style Sheets
34
Controlling list item markers
List items are traditionally preceded by a
marker of some sort. CSS offers properties to
control these markers.

The list-style-image property is used to specify
an image that should be displayed as a list item
marker.


The list-style-type property is used to specify
more traditional list item markers.


7/17/2015
Its value must be either a URL in functional notation or the
keyword none
Its value may be one of the following nine keyword values: disc,
circle, square, decimal, upper-alpha, lower-alpha, upperroman, lower-roman and none.
If list-style-image is also specified with a value other than
none, the image will be used in place of the specified list-styletype, if it is available.
CS403 Cascading Style Sheets
35
Controlling list item markers (cont.)

The list-style-position property is used to specify how the
marker is displayed in relation to the list items.

Its value may be either inside or outside.



The default value is outside, which leaves the marker hanging out to the left of
the list item text
A value of inside causes the marker to move into the list, acting almost like an
indentation
The list-style property is a shorthand property that can
accept a space separated list consisting of up to one value
from each of the previously mentioned list-related
properties.
Each of these properties is applicable to any element
whose display property has a value of list-item and
they are all inherited
 They are therefore applicable to <li> elements, but are most
commonly applied to <ol> and <ul> elements and inherited
by the <li> elements they contain.
7/17/2015
CS403 Cascading Style Sheets
36
The background-image property
The background-image property allows
you to set a background image to be used for
an element.

It takes as its value either the URL of the image to
use or the word none (which is the default).
 URLs in CSS are specified using functional notation.
body {background-image:url(../images/texture.jpeg);}


7/17/2015
Note the lowercase url followed by the actual URL enclosed in
parentheses.
In external style sheets, use absolute URLs even for local
resources.
CS403 Cascading Style Sheets
37
The background-image property (cont.)
Choose images that are relatively homogeneous and
tile nicely for background images.
 A relatively homogeneous image will contain mostly similar
colors, making it easier to choose foreground colors that
remain uniformly visible against it.
 An image tiles nicely when it can be placed adjacent to a copy
of itself without any visible seam.
When setting a background image, always set
foreground and background colors as well.
 Set foreground colors that will contrast well against the
background image so text remains easy to see and read.
 Set a background color that approximates the effect of the
background image. The background image will be shown over
the background color whenever possible.
body {background-color: #FFFF66;
background-image: url(../images/texture.jpeg);
color: #000066;}
7/17/2015
CS403 Cascading Style Sheets
38
The background-repeat property
If you don’t specify otherwise, a browser will repeat a
background image in as many rows and columns as needed to
fill the background area of the element.


This process is commonly referred to a tiling, since it is similar to
covering a wall with ceramic tiles.
The background-repeat property lets you specify exactly how
the background image should be repeated.
 Using a value of repeat instructs the browser to use as many rows and
columns as it needs to fill the background area.
 Using a value of no-repeat instructs the browser to simply show the
background image once.
 Using a value of repeat-x instructs the browser to use as many copies
of the image as needed to span across the background area but only in
a single row.
 Using a value of repeat-y instructs the browser to use as many copies
of the images as needed to span down the background area but only in
a single column.

If no background image has been specified, this property has no
effect.
body {background-color: #FFFF66;
background-image: url(../images/texture.jpeg);
background-repeat: repeat-x;
color: #000066;}
7/17/2015
CS403 Cascading Style Sheets
39
The background-attachment property
Unless you specify otherwise, a background image
scrolls along with the page on which it is displayed.

But you can use the background-attachment property to
control whether the background image scrolls with the page
or remains in a fixed position.
 Use a value of scroll to instruct the browser to scroll the
background with the page.
 Use a value of fixed to instruct the browser to leave the
background in its original position and allow the page to scroll
“over” it.

If no background image has been specified, this property
has no effect.
body {background-color: #FFFF66;
background-image: url(../images/texture.jpeg);
background-repeat: repeat-x;
background-attachment: fixed;
color: #000066;}
7/17/2015
CS403 Cascading Style Sheets
40
The background-position property
By default, the first copy of a background image is
displayed with its upper left corner at the upper left
corner of the background area of the element to
which it’s applied.

The background-position property can be used to control
precisely where the first copy of the background image gets
displayed.
 Any tiling needed then proceeds from that initial copy towards
the right and/or bottom.
 This property can accept a variety of value types, but there are
typically two values separated by a space.





7/17/2015
The first value represents the horizontal position desired.
The second value represents the vertical position desired.
It’s fairly common for the values to be percentages.
Commonly used percentages have keywords associated with them.
And absolute length units are also acceptable .
CS403 Cascading Style Sheets
41
Background positioning by percentage
When using the background-position property, percentages are relative to
the background area which the image will be used to fill.

They are also relative to the dimensions of the background image itself

The example below positions the upper left corner of the initial background image in the upper
left corner of the background area
body {color: #000066; background-color: #FFFF66;
background-image: url(../images/watermark.jpeg);
background-repeat: no-repeat; background-attachment: fixed;
background-position: 0% 0%;}

This example positions the lower right corner of the initial background image in the lower right
corner of the background area
body {color: #000066; background-color: #FFFF66;
background-image: url(../images/watermark.jpeg);
background-repeat: no-repeat; background-attachment: fixed;
background-position: 100% 100%;}
 This example positions the center of the initial background image in the center of the
background area
body {color: #000066; background-color: #FFFF66;
background-image: url(../images/watermark.jpeg);
background-repeat: no-repeat; background-attachment: fixed;
background-position: 50% 50%;}
 And this last example positions the point 23% of the way across and 38% of the way down the
initial background image 23% of the way across and 38% of the way down the background
area
body {color: #000066; background-color: #FFFF66;
background-image: url(../images/watermark.jpeg);
background-repeat: no-repeat; background-attachment: fixed;
background-position: 23% 38%;}
7/17/2015
CS403 Cascading Style Sheets
42
Background positioning by keyword
It’s also possible to use keywords instead of
commonly used percentages as values of the
background-position property.



The keywords left, center and right are equivalent to
horizontal positions of 0%, 50% and 100%, respectively
The keywords top, center and bottom are equivalent to
vertical positions of 0%, 50% and 100%, respectively
The keywords may be used in any combination with one
another
 But keywords cannot be combined with percentages or length
units
body {color: #000066; background-color: #FFFF66;
background-image: url(../images/watermark.jpeg);
background-repeat: no-repeat; background-attachment: fixed;
background-position: left center;}
body {color: #000066; background-color: #FFFF66;
background-image: url(../images/watermark.jpeg);
background-repeat: no-repeat; background-attachment: fixed;
background-position: center top;}
7/17/2015
CS403 Cascading Style Sheets
43
The background property
Since it’s common to use several of these background related
properties together, there is a single background property that
lets you specify several values at once.


Such properties are often referred to as shorthand properties.
The background property can accept a value comprised of any
combination of legal values for the other background related
properties.
body {color: #000066;
background: #FFFF66 url(../images/watermark.jpeg) no-repeat fixed center center;}
 The example above is equivalent to the example below
body {color: #000066; background-color: #FFFF66;
background-image: url(../images/watermark.jpeg);
background-repeat: no-repeat; background-attachment: fixed;
background-position: center center;}
 If there are not explicit values for every background related property
provided, the background property sets those values left unspecified
to their defaults
body {color: #000066;
background: #FFFF66 url(../images/watermark.jpeg);}

The example above is equivalent to the example below
body {color: #000066; background-color: #FFFF66;
background-image: url(../images/watermark.jpeg);
background-repeat: repeat; background-attachment: scroll;
background-position: 0% 0%;}
7/17/2015
CS403 Cascading Style Sheets
44
Review questions
1. Distinguish between structure and presentation and explain how each is
addressed on the Web.
2. What does it mean when something is deprecated?
3. What is Cascading Style Sheets (CSS) and how does it related to XHTML?
4. What are the advantages of using one language for structural purposes and a
separate language for presentational purposes?
5. Compare and contrast a CSS file with an XHTML file.
6. What is a style rule, and what roles do the selector and the declaration play in
it?
7. Explain the basic syntax requirements of an external style sheet. (In other
words, what rules must you follow when writing one?)
8. Write a simple external style sheet and the code that you would place in your
XHTML page in order to use it.
9. What is the purpose of a selector in CSS and why are there several different
types?
10. Explain the different types of selector we have discussed in class and the
circumstances under which each type might be useful.
11. Explain the concept of a parent element and a child element. Why is this
important to inheritance in CSS?
12. Compare and contrast the class attribute and the id attribute.
13. Write a sample external style sheet and an associated XHTML file that use a
variety of element name selectors, class selectors and ID selectors.
14. Explain how CSS selectors can be combined and why you would do so. Give two
examples.
15. Explain pseudo-classes and pseudo-elements and why they are necessary. Give
some examples.
7/17/2015
CS403 Cascading Style Sheets
45
Review questions
16. What is a contextual selector and under what circumstances might it be useful?
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
Give some examples.
Explain the grouping of selectors in CSS. Why would this technique be used?
What is an internal style sheet? What are its advantages and disadvantages
when compared to an external style sheet?
All other things being equal, what determines whether rules in internal style
sheets take precedence of conflicting rules in external style sheets?
Convert one of your external style sheet examples into an internal style sheet
example.
What is an inline style? What are the advantages and disadvantages of using an
inline style versus an internal style sheet? What about versus an external style
sheet?
What must you do in the <head> of a document that uses inline styles? Why?
Add some examples of inline styles to a previous example.
Explain why conflicts between styles are common in CSS. How are they
resolved?
Discuss the use of the <div> and <span> elements in the context of CSS.
Why are color names insufficient for most Web designers? What is the most
commonly used alternative and why?
Summarize the RGB color model and explain at least three different ways of
utilizing it in CSS. Give specific examples of some colors.
Summarize the hexadecimal number system and explain why it is used to
specify colors in CSS.
Write a sample style sheet and the associated XHTML file that sets different
colors for various parts of the text and the links in each of their four states.
Specify a background color and a background image. Make the background
image fixed at the center of the screen and non-repeating.
7/17/2015
CS403 Cascading Style Sheets
46
Review questions
30. Explain the difference between relative length units and absolute length units
31.
32.
33.
34.
35.
36.
37.
38.
39.
in CSS. List and explain the three relative length units. What is each one
relative to? What are points and picas?
What is the purpose of a shorthand property in CSS? Give two examples.
What it typography and how is contrast involved in it? What role do fonts play
in typography?
Why does CSS provide several generic font families? How are they typically
used?
Write a sample style sheet and the associated XHTML file that sets different
fonts for various parts of the text. Utilize both specific font choices and generic
font families. Use different font weights, font styles, font variants, font sizes,
and line heights. Try using the individual properties first, then try to do the
same thing with the shorthand font property.
Write a sample style sheet and the associated XHTML file that sets various text
indentation levels and alignments (both horizontal and vertical) for the
elements on the page. Try adding some different text decorations and text
transformations. Adjust both the word and the letter spacing.
Explain the CSS box model, including the concepts of the content area, the
padding, the border and the margin. How might you use these features in your
work?
Write a sample style sheet and the associated XHTML file that utilizes the box
model to control the space around various components of the page.
Explain the float and clear properties and how you might use them. Write a
sample style sheet and the associated XHTML file that demonstrates both. Add
code that demonstrates control over white space handling and the display type
of different elements.
Write a sample style sheet and the associated XHTML file that demonstrates the
control that CSS provides over list item markers.
7/17/2015
CS403 Cascading Style Sheets
47
Key terms
Absolute length value
Border
Cascade, the
Child element
Class selector
Color name
Content area
Contextual selector
Contrast
CSS
Declaration
Deprecated
Descendent element
Element name selector
Embedded style sheet
External style sheet
Font
Functional notation
Generic font family
Hex
Hexadecimal number system
ID selector
Inheritance
Inline style
Internal style sheet
7/17/2015
Kerning
Leading
M-height
Margin
Negative space
Padding
Parent element
Pica
Pixel
Point
Positive space
Presentation
Property
Pseudo-class selector
Pseudo-element selector
Relative length value
Selector
Shorthand property
Specificity
Structure
Style rule
Typeface
Typography
Value
Weight
X-height
CS403 Cascading Style Sheets
48
XHTML elements presented
class attribute
<div>…</div>
id attribute
<link />
<span>…</span>
style attribute
<style>…</style>
7/17/2015
CS403 Cascading Style Sheets
49
CSS properties presented in parts 2 and 3
background
background-attachment
background-color
background-image
background-position
background-repeat
border
border-bottom
border-bottom-width
border-color
border-left
border-left-width
border-right
border-right-width
border-style
border-top
border-top-width
border-width
7/17/2015
clear
color
display
float
font
font-family
font-size
font-style
font-variant
font-weight
height
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
CS403 Cascading Style Sheets
margin
margin-bottom
margin-left
margin-right
margin-top
padding
padding-bottom
padding-left
padding-right
padding-top
text-align
text-decoration
text-indent
text-transform
vertical-align
white-space
width
word-spacing
50
Thanks to Mike Gildersleeve for sharing the
information from his Summer, 2006 CS403
PowerPoint.
Information also used from:
Web Developer & Design Foundations with XHTML by
Terry Felke-Morris
7/17/2015
CS403 Cascading Style Sheets
51