Friday, April 9, 2010
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)
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");
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)
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;
}
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
Wednesday, October 31, 2007
CSS Selectors
CHILD SELECTOR
Despite Internet Explorer 6 not supporting the CSS child selector, it's actually been used a lot as a way of hiding CSS commands from Internet Explorer. This is no longer possible as IE7 now understands the child selector. To understand, what is the child selector? Imagine the following HTML structure:
<div><p><span>Text goes here</span></p></div>
In the above example, the <p> is a child of the <div> and the <span> is a grandchild of the <div>. We can make the text in the <span> red by using the following CSS rule:
div span {color: red;}
This basically means that the contents of the <span> will be red, provided that the <span> is nested within a <div>. That <span> could be a child, grandchild, great-grandchild etc. of the <div>.
If we were however to use the following CSS code:
div>span {color: red;}
...Then the text within our <span> wouldn't turn red. This is because we've inserted the child selector between the div and span (the greater than sign), which basically means that our span has to be a child of a div. In the above example, the <span> is a grandchild of the <div>.
So, by using the child selector, we can assign rules to any HTML element that's a child (and not a grandchild) of another element. Let's say for example we want a top margin to be assigned to the first <div> in our body, but not to any others. Without the child selector we would be forced to assign a class or id to this <div> and reference that class or id in our CSS command. Now though, we can reference this <div>, and only this <div>, without the need for a class or id through the CSS:
body>div {margin-top: 10px;}
ADJACENT SELECTOR
The adjacent selector is another extremely useful CSS selector that up until now Internet Explorer hasn't understood. Fortunately, IE7 does understand it. The adjacent selector basically allows you to reference an HTML element that's adjacent to another element:
blockquote+p {margin-top: 0;}
The above CSS code basically says that any paragraph that's preceded by a quote shouldn't have a top margin. This is useful as you may always wish to cite the person making the quote in a paragraph after the quote and may want to get rid of the space between the paragraph and quote.
Another great example of when you may use the adjacent selector is in horizontal lists. Often, you may want to format the first item slightly differently to the other items in the list. So, if you wanted to assign a left border to each navigation item except for the first, you could use this CSS code:
li+li {border-left: 1px solid black;}
This basically means that any <li> that follows another <li> (i.e. all of them except the first) should have a left hand border.
Monday, October 29, 2007
Why we need of CSS ?
Separate Presentation from Content
The first and foremost mission was to disconnect the tight stranglehold that HTML style tags brought to a Web page. By isolating the control of a page’s look-and-feel from the content, a clear pathway to building structured pages opens up where you can still get the design you want. Additionally, both content and design benefit in terms of accessibility. Search engines can get at the content easier for indexing, while designers have hands-on control of their presentation. The core concept of separating presentation from content leads to many other benefits of the CSS model.
The first and foremost mission was to disconnect the tight stranglehold that HTML style tags brought to a Web page. By isolating the control of a page’s look-and-feel from the content, a clear pathway to building structured pages opens up where you can still get the design you want. Additionally, both content and design benefit in terms of accessibility. Search engines can get at the content easier for indexing, while designers have hands-on control of their presentation. The core concept of separating presentation from content leads to many other benefits of the CSS model.
Flexible Design Model
Even with the most basic implementation of text styling, CSS runs rings around HTML. Whereas font tags are limited to seven browser-dependent sizes, CSS offers both absolute, number-based systems in the measurement unit of your choice (points, pixels, ems, percentages, and many others) and relative keyword-based systems (that is, small, medium, large, smaller, larger, and so on). Design considerations common in print publishing (such as line spacing) are impossible in HTML but a snap in CSS. Aside from the specific properties available, the CSS methodology of assigning those properties is wonderfully robust. With CSS, you can re-style existing HTML tags or create custom styles in a variety of ways with classes, IDs, and through selectors. Selectors (whether as common as a descendent selector or as rare as adjacent-sibling selectors) encourage structural Web coding while delivering enhanced design control.
Faster Loading Times
To the casual Internet user, a Web page is completely virtual with no real substance or weight. Web designers, however, are very aware of the weight of their pages; the more code that’s in a page, the heavier it is and the longer it takes to load. For example, here’s the minimum code it takes to place a sentence on the page in the common HTML container, a font tag:
<table>
<div>
Easy, Instant Maintenance
As noted earlier, it’s a nightmare to change an HTML style across a site because styles are all applied at the lowest level, the tag. Not only must all pages with all the styles be altered one at a time, each page must be re-saved and then re-put to the server.With well-structured CSS, on the other hand, your styles are kept in a separate file where they can be modified in any text editor. Once published, a style change is immediately seen by anyone who views an affected page within the site.
Portability
Although the Internet may at times seem pervasive, it’s just one of many media. For example, many sites strive to have their Web pages available for print as well.With HTML-styled pages, the only viable route is to redesign the page with print in mind—a terrible chore to do it once and a never-ending time-suck if the site is updated frequently. CSS turns the HTML model on its head and allows you to simply specify a different style sheet for print—and, if desired, one for speech synthesizers, rojectors, and hand-held devices, among others—and you’re done.
Advanced Design Possibilities
As defined, CSS is highly interactive and throws open the door to a multitude of design options. Just a few of the advanced text options were mentioned earlier; in addition to advanced sizing and line spacing, CSS also provides more robust alignment and far more specific margin and padding options. Text is not the only element to gain a power surge under CSS. The capability to control the position and tiling of background images (see the below Figure) is reason enough to use CSS in and of itself.
FIGURE -1: With CSS image control, you can place a single, non-tiling image like thiscontrol panel in the background, precisely positioned.
Enhanced User Control
While CSS provides a great deal of design-time flexibility, it also opens up the run-time options for Web page visitors. The entire notion of the cascade in Cascading style Sheets stems from the originators’ desire to blend the designer’s style sheet with the user’s. The end result is a cascade of several style sheets all coming together to render the page optimally. Some CSS-savvy designers have taken this a step further and designed their sites with multiple CSS styles attached to each page. Modern browsers include a style switching command that lists available style sheets.
One of the most commonly adjusted user settings is font size. The smallish text that looks good on the design spec may be too tiny to be read by a particular visitor—and that’s okay, if the page is styled properly with CSS and the text can expand to a readable size, as shown in Figure 1-2.When designed correctly, the text grows and the layout flows: site designer, site visitor, and site owner are all happy.
Accessibility
Adjustable text size is just one aspect of a vital trend in Web design: accessibility. Fueled by the Federal Rehabilitation Act, a
FIGURE-2: Define your font sizes correctly with CSS, and text is easily rescaled with no sacrifice of design integrity.
One CSS 2.1 specification goes to the next level in aiding the visually impaired to browse the Web by carving out a new media type: speech. Speech is a separate media type (just like print or hand-held devices) that allows designers to control how CSS classes and other selectors sound, just like the screen media type controls how CSS selectors look. Support for the speech media type is pretty much nonexistent at this time, but a much fuller implementation already on the table for CSS 3 bodes well for this much-needed functionality.
Subscribe to:
Posts (Atom)