Google

Wednesday, November 21, 2007

Sizing Fonts Using Units of Measurement

Unit Identifier
Corresponding Unit
pt
points
pc
picas
px
pixels
em
ems
ex
exes
%
percentage

Points and Picas
You should avoid using points and picas to style text for display on screen. This unit is an excellent way to set font sizes for print design, as the point measurement was created for that purpose. A point has a fixed size of 1/72 of an inch, while a pica is one-sixth of an inch.

Pixels
Many designers like to set font sizes in pixel measurements, as this unit makes it easy to achieve consistent text displays across various browsers and platforms. However, pixel measurements ignore any preferences users may have set in their own browsers and, in many browsers, font sizes that the designer has dictated in pixels cannot be resized by users. This limitation presents a serious accessibility problem for users who need to make text larger in order to read it clearly.

Ems
The em is a relative font measurement: one em is equal to the height of the capital letter M in the default font size. Where CSS is concerned, 1em is seen to be equal to the user’s default font size, or the font size of the parent element when it is set to something other than the default.
If you use ems (or any other relative unit) to set all your font sizes, users will be able to resize the text, which will comply with the text size preferences they have set in their browsers. As an example, let’s create a declaration that sets the text within a p element to display at a size of 1em:

Exes
The ex is a relative unit measurement that corresponds to the height of the lowercase letter x in the default font size. In theory, if you set the font-size of a paragraph to 1ex, the uppercase letters in the text will display at the height at which the lowercase letter x would have appeared if the font size had not been specified (and the lowercase letters will be sized relative to those uppercase letters).

Unfortunately, modern browsers don’t yet support the typographical features needed to determine the size of an ex precisely—they usually make a rough guess for this measurement. For this reason, exes are rarely used at the time of writing.

Percentages
As with ems and exes, font sizes that are set in percentages will honor users’ text size settings, and can be resized by the user. Setting the size of a p element to 100% will display your text at users’ default font size settings (as will setting the font size to 1em). Decreasing the percentage will make the text smaller

Absolute Keywords
We can use any of seven absolute keywords to set text size in CSS:
1. xx-small
2. x-small
3. small
4. medium
5. large
6. x-large
7. xx-large

from: the css anathology (by Rachel Andrew)
Posted by at No comments:
Labels: , , ,

Monday, November 19, 2007

Managing CSS File

Deciding how many style sheets to maintain and what they should contain is more difficult. In a small, simple site it may be fine to keep all of your declarations in one file. But as sites grow larger, there seems to be a point at which it becomes simpler to deal with multiple files than it is to find the declaration or attribute you’re looking for in amile-long single style sheet. Because CSS includes the ability to import other style sheets, it’s relatively simple to link to one style sheet from your (X)HTML file, and then import additional style sheets from that one. Take a look at the following example:

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>untitled</title>
<link rel="stylesheet" type="text/css" href="http://yoursite.com/media/css/base.css" />:
</head>

<body>
<p>The content of our page.</p>
</body>
</html>

base.css:
@import url("layout.css");
@import url("typography.css");

Here, our linked style sheet, base.css, imports two additional style sheets, layout.css and typography.css. We’ve split our CSS into three separate files, but the browser will treat them as if they were one long style sheet. Personal preference is involved in deciding which is easier to wrap your brain around— one file or multiple files. Oftentimes, the scope of the project will dictate your methodology.

A small project with only a few pages may have far fewer styles, and thus be quite manageable in a single file. Larger projects are more likely to get complex, and breaking their style into multiple files may help you keep track of things more efficiently. You also may find special cases that warrant their own style sheet, such as groups of hacks and workarounds to compensate for browser bugs or styles specifically for a particular media type (such as print or handheld).

Whether you decide to break up your styles into multiple files is entirely up to you. With a little experimenting, you’ll find methods that make sense for you and your team.

from: pro css technique (Jeff Croft, Ian Lioyd and Dan Rubin)



Posted by at No comments:
Labels: , , ,

Tuesday, November 13, 2007

Anchor Pseudo Element

Anchor Pseudo-element is used to control the links in web page.Link can all be displayed in different ways in a CSS-supporting browser:

It sub properties are:
Link : this is a link that has not been used, nor is mouse pointer hovering it
visited : this is a link that has been used before, but has no mouse on it.
hover : this is a link currently has a mouse pointer hovering over it/ on it.
active : this is a link that is in process of being click

Note:
 1) a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
2) a:active MUST come after a:hover in the CSS definition in order to be effective!!
3) Pseudo-class names are not case-sensitive.

Example:
-----------------------------------------------------------------------------------
a:link {
color:#999999;
text-decoration:none;
}

a:visited {
color:#0000FF;
}
a:hover {
color:#CCCCCC;
text-decoration:underline;
}
a:active {
color:#FF0000;
}
Posted by at No comments:

Sunday, November 11, 2007

Pseudo Classes

In CSS, there are certain selectors you can use that act like you've injected new HTML into the page and have the flexibility to style those new imaginary elements. These are known as pseudo-elements.

Pseudo-elements can only be applied to the last "simple selector in a chain", as the recommendation says. A simple selector is either the univeral selector (*) or a type selector (I tend to call them element selectors) followed by attribute, ID or pseudo-class selectors.


The Syntax
The syntax for pseudo elements is a bit different than that of regular CSS, but it's real close.
selector:pseudo-element {property: value}
 As you can see the only difference is that you place the pseudo element after the selector, and divide the 2 with a (:) colon.


 There are a number of common typographical layout techniques (such as drop-cap letters, or special text formatting applied to the first line or letter of text in a paragraph) that, while commonplace in print media, are not easy to reproduce using standard HTML. These do not conform to the idea of typical structural elements contained in a Web page, but are better thought of as pure typographical layout formatting features. CSS enables the Web author to accomplish this using the pseudo-elements

The list of Pseudo element and classes

1. anchor
2. first-line
3. first-letter
4. lang
5. left, right & first
6. focus and hover
7. first-child

Posted by at No comments:
Labels: , , ,
Subscribe to: Posts (Atom)