CSS formatting uses a simple box-oriented formatting model.
Every formatted element (text or image) will result in one or more rectangular
boxes. Each box has a central content area that is surrounded by optional
border, padding and margin areas. These boxes are usually not visible, but you
need to understand their uses and relationship in order to work effectively
with style sheets. Here:
- The innermost box, the content area, is where the data displayed. This can be text or an image.
- The padding area provides a space between the content and its border.
- The border is an optional box drawn around the element.
- The margin provides space around the element, outside the border.
Next figure shows you the structure of the same:
Note
That it is this box
model that Internet Explorer gets wrong. Because IE doesn’t follow the
specification correctly, it makes using pure CSS for layouts a little tricky.
Other browsers, such as Mozilla Firefox and Opera, display the box model
property. So, next time you see a page being displayed well in other browsers
and not in IE, this could be one of the reasons.
The Display Property
An element on a Web page can be displayed several ways:
- Block: The element is displayed on a separate line from other elements (for example, a paragraph).
- Inline: The element is displayed
inline with other elements (for example, an italicized word in a line of
text).
- List-item: The element is
displayed preceded by a list item mark (for example, an item in a bulleted
list).
- None: The element is hidden from
view.
You specify the way an element is displayed by setting the
display property in the style rule to block, inline, list-item, or none.
The Height and Width
Property
You use the height and width properties to specify the size
of an element’s display box. Each property is specified as a numerical value
followed by an abbreviation that specifies the unit of measures. These include
inches (in), centimeters (cm), millimeters (mm), and pixels (px) as well as the
following less known units:
- Ens (en): The width of the letter N in the current font.
- Picas (pi): One sixth (1/6) of an inch.
- Points (pt): One seventy-second (1/72) of an inch.
In my experience, pixels are commonly used for images and
points for text.
The border properties
The appearance of an element’s border is controlled by a set
of properties referred to collectively as the border properties. The default
for most elements is no border, with the primary exception being tables. Every
border has three aspects: its width, its style (dotted, dashed, etc.) and its
color. To set the width, or thickness, of the entire border, use the border-width property. To set the width
of individual borders, use the border-top-width,
border-bottom-width, border-left-width, and border-right-width properties. You can
set these properties as thick, thin or medium.
To set the border style, use the border-style property. If you want all four borders to be the same,
set the border-style property and if
you want the four borders to be different, set the border-top-style, border-bottom-style,
border-left-style, and border-right-style properties
individually. The values that you can set these properties to are dotted,
dashed, solid, double, groove, ridge, inset, outset, and none for no border.
To set the border color, use the border-color property or the border-top-color,
border-bottom-color, border-left-color, and border-right-color properties
individually. You can set these properties to a color name or a numerical color
value (you have learned about this in previous chapters).
The Margin and
Padding Properties
These two properties control the size of an element’s margin
and padding. They work in exactly the same way, with the same syntax, and so
are treated together here - simply replace margin with padding. To set all four
element margins to the same width, use this syntax in the style rule:
margin: value
Value can be expressed in the following two ways:
- As a numerical value followed by a measurement unit.
- As a numerical value followed by the percent sign.
To set the size of individual margins use the margin-top, margin-right, margin-bottom
and margin-left properties.
The Font Properties
There are hundreds if not thousands of fonts, and each one
is separate install on a user’s computer. Of course, any user with the Windows
operating system will almost surely have a set of standard fonts installed, but
the bottom line is the page (or CSS) will be available when the page is
actually viewed. The imperfect solution to this dilemma was to define font
families. The four font families are described here.
- Serif fonts are so names because
they have serifs-small caps and other decorations on the ends of strokes
within each character. Serif fonts are proportional. Times New Roman,
Georgia, and New Century Schoolbook are popular serif fonts.
- San-serif fonts are lacking serifs
but are still proportional. Arial, Verdana are commonly used sans-serif
fonts.
- Monospace fonts are those that are
not proportional – each character is given the same amount of space. A
monospace font may be serif or sans-serif. Common example is Courier New.
- Cursive fonts are designed to look
like human handwriting. The characters are usually composed almost
entirely of curves. Amazone BT is an example of this font family.
See figure below which depicts these some of the fonts:
The importance of font families is this: Since you cannot be
sure that the end user will have a specific font installed, you can always specify
a font family in addition to a specific font. If the font is not available, the
browser will use a similar font from the specified family. Now let us see some
specific font-related properties that you can use in style sheet rules.
h1 {font-family: sans-serif;}
h1 {font-family: ‘Times New Roman’;}
If the user does not have this font installed, the browser
will fall back to its default font. You can also specify a font family as a
second choice:
h1 {font-family: ‘Times New Roman’, serif;}
With the above rule, if the Times New Roman font is not
available, the browser will select some other serif font.
You can also specify multiple font names in a rule:
h1 {font-family: Georgia, ‘Times New Roman’, serif;}
This will cause the browser to look for Georgia first,
then for Times New Roman, and if neither is available, to go back on a serif
font. Note the single quotes used in all examples above for Times New Roman.
Such a quotes are required for any font name that includes a space or a symbol
such as $ or #.
Font Size: Font
size is specified using the font-size property. You can set the value of this
property in the following ways:
1) To one of the keywords xx-small, x-small, small, medium, large, x-large, xx-large. Though the size names such as xx-small are not guaranteed to give you precise sizes. In theory it
is supposed to work like this:
- The medium size is 16 pixels high.
- Each step larger is by a factor of 1.5. Thus large should be 16 × 1.5 = 24 pixels.
- Each step smaller is by a factor of 0.66. Thus x-small should be 16 × 0.66 =10 pixels (approximately). However, different browsers use different factors, so you cannot be sure of exactly what you will get. So they should be avoided for precision design.
2) To a specific size consisting of a number followed by a
unit abbreviation as described earlier in this chapter. Point (pt) is the unit
usually used for fonts.
3) To a relative size using the keywords smaller and larger
or a numerical value followed by a percent sign. The relative font size
specifies operate relative to the current size as follows:
- The keywords smaller and larger make the font smaller or larger by one step (in theory this is a factor of 0.06 or 1.5).
- A percentage value makes the font the specified percent of the current size.
Font Style: The
font-style property lets you select between normal, italic, and oblique style. Normal is the default and
displays the letters upright. In many experience, most browsers display oblique
and italic the same.
Font Weight: The
font-weight property controls the weight of text. You can set this property as
follows:
- To the keyword normal or bold.
- To a numerical value 100, 200, 300, 400, 500, 600, 700, 800, or 900.
- To a relative keyword lighter or bolder.
Most people used to have two font weights available in their
word processor: normal and bold. In style sheet rules, these
correspond to the numerical values 400 and 700 respectively. In theory, you
have a lot of control over font weight, but in reality the degree of control is
less than you would expect, depending on the font and font size in use. When
using the numerical values, all you can be sure be sure of is that a higher
number will produce smaller font weight numbers. You can experiment with the
number settings, but I have never found any use for anything other than normal and bold.
The text Properties
The text properties control aspects of text display such as
indentation, capitalization, and alignment. They are:
PROPERTY
|
VALUES
|
DESCRIPTION
|
text-decoration
|
underline,
overline, line-through, blink
|
Specifies the text
decoration.
|
text-transform
|
capitalize,
uppercase, lowercase
|
Specifies the
capitalization of text. The capitalize value means the first letter of words
in uppercase.
|
text-align
|
left, right,
center, justify
|
Specifies the
alignment of text within its content box. The justify setting causes the
spacing between letters and/or words to be adjusted to align both the left
and right end of lines with the margins.
|
text-indent
|
A number followed
by a unit abbreviation or a percent sign
|
Specifies the
indentation of the first line of text as a specific amount or as a percentage
of the width of the text element.
|
text-line height
|
A number by itself
or followed by a unit abbreviation or percent sign.
|
Specifies the
spacing between lines of text. A number by itself specifies lines (1 = single
spaced, 2 = double spaced, etc.). A number with a percent of the element’s
font size.
|
The color and
background-color Properties
These properties specify the color of an element and its background.
An element’s color is used for text as well as for the borders. These
properties can be specified as other colors are specified: a color name, a hex
color value, or an rgb() color value.
0 comments:
Post a Comment