Key Font Properties in Css

 The following properties are often used for tighter control. Most are self-explanatory, so let’s
breeze through them; we’ll combine them all in a sample template at the end of the chapter.

font-weight
The font-weight property sets how thick or thin characters in text should be displayed. Typically,
the declaration will either be normal or bold, although some browsers support numeric values
in increments of 100. These are 100 (lightest), 200, 300, 400 (same as normal), 700 (same as bold),
800, and 900 (even bolder!).

font-style
Again, this property is pretty obvious. The default is normal, but typically you would use this
property to declare any text that needs to be rendered in italics. Values are normal, italic, and
oblique. When you specify an oblique font style, the browser looks for any available font with
“oblique” in its name or, failing that, one with “italic” in its name.

font-variant
The font-variant property is used to display text in a small-caps font, which means that all the
lowercase letters are converted to uppercase letters, but all the letters in the small-caps font
have a smaller font size compared to the rest of the text. This is useful for secondary, lessimportant
info such as stats, figures, or footer information. Possible values are simply normal or
small-caps.
Note that the browser will use a proper small-caps font if one is available; otherwise the
effect is done computationally. You can see an example of small caps a little later in Figure 4-9.

text-transform
Not strictly a font property, but it controls the font, so it is included here. This property is a
natural antidote to font-variant, where all characters can be rendered uppercase without
reducing font size. The text-transform:uppercase declaration is especially useful for headings,
where it is semantically incorrect to type using uppercase characters in the markup.

Primary Font Properties in Css

Initially, it might seem that the manipulation of text on the Web is severely limited, but
designers are constantly pushing the envelope with new and exciting methods of treating it.
Later we’ll delve into some more complex CSS properties, but for now it’s important to understand
the basic font syntax.

Specifying Fonts

 
First, you’ll want to override some of the browser’s default CSS properties, specifically the typeface
and the font size. This is really straightforward, but there are a few interesting issues to be
aware of. The following properties would typically be declared in the body selector, allowing all
following elements to inherit the values unless you specify otherwise.

font-family

 
The font-family property is a list of font family names and/or generic family names for an
element, specified in priority order. The browser will use the first available font on the user’s
machine. There are two types of font-family values: • Family name: The name of a font family, like Times, Georgia, or Arial.
• Generic family: The name of a generic family, like serif, sans-serif, cursive, fantasy,
or monospace.
Each value must be separated with a comma, and you should always suggest a genericfamily
name as the final option in the list.
If a family name contains whitespace, such as the family name Lucida Grande, it should be
enclosed in quotes ("Lucida Grande"), although single quotes need to be used if embedding the
style in HTML.
In the following example, defining the family names and generic family for the body
element will ensure that all child elements will inherit the font-family declaration, unless
specifically overridden.
/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
}
Note also that Lucida Grande is specified first, and due to its whitespace character it is
contained within quotes. Any machines with Lucida Grande will display text with that font, and
if it isn’t available, the display will default to Arial. If neither Lucida Grande nor Arial are available,
the browser knows to use whatever appropriate sans serif font it can find next, as the generic
family sans-serif is specified.
To overrule this blanket declaration, just specify a different font family for the appropriate
element. For example, many designers like to display headings and block quotes with larger,
more classic serif fonts.

Css Tutorial : Border,Border Properties

Border
 
Borders are a simple concept with a million possibilities. Any element can have a border placed
around it, and borders can be placed on all sides, or just the sides you desire. The border property
is particularly flexible as each border can be a specific width, color, or style. As a result of the
numerous values that can be applied, a greater number of shorthand declarations are available.

Border Properties
 
The default values are a border with a medium thickness, inheriting the text color of the parent
element. Only by applying further values can this default state be influenced. The full list of
border properties is
border-style
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-color
border
border-top
border-right
border-bottom
border-left
Controlling borders is relatively easy, but it is worth looking at each property in more detail.