The document discusses various topics in CSS including font families, the box model, text formatting and positioning, and table formatting. It defines five font families - serif, sans-serif, script, monospace, and fantasy - and describes their common uses. It also explains the box model of margins, padding, borders, and background, and properties for text alignment, positioning, and table styling.
2. Objectives
Students should able to:
1 Explain the font families in CSS.
2 Explain the CSS Box Model
3 Explain the properties that make up the
box: padding, border, margin,
background colour
4 Perform CSS positioning and alignment
5 Format a table in CSS.
3. Font Family in CSS
The most common way that Cascading Style
Sheets are used is to change the font of a
Web page or site.
CSS recognizes five font families:
- Serif
- Sans-serif
- Script
- Monospace
- Fantasy
4. Font Family in CSS
Each category has many different typefaces
that are a part of the family.
5. Types of Font
Sans-serif fonts should be the basis of your
Web content. They are easy to read online
and there are many that are common to
most computer operating systems.
Serif fonts are best used in print style
sheets because they make printouts much
easier to read.
6. Types of Font
Monospace fonts should be used when
the spacing of the content is important -
such as with pre-formatted text.
Another common use of monospace fonts
is to display code or other technical
details.
7. Types of Font
Script fonts are best used as signatures or
other locations where the look of cursive
handwriting is desired.
Fantasy fonts are best used for headings
and artistic text. However, they are the
least common of all the categories.
8. Font Style Property
Define the typeface using the font-family
style property.
Some possible style listings:
- sans-serif body copy
body { font-family : Verdana, Geneva,
Arial, Helvetica, sans-serif; }
- serif body copy for print
body { font-family : "Times New Roman”,
Times, serif; }
9. Box Model
Margins, padding and borders (see next
page) are all part of what's known as the
Box Model.
The Box Model works like this: in the
middle you have the content area (let's say
an image), surrounding that you have the
padding, surrounding that you have the
border and surrounding that you have the
margin.
10. Box Model
It can be visually represented like this:
You do not have to use all of these, but it
can be helpful to remember that the box
model can be applied to every element on
the page.
11. Text Align
The CSS text-align property is used for
aligning elements left, right, center etc.
Syntax : text-align: <value>
Example:
td { text-align: right }
12. Text Align
<style type="text/css">
div {
text-align: right;
}
</style>
<div>This div has been aligned using the
css text-align property. Try changing the
values to see the effect.
</div>
13. Text Position
The CSS positioning properties allow you to
position an element.
Elements can be positioned using the top,
bottom, left, and right properties.
14. Static Position
Static Positioning
HTML elements are positioned static by
default. A static positioned element is always
positioned according to the normal flow of
the page.
Static positioned elements are not affected
by the top, bottom, left, and right properties.
15. Fixed Position
Fixed Positioning
An element with fixed position is positioned
relative to the browser window.
It will not move even if the window is
scrolled.
17. Absolute Position
Absolute Positioning
An absolute position element is positioned
relative to the first parent element that has a
position other than static. If no such element
is found, the containing block is <html>.
18. Format Table
In the example below, the table is named as
table1.
.table1 {width:200px;
margin:auto;
font-size:12px;
border:1px solid #000000; }
19. Format Table
Formatting each TD cell in the table using a
bold blue colored font and applied a border
to each cell and text centered vertically and
left aligned horizontally.
.table1 td {font-weight:bold;
color:#000099;
vertical-align:middle; text-align:left;
border:1px solid #000000; }
20. Add Background to Table
Add the following to the appropriate class:
background:#ccccff;
.table1 td { background:#ccccff;
font-weight:bold;
color:#000099;
vertical-align:middle; text-align:left;
border:1px solid #000000; }