Friday, October 29, 2010
Thursday, October 28, 2010
ogni software tools ,locker,fixer download
Ognilab is a open source free tools software company. It has already delivered some popular freewares. This software tools can be downloaded from following award winning links
Play Tic Tac Toe Free Flash Game Player 1 Vs Computer Online
Click Here Play Tic Tac Toe Free Flash Game Player 1 Vs Computer Online
You can also add this free popular flash puzzle game in your website by adding some code.
Click Here
Play Tic Tac Toe Free Flash Game Player 1 Vs Computer Online
Click Here Play Tic Tac Toe Free Flash Game Player 1 Vs Computer Online
You can also add this free popular flash puzzle game in your website by adding some code.
Click Here
Play Racing Test Master online
Click Here Play Free Flash Game Racing Test Master Online
Saturday, October 23, 2010
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.
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.
Css Tutorial : letter-spacing (Kerning)
In the real (print) world, the spacing of characters has the professional name of kerning. Again,
CSS has enabled web designers to emulate this tight text control with the letter-spacing property.
Where line-height creates extra whitespace between lines of text, so letter-spacing is used to
adjust the spacing between characters. Again, normal can be declared to override inherited
letter-spacing, but mostly you will declare letter-spacing in pixels. In the following example,
letter-spacing is declared only for the grouped headings:
CSS has enabled web designers to emulate this tight text control with the letter-spacing property.
Where line-height creates extra whitespace between lines of text, so letter-spacing is used to
adjust the spacing between characters. Again, normal can be declared to override inherited
letter-spacing, but mostly you will declare letter-spacing in pixels. In the following example,
letter-spacing is declared only for the grouped headings:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px
font: 12px Verdana, Arial, Sans-serif;
line-height:150%;
}
h1, h2 {
letter-spacing:3px;
}
body {
margin: 10px;
border: 1px solid #000;
padding:10px
font: 12px Verdana, Arial, Sans-serif;
line-height:150%;
}
h1, h2 {
letter-spacing:3px;
}
■Note It is worth noting that unlike line-height, here negative values are allowed, so something like
letter-spacing:-0.5em can be used to bunch up the characters if required. Using the em measurement
will ensure that the spacing scales if text sizes are increased. This approach is unlikely to aid legibility, however,
so use negative spacing with caution. Use letter-spacing only when absolutely necessary. Increasing the
whitespace between characters rarely makes text more legible, and only serves to make life more difficult for
those with reading difficulties.Many designers like to ensure many other font properties are set first, and leave line-height
and letter-spacing until last. It can be that final touch that sets a design apart, and shows that
the designer has a good approach to legibility and type design.
letter-spacing:-0.5em can be used to bunch up the characters if required. Using the em measurement
will ensure that the spacing scales if text sizes are increased. This approach is unlikely to aid legibility, however,
so use negative spacing with caution. Use letter-spacing only when absolutely necessary. Increasing the
whitespace between characters rarely makes text more legible, and only serves to make life more difficult for
those with reading difficulties.Many designers like to ensure many other font properties are set first, and leave line-height
and letter-spacing until last. It can be that final touch that sets a design apart, and shows that
the designer has a good approach to legibility and type design.
Please, Please Use line-height in Css!
Adjusting the spacing between lines of text makes a huge difference to the look of your text, and
it is almost always required to enhance legibility. Please, please use it!
The line-height property is easy to understand, simple to implement, but most often
forgotten about. With careful color, size, and font-family properties set, and the text placed
within a beautifully executed section of the page, it is easy to consider the job done. The revelation
that something as simple as adjusting line-height can then bring to what is considered
finished is something one never forgets, and once you see this for yourself, you will use it in
every subsequent design.
it is almost always required to enhance legibility. Please, please use it!
The line-height property is easy to understand, simple to implement, but most often
forgotten about. With careful color, size, and font-family properties set, and the text placed
within a beautifully executed section of the page, it is easy to consider the job done. The revelation
that something as simple as adjusting line-height can then bring to what is considered
finished is something one never forgets, and once you see this for yourself, you will use it in
every subsequent design.
Setting the line-height Using Percentage
It is worth setting line-height in the body selector, as all elements can benefit from inheriting
this value. Headings that wrap to two or more lines, lists, block quotes, and so on can all use
some space for clarity, but it’s the paragraphs where the increased legibility will be most
noticeable. The rule is simple:
line-height:150%;
In this example, the spacing between the lines of text will be the given percentage of the
current font-size. So, a line-height of 100% will make no difference, whereas a line-height of
150% will create a space half the size of the font. A line-height of 200% will create a space equal
to the size of the font, and so on. Here, the line-height declaration is added to the existing
body selector:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
line-height:200%;
}
this value. Headings that wrap to two or more lines, lists, block quotes, and so on can all use
some space for clarity, but it’s the paragraphs where the increased legibility will be most
noticeable. The rule is simple:
line-height:150%;
In this example, the spacing between the lines of text will be the given percentage of the
current font-size. So, a line-height of 100% will make no difference, whereas a line-height of
150% will create a space half the size of the font. A line-height of 200% will create a space equal
to the size of the font, and so on. Here, the line-height declaration is added to the existing
body selector:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
line-height:200%;
}
The browser window on the right clearly shows that a line-height of 200% creates spacing
equal in height to the size of the text characters. This is great for the example, but in the real
world, a value of 150% or 160% would probably be more appropriate.
equal in height to the size of the text characters. This is great for the example, but in the real
world, a value of 150% or 160% would probably be more appropriate.
Other line-height Values
As well as the very flexible method of setting line-height using percentage, some other values
can be used.
As well as the very flexible method of setting line-height using percentage, some other values
can be used.
Normal
Sets what the experts call a “reasonable distance between lines.” In actuality, this setting is
exactly the same as specifying no line-height at all, and it is only useful if you wish to override
inherited line-height for a particular element.
line-height:normal;
Number
Sets a number that will be multiplied with the current font-size to set the distance between
the lines. For example, if the font-size is 12px, then specifying a line-height of 2 will result in
a space of 24 pixels between lines of text.
line-height:2;
Length
Sets a fixed distance between the lines, which is great for precision, but it is important to
remember that when text is resized, the line spaces will not increase or decrease at the same
ratio as the text.
line-height:8px;
To ensure appropriate scaling when text is resized, use a flexible length measurement such as
ems or percentage.
Css Tutorial :Body Declarations
The first task with any new web site is to consider what blanket rules can be declared in the
body selector. Remember that every element contained in the body element will inherit its
values unless you specify otherwise. For example, to avoid having to declare the font-family
and font-size for every element, some blanket rules can be applied from the outset.
The first selector to define in text.css is for body. Notice that margin, border, and padding
properties have been declared, but more importantly so have the font-family and font-size properties using shorthand. These are specified for the whole web page, and any others that
take their style from text.css:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
}With the font-size reduced to 12px, the display looks a little more professional, and
Verdana makes the text a little easier on the eye. Notice that the declared font-size has no
effect on the headings (<h1> and <h2>), which retain their default font sizes, as discussed earlier.
body selector. Remember that every element contained in the body element will inherit its
values unless you specify otherwise. For example, to avoid having to declare the font-family
and font-size for every element, some blanket rules can be applied from the outset.
The first selector to define in text.css is for body. Notice that margin, border, and padding
properties have been declared, but more importantly so have the font-family and font-size properties using shorthand. These are specified for the whole web page, and any others that
take their style from text.css:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
}With the font-size reduced to 12px, the display looks a little more professional, and
Verdana makes the text a little easier on the eye. Notice that the declared font-size has no
effect on the headings (<h1> and <h2>), which retain their default font sizes, as discussed earlier.
Define Your Style Sheet in Css
The first step is to override the browser’s default style sheet with one of your own. In Chapter
1, you learned how to apply an external style sheet, so repeat that process and apply a style
sheet called text.css using the following link element within the head of the document:
<head>
<title>Chapter 4: Text</title>
<link rel='stylesheet' media="screen" type='text/css' href='text.css' />
</head>
Reload text.html in your browser. Nothing looks different, but text.css is now higher in
the cascade than the browser style sheet. As there are no rules in text.css to override the
browser style sheet yet, the latter’s rules currently still take precedence.
1, you learned how to apply an external style sheet, so repeat that process and apply a style
sheet called text.css using the following link element within the head of the document:
<head>
<title>Chapter 4: Text</title>
<link rel='stylesheet' media="screen" type='text/css' href='text.css' />
</head>
Reload text.html in your browser. Nothing looks different, but text.css is now higher in
the cascade than the browser style sheet. As there are no rules in text.css to override the
browser style sheet yet, the latter’s rules currently still take precedence.
Default Browser Display
Most would agree that a browser’s default style sheet does a pretty good job of making text
legible. Typically, the font size will be a non-squint-inducing 16px, with black text on a white
background. In the following sections, we’ll start with this default styling and apply numerous
CSS properties to the markup (without adding any further elements to it) in order to explore
the multitude of available techniques for creating good-looking web text.
Create a new document called text.html and type the following (X)HTML into it. You
can also grab the complete text.html file from the Chapter 4 folder in the code download at
www.apress.com:
<html>
<head>
<title>Chapter 4: Text</title>
</head>
<body>
<h1>Content is King</h1>
<p>This is a paragraph. Nothing particularly special about it, but the ➥
visitor is going to read it anyway, so it may as well say something useful.</p>
<h2>True Fact</h2>
<p>Useful. OK. Did you know that a shrimp's heart is actually in its head? ➥
It's true.</p>
</body>
</html>
A shrimp’s heart is actually in its head. Bet you didn’t know that, did you? This incredibly
informative text (just two headings and two paragraphs) will be used throughout the rest of this
chapter.
Let’s get down to the serious business and forget about seafood. Firefox will display this
(X)HTML as shown in Figure 4-5 using its default style sheet.
While this display is very legible, it isn’t very stylish. It is likely that the default style sheet
will specify either Arial or more likely Times New Roman for the font, giving that classic
“unstyled” feel.
legible. Typically, the font size will be a non-squint-inducing 16px, with black text on a white
background. In the following sections, we’ll start with this default styling and apply numerous
CSS properties to the markup (without adding any further elements to it) in order to explore
the multitude of available techniques for creating good-looking web text.
Create a new document called text.html and type the following (X)HTML into it. You
can also grab the complete text.html file from the Chapter 4 folder in the code download at
www.apress.com:
<html>
<head>
<title>Chapter 4: Text</title>
</head>
<body>
<h1>Content is King</h1>
<p>This is a paragraph. Nothing particularly special about it, but the ➥
visitor is going to read it anyway, so it may as well say something useful.</p>
<h2>True Fact</h2>
<p>Useful. OK. Did you know that a shrimp's heart is actually in its head? ➥
It's true.</p>
</body>
</html>
A shrimp’s heart is actually in its head. Bet you didn’t know that, did you? This incredibly
informative text (just two headings and two paragraphs) will be used throughout the rest of this
chapter.
Let’s get down to the serious business and forget about seafood. Firefox will display this
(X)HTML as shown in Figure 4-5 using its default style sheet.
While this display is very legible, it isn’t very stylish. It is likely that the default style sheet
will specify either Arial or more likely Times New Roman for the font, giving that classic
“unstyled” feel.
Css Tutorial : Be Careful with Fonts
Remember that the alternative fonts suggested here need to be used with caution. Ensure
sensible alternatives are listed in the font-family sequence, and remember that a font displayed
on a Mac can look significantly different, or even be unavailable, on a PC. It is advisable to edit
your font sequences at the testing stage to see how your alternative fonts work for you. For
example, Georgia may be your second-choice font, but be sure it suits your design should the
first choice be unavailable.
sensible alternatives are listed in the font-family sequence, and remember that a font displayed
on a Mac can look significantly different, or even be unavailable, on a PC. It is advisable to edit
your font sequences at the testing stage to see how your alternative fonts work for you. For
example, Georgia may be your second-choice font, but be sure it suits your design should the
first choice be unavailable.
Css Tutorial : Web-Safe Fonts Alternative
It’s time to act like the rebellious tutor who throws course books out of the window and encourages
the group to “push the envelope.” In truth though, many designers are simply pursuing unsung
alternatives that can sensibly be added to the accepted list of available web fonts. The gamble
here is lessened thanks to the ability to suggest backup fonts should the preferred one be
unavailable. Learning CSS can be challenging enough without being forced to work within
difficult confines, so I encourage you to flirt with some of the following fonts, be they classic
or well established, or newcomers that have shown their true worth on screen.
We’ll look at the merits of each of the fonts displayed in Figure 4-4, followed by suggested
family names and generic names to ensure your design isn’t compromised when that font is
unavailable. Lucida Grande and Lucida Sans Unicode
Lucida Grande comes preinstalled on Mac OS X, and Lucida Sans Unicode comes with
Windows XP, the latter being a very close match to the former. These fonts are a brilliant
Verdana alternative, being supremely legible and extremely refreshing to eyes tired of typical
web fonts. Note that this author has used Lucida Grande on probably 60% of all the sites he
has built!
Suggested declaration: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif
the group to “push the envelope.” In truth though, many designers are simply pursuing unsung
alternatives that can sensibly be added to the accepted list of available web fonts. The gamble
here is lessened thanks to the ability to suggest backup fonts should the preferred one be
unavailable. Learning CSS can be challenging enough without being forced to work within
difficult confines, so I encourage you to flirt with some of the following fonts, be they classic
or well established, or newcomers that have shown their true worth on screen.
We’ll look at the merits of each of the fonts displayed in Figure 4-4, followed by suggested
family names and generic names to ensure your design isn’t compromised when that font is
unavailable. Lucida Grande and Lucida Sans Unicode
Lucida Grande comes preinstalled on Mac OS X, and Lucida Sans Unicode comes with
Windows XP, the latter being a very close match to the former. These fonts are a brilliant
Verdana alternative, being supremely legible and extremely refreshing to eyes tired of typical
web fonts. Note that this author has used Lucida Grande on probably 60% of all the sites he
has built!
Suggested declaration: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif
Futura
Futura is a good contemporary-looking font, comes preinstalled on Mac OS X, and is included
with many Adobe applications. It is a great sans serif font that works particularly well at larger
font sizes (so great for headers).
Suggested declaration: Futura, Helvetica, Arial, sans-serif
Helvetica Neue
A redrawn version of Helvetica that has better separation between characters across its various
guises, Helvetica Neue (pronounced “noye-er”) comes preinstalled with most platforms and
software. It’s a very stylish font that looks great in any situation.
Suggested declaration: "Helvetica Neue", Helvetica, Arial, sans-serif
Gill Sans
Gill Sans is classified as a humanist sans serif, making it very legible and readable in text and
display work. The condensed, bold, and display versions are excellent for packaging or posters,
and this description translates very well to the screen. Gill Sans exudes a modern feel due to its
clear, generous, and original characters. It comes preinstalled on Mac OS X.
Suggested declaration: "Gill Sans", "Lucida Grande", "Lucida Sans Unicode", Arial,
sans-serif
Palatino
Preinstalled on Mac OS X and many Windows machines, Palatino is a typeface based on classical
Italian Renaissance forms, and is a rather nice serif font. It has become a modern classic
in itself, and is popular among professional graphic designers and amateurs alike. Palatino
works well for both text and display typography, and used carefully it can be a great web font.
Suggestion declaration: Palatino, Georgia, "Times New Roman", serif
Preinstalled on Mac OS X and many Windows machines, Palatino is a typeface based on classical
Italian Renaissance forms, and is a rather nice serif font. It has become a modern classic
in itself, and is popular among professional graphic designers and amateurs alike. Palatino
works well for both text and display typography, and used carefully it can be a great web font.
Suggestion declaration: Palatino, Georgia, "Times New Roman", serif
Css Tutorial : Web-Safe Fonts
Always, always think about clarity and legibility here. Choose fonts that look good not only on
your chosen platform (most look fabulous on a Mac), but also on others. How legible is your
11-pixel Times text over on a colleague’s PC? What if that colleague has/hasn’t enabled
ClearType font smoothing? What if you need to render some information in italics? Does your
chosen font cope well in such circumstances? Certain fonts give very consistent results in a variety of situations. While some may consider
the likes of Verdana and Georgia as safe bets, this is unfair. Legibility generally overrules whimsy,
and certainly comes well before indulgence. Verdana, for example, is vilified in some circles as
the equivalent of a Queen Greatest Hits album—absolutely everywhere, incredibly familiar, but
not delivering anything new, i.e., boring. Take this raw source though, and give it a little remix,
and who knows what could be drawn from it? My point is that the possibilities with CSS are
endless, and the combination of background images, appropriate font properties, and careful
spacing can give an old font new room in which to shine.
There are, in all facets of web design, rules to be followed. Web standards exist for the
common good, but most rules can be treated as guidelines for good practice. Remember that
nobody is forcing you to do things their way, and the web is an open playing field. Use the font
you want to use, and do not be swayed by ill-considered opinion. Just make sure your visitors
can actually read it.
Let’s look at the web-safe fonts available at the time of writing, illustrated in Figure 4-3,
and consider why some might be more useful than others, and what kind of web sites they
might suit.
your chosen platform (most look fabulous on a Mac), but also on others. How legible is your
11-pixel Times text over on a colleague’s PC? What if that colleague has/hasn’t enabled
ClearType font smoothing? What if you need to render some information in italics? Does your
chosen font cope well in such circumstances? Certain fonts give very consistent results in a variety of situations. While some may consider
the likes of Verdana and Georgia as safe bets, this is unfair. Legibility generally overrules whimsy,
and certainly comes well before indulgence. Verdana, for example, is vilified in some circles as
the equivalent of a Queen Greatest Hits album—absolutely everywhere, incredibly familiar, but
not delivering anything new, i.e., boring. Take this raw source though, and give it a little remix,
and who knows what could be drawn from it? My point is that the possibilities with CSS are
endless, and the combination of background images, appropriate font properties, and careful
spacing can give an old font new room in which to shine.
There are, in all facets of web design, rules to be followed. Web standards exist for the
common good, but most rules can be treated as guidelines for good practice. Remember that
nobody is forcing you to do things their way, and the web is an open playing field. Use the font
you want to use, and do not be swayed by ill-considered opinion. Just make sure your visitors
can actually read it.
Let’s look at the web-safe fonts available at the time of writing, illustrated in Figure 4-3,
and consider why some might be more useful than others, and what kind of web sites they
might suit.
Verdana
Verdana is super-legible, and copes with smaller font sizes very well indeed. It is devoid of
extraneous curly bits (technically speaking this means it is a sans serif font—that is, without
serifs), and I’ll bet my laptop that 99.9% of web users will have it installed on their machine,
especially as it comes bundled with Internet Explorer. Use Verdana for a government or blue
chip business web site.
Verdana is super-legible, and copes with smaller font sizes very well indeed. It is devoid of
extraneous curly bits (technically speaking this means it is a sans serif font—that is, without
serifs), and I’ll bet my laptop that 99.9% of web users will have it installed on their machine,
especially as it comes bundled with Internet Explorer. Use Verdana for a government or blue
chip business web site.
Georgia
Georgia is a serif typeface (so it does have curly bits). It is a web designer’s favorite because
unlike most serif fonts, Georgia has been designed especially for the screen. Its italics, which
are unusually clear and legible on screen, are a major bonus. Use Georgia for a historical information
site, such as a web site about World War II.
Times New Roman
If a font has Times in the name, you can assume it will give the impression of a newspaper typeface,
although this is not always a good thing on screen. Another serif font, Times New Roman is
intended for PC platforms, and is hinted especially for the screen. That said, many would argue
that Georgia supersedes it if you want a particularly legible serif font for your web site.
Times
Times is the Mac equivalent to Times New Roman, but is not designed specifically for screen.
However, Macs being Macs, it’ll still render pretty well on that platform. Use Times New Roman
or Times for a financial institution’s web site.
Arial
Like Verdana, Arial is another sans serif font that lends a more modern feel to web sites. It is
widely used, but doesn’t work very well at lower font sizes, and there isn’t much default space
between the characters. Use Arial for a pretentious museum’s web site.
Helvetica
The closest web font to Arial for the Mac, Helvetica is another sans serif font regarded as a
superstar typeface in the real world, but faring not so well on screen. Use Helvetica for a new
media company’s web site.
Tahoma
With so little choice for web designers, you’d think there would at least be some variety on the
menu, but sadly there isn’t. Tahoma resides on any computer that has Microsoft Office installed
on it, and is thus available to most of your visitors, but it bears an uncanny resemblance to
Verdana, and is therefore used rarely. Use Tahoma for a business web site, or alternatively just
use Verdana.
Comic Sans MS
You want variety? Well, this is pretty wild. I say wild, but really Comic Sans is a bit of a joke. It’s
rare that you’ll come across a design that demands its text be rendered in this very informal
typeface. It is unfortunate that any web sites using Comic Sans tend to have that “my first web
site” feel about them, and it is best reserved for unfunny jokes or printable party invitations.
Use it if you wish, but steer clear if you are looking to present even a tiny amount of professionalism.
Use Comic Sans for your little sister’s web site about ponies.
You want variety? Well, this is pretty wild. I say wild, but really Comic Sans is a bit of a joke. It’s
rare that you’ll come across a design that demands its text be rendered in this very informal
typeface. It is unfortunate that any web sites using Comic Sans tend to have that “my first web
site” feel about them, and it is best reserved for unfunny jokes or printable party invitations.
Use it if you wish, but steer clear if you are looking to present even a tiny amount of professionalism.
Use Comic Sans for your little sister’s web site about ponies.
Trebuchet
A great screen font, designed originally at a smaller size than most fonts, which usually means
a font that has less unique subtleties. That said, Trebuchet manages to convey a contemporary
feel in a limited space, and is a stylish choice that ships with copies of Internet Explorer. Use
Trebuchet for your personal portfolio.
Courier
Courier is a monospaced font, meaning every character is the same width as you would find on
a traditional typewriter, so they line up vertically as well as horizontally. Courier New is the
most common monospaced font but can appear faint when anti-aliased at smaller sizes. Alternatives
are Lucida Console (Windows), American Typewriter (Mac), and Monaco (Mac). Use
Courier or its alternatives to display code or simulate typewriter text.
Css Tutorial : Available Fonts
Arguably the most annoying problem designers face with regard to the Web is the poor choice
of fonts available. This boils down to the fact that the only fonts that can be specified are the
ones certain to be installed on every computer used to view the web site. For example, just
because you have Sharktooth Italicized installed on your computer doesn’t mean everyone else
has. Specify it in your style sheet, and the text on your web site, as viewed on your computer, will be
rendered with it, but very few other users will have such an obscure font installed and available
to their browser. The more obscure the font you specify, the more likely it is that you’ll run
into trouble.
Thus, it is important to think about web-safe fonts. These are few, but they can be used
with confidence, as most of your visitors will have them installed.
of fonts available. This boils down to the fact that the only fonts that can be specified are the
ones certain to be installed on every computer used to view the web site. For example, just
because you have Sharktooth Italicized installed on your computer doesn’t mean everyone else
has. Specify it in your style sheet, and the text on your web site, as viewed on your computer, will be
rendered with it, but very few other users will have such an obscure font installed and available
to their browser. The more obscure the font you specify, the more likely it is that you’ll run
into trouble.
Thus, it is important to think about web-safe fonts. These are few, but they can be used
with confidence, as most of your visitors will have them installed.
Css Tutorial : Font Shorthand
You probably won’t be surprised to discover that there are some useful methods of shortening
font declarations, pulling several into one simple statement. Later you’ll combine four or five
declarations into one, but for now, let’s collate font-family and font-size.
As mentioned in previous chapters, the most important thing with shorthand is the order
in which declarations are stated. In this case, font-size precedes font-family.
/* Specify blanket rules for all elements */
body {
font: 12px "Lucida Grande", Arial, Sans-serif;
}
With this basic knowledge of the two most important CSS font properties in your arsenal,
you can now begin to experiment with new and interesting font choices. To get you started, in
the following section we’ll plough into the vast array of available web fonts of which there is an
exhaustive and unlimited choice. (I’m joking again.)
font declarations, pulling several into one simple statement. Later you’ll combine four or five
declarations into one, but for now, let’s collate font-family and font-size.
As mentioned in previous chapters, the most important thing with shorthand is the order
in which declarations are stated. In this case, font-size precedes font-family.
/* Specify blanket rules for all elements */
body {
font: 12px "Lucida Grande", Arial, Sans-serif;
}
With this basic knowledge of the two most important CSS font properties in your arsenal,
you can now begin to experiment with new and interesting font choices. To get you started, in
the following section we’ll plough into the vast array of available web fonts of which there is an
exhaustive and unlimited choice. (I’m joking again.)
font-size in Css
Now since you learned the various uses of the preferred
measurements, namely pixels, ems, and percentage. In particular, we looked briefly at sizing
text with ems, and the general consensus is that this is by far the best approach.
However, when it comes to discussing CSS and learning its ways stage by stage, I prefer to
use the pixel measurement, as it is the most easily understood and ensures those who simply
cannot get their head around the concept of ems can still sit at the table with everyone else. Just
to recap, using ems to resize text ensures compatibility with IE6, which cannot resize text defined
with pixels (jump back to Chapter 2 for a full overview of the woes and virtues of the various
units of measurement).
In the following example, a new declaration is added to the body to define the size of the
text in that and all child elements:
/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
font-size: 12px;
}
By declaring font-size:12px in combination with the font-family declaration, you will
ensure that all elements will be sized to 12px regardless of any inheritance (unlike ems, which can be influenced heavily through cascading rules), and will of course be rendered in the fonts
you specified earlier.
There are exceptions to this blanket font-size declaration, however. Note that all headings
(<h1>, <h2>, <h3>, and so on) will retain their default font sizes as declared by the browser style
sheet unless you redefine them. In other words, just because you specify a size of 12px in the
body does not mean that level 2 headings will also be 12px, as the browser style sheet has its
own correctly formatted CSS rules such as h1 {font-size:2em}. In any case, why on earth would
anyone want headings to be of equal size to their body text? This is another great example of
the creators of CSS ensuring common sense is not compromised.
measurements, namely pixels, ems, and percentage. In particular, we looked briefly at sizing
text with ems, and the general consensus is that this is by far the best approach.
However, when it comes to discussing CSS and learning its ways stage by stage, I prefer to
use the pixel measurement, as it is the most easily understood and ensures those who simply
cannot get their head around the concept of ems can still sit at the table with everyone else. Just
to recap, using ems to resize text ensures compatibility with IE6, which cannot resize text defined
with pixels (jump back to Chapter 2 for a full overview of the woes and virtues of the various
units of measurement).
In the following example, a new declaration is added to the body to define the size of the
text in that and all child elements:
/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
font-size: 12px;
}
By declaring font-size:12px in combination with the font-family declaration, you will
ensure that all elements will be sized to 12px regardless of any inheritance (unlike ems, which can be influenced heavily through cascading rules), and will of course be rendered in the fonts
you specified earlier.
There are exceptions to this blanket font-size declaration, however. Note that all headings
(<h1>, <h2>, <h3>, and so on) will retain their default font sizes as declared by the browser style
sheet unless you redefine them. In other words, just because you specify a size of 12px in the
body does not mean that level 2 headings will also be 12px, as the browser style sheet has its
own correctly formatted CSS rules such as h1 {font-size:2em}. In any case, why on earth would
anyone want headings to be of equal size to their body text? This is another great example of
the creators of CSS ensuring common sense is not compromised.
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.
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.
ClearType Font Smoothing
Most seasoned web designers will tell you that text renders better on Mac browsers than on
their PC equivalents, because the text is anti-aliased (meaning jagged edges are softened by
the addition of intermediately colored pixels around the characters) as shown in Figure 4-1. It
is certainly fair to say that those who build mostly with Mac browsers are often disappointed
when they review their work over on the office PC.
Often, however, what’s actually happening is the font they specified in the CSS isn’t available
on the PC, and so the display defaults to the next available specified font, which can carry
less clarity in some cases. However, it could also have something to do with that PC’s basic settings.
The ClearType setting is a valuable asset for PC users, and is a preference local to a particular
machine. In other words, it isn’t something you the designer can dictate through your
design. It is worth considering ClearType though, as although it makes your PC-based browsing
more enjoyable, it can also give a false impression of how your PC audience will view your work.
Basically, ClearType enhances the horizontal resolution available for rendering text
through software such as web browsers, resulting in a much clearer display of text on liquid
crystal display (LCD) screens. The benefits of ClearType rendering are less obvious for users
with CRT displays, but still worth experimenting with. The outcome is less-pixilated characters,
bringing the browser display a little closer to the smooth perfection of printed text.
their PC equivalents, because the text is anti-aliased (meaning jagged edges are softened by
the addition of intermediately colored pixels around the characters) as shown in Figure 4-1. It
is certainly fair to say that those who build mostly with Mac browsers are often disappointed
when they review their work over on the office PC.
Often, however, what’s actually happening is the font they specified in the CSS isn’t available
on the PC, and so the display defaults to the next available specified font, which can carry
less clarity in some cases. However, it could also have something to do with that PC’s basic settings.
The ClearType setting is a valuable asset for PC users, and is a preference local to a particular
machine. In other words, it isn’t something you the designer can dictate through your
design. It is worth considering ClearType though, as although it makes your PC-based browsing
more enjoyable, it can also give a false impression of how your PC audience will view your work.
Basically, ClearType enhances the horizontal resolution available for rendering text
through software such as web browsers, resulting in a much clearer display of text on liquid
crystal display (LCD) screens. The benefits of ClearType rendering are less obvious for users
with CRT displays, but still worth experimenting with. The outcome is less-pixilated characters,
bringing the browser display a little closer to the smooth perfection of printed text.
Convey the Mood with the Right Font
The right font for the right job communicates with the user instantly. Your text is the first ingredient
to appear as the page is downloaded, and it can instantly tell the user whether the web
site is serious or friendly, modern or traditional, formal or casual. Do you want the web site to
give the impression of a newspaper or journal, newsletter or fact sheet? If you do not want to
convey such an authoritative standpoint, then maybe something humorous or light-hearted is
needed? Choosing the right font or combination of fonts is key to creating the right impression
from the outset.
to appear as the page is downloaded, and it can instantly tell the user whether the web
site is serious or friendly, modern or traditional, formal or casual. Do you want the web site to
give the impression of a newspaper or journal, newsletter or fact sheet? If you do not want to
convey such an authoritative standpoint, then maybe something humorous or light-hearted is
needed? Choosing the right font or combination of fonts is key to creating the right impression
from the outset.
Why Is Text So Important in Css
Well, it tells people things, for a start. Without words, your images have an awful lot of work to
do. Aside from this flippant point, it should go without saying (although I’ll say it anyway) that
your text should be legible, to the point, and within easy reach. Visitors are rarely coming to a
web site to sit back and admire your graphics—it is most often information they are seeking.
Graphic embellishments are often mere decoration.
The issue of accessibility is an important one here. Responsible web developers spend a lot
of time ensuring that their designs are not compromised under user-defined viewing situations.
For example, if a style sheet is not available, or images are turned off, the image-based
buttons in the navigation bar will need replacement text to assist navigation. Equally important
is replacement text for general images, especially images that convey a particular message
or act as a link to another page, and there are many circumstances where background colors
can conflict with text of the same color when images are absent. Issues such as these need consideration at every stage of the design process. Essentially,
your web site should make just as much sense with or without all images, and the hierarchy of
your content should remain apparent in any situation.
do. Aside from this flippant point, it should go without saying (although I’ll say it anyway) that
your text should be legible, to the point, and within easy reach. Visitors are rarely coming to a
web site to sit back and admire your graphics—it is most often information they are seeking.
Graphic embellishments are often mere decoration.
The issue of accessibility is an important one here. Responsible web developers spend a lot
of time ensuring that their designs are not compromised under user-defined viewing situations.
For example, if a style sheet is not available, or images are turned off, the image-based
buttons in the navigation bar will need replacement text to assist navigation. Equally important
is replacement text for general images, especially images that convey a particular message
or act as a link to another page, and there are many circumstances where background colors
can conflict with text of the same color when images are absent. Issues such as these need consideration at every stage of the design process. Essentially,
your web site should make just as much sense with or without all images, and the hierarchy of
your content should remain apparent in any situation.
Friday, October 22, 2010
Monday, October 4, 2010
BORDERS FOR WIRE FRAMING
Applying simple borders to your divisions and other key elements is a brilliant way of creating a wire frame.
Wire framing a design with a thin solid or dashed line around your divs can help you understand how one
element relates to another, and also identify problems with alignment and juxtaposition.
You can apply a simple dashed line to all divs, for example, using a base selector for the <div> tag:
/* Place a thin gray border around all divisions */
div {
border: 1px dashed #CCC;
}
This rule would be placed immediately after the body selector in the style sheet, and would ensure all
divs you create inherit a thin gray border, unless you specify otherwise in that element’s rule. To apply this rule
to further base elements, simply group the selectors together:
/* Place a thin gray border around the following elements */
div, h1, h2, h3, h4, ul {
border: 1px dashed #CCC;
}
When you are satisfied that your design is hanging together correctly, just remove the relevant selectors
or the entire rule.
Wire framing a design with a thin solid or dashed line around your divs can help you understand how one
element relates to another, and also identify problems with alignment and juxtaposition.
You can apply a simple dashed line to all divs, for example, using a base selector for the <div> tag:
/* Place a thin gray border around all divisions */
div {
border: 1px dashed #CCC;
}
This rule would be placed immediately after the body selector in the style sheet, and would ensure all
divs you create inherit a thin gray border, unless you specify otherwise in that element’s rule. To apply this rule
to further base elements, simply group the selectors together:
/* Place a thin gray border around the following elements */
div, h1, h2, h3, h4, ul {
border: 1px dashed #CCC;
}
When you are satisfied that your design is hanging together correctly, just remove the relevant selectors
or the entire rule.
border Setting Four Borders in one
Using border and the border-top, border-right, border-bottom, and border-left properties
allows you to further shorten the given border-style and border-width and border-color
values into one property. Let’s look at an example of this shorthand.
Using the CSS from the previous example, again the same border-color, border-style,
and border-width values are assigned in that order:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-top: #000 thin dashed;
border-right: #999 20px dotted;
border-bottom: #333 medium solid;
border-left: #CCC thick ridge;
}
which gives us the same results, but with just four properties in the rule. If all values were to be
the same, the properties can be further combined into one using border:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border: #000 thin dashed;
}
allows you to further shorten the given border-style and border-width and border-color
values into one property. Let’s look at an example of this shorthand.
Using the CSS from the previous example, again the same border-color, border-style,
and border-width values are assigned in that order:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-top: #000 thin dashed;
border-right: #999 20px dotted;
border-bottom: #333 medium solid;
border-left: #CCC thick ridge;
}
which gives us the same results, but with just four properties in the rule. If all values were to be
the same, the properties can be further combined into one using border:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border: #000 thin dashed;
}
Css Tutorial : border-color
Remember that, unless you declare the color for the border, it will inherit color from the
element or parent element. As there is only one property for color (border-color), multiple
colors must be declared using shorthand:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
border-top-width: thin;
border-right-width: 20px;
border-bottom-width: medium;
border-left-width: thick;
border-color: #000 #999 #333 #CCC;
}
which gives us borders from black (top) to lightest gray (left)
element or parent element. As there is only one property for color (border-color), multiple
colors must be declared using shorthand:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
border-top-width: thin;
border-right-width: 20px;
border-bottom-width: medium;
border-left-width: thick;
border-color: #000 #999 #333 #CCC;
}
which gives us borders from black (top) to lightest gray (left)
Css Tutorial : border-width
border-width
More specifically, in this section we will look at border-width, border-top-width, border-rightwidth,
border-bottom-width, and border-left-width. These properties allow you to define the
width of the element’s edges one by one or all at once. Note that for a border-width value to be
applied, a border-style must first be declared.
Several keyword values are available here, as well as relative lengths. The keywords are
thin, medium, and thick, although caution is required as different browsers render these borders
More specifically, in this section we will look at border-width, border-top-width, border-rightwidth,
border-bottom-width, and border-left-width. These properties allow you to define the
width of the element’s edges one by one or all at once. Note that for a border-width value to be
applied, a border-style must first be declared.
Several keyword values are available here, as well as relative lengths. The keywords are
thin, medium, and thick, although caution is required as different browsers render these borders
in various ways. Exactly how many pixels each browser will use does vary. Note that if you
define a border-style but not a border-width, the default value is medium.
In the following example, the border-style values declared previously are combined with
specific border-width keywords and relative values:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
border-top-width: thin;
border-right-width: 20px;
border-bottom-width: medium;
border-left-width: thick;
}
define a border-style but not a border-width, the default value is medium.
In the following example, the border-style values declared previously are combined with
specific border-width keywords and relative values:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
border-top-width: thin;
border-right-width: 20px;
border-bottom-width: medium;
border-left-width: thick;
}
Css Tutorial : border-style
The border-style property is used to give any element a border. The browser must first understand
the style of border to be drawn before moving on to further border declarations. In other
words, the style keyword is declared before the color of the border, for instance.
The property applies a defined style to one, several, or all borders. Keywords for border-style
are none, dotted, dashed, solid, double, groove, ridge, inset, and outset.
the style of border to be drawn before moving on to further border declarations. In other
words, the style keyword is declared before the color of the border, for instance.
The property applies a defined style to one, several, or all borders. Keywords for border-style
are none, dotted, dashed, solid, double, groove, ridge, inset, and outset.
**■Note: Some elements have default borders. The fieldset element (used to define a series of related
form inputs) has a medium-thickness border by default. Also watch out for images used for hyperlinks, where
the image will have a border matching the declared link text color for the containing element. The borders for
both can be styled or removed using border-style. In the case of all other elements, you define your border
styles from scratch.
form inputs) has a medium-thickness border by default. Also watch out for images used for hyperlinks, where
the image will have a border matching the declared link text color for the containing element. The borders for
both can be styled or removed using border-style. In the case of all other elements, you define your border
styles from scratch.
The following CSS styles a container with a medium-thickness dashed border all around
the division:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed;
}
the division:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed;
}
Taking this further, a unique style for each side can be defined using shorthand for the
border-style property; as with margin and padding, the values are ordered top, right, bottom,
and left:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
}
border-style property; as with margin and padding, the values are ordered top, right, bottom,
and left:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
}
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.
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.
Margin, Padding, and the Body in Css
Back to good old browser default style sheets again. In order to ensure your page content sits
exactly as you desire on all browsers and doesn’t inherit browser defaults, it is important to
consider resetting the page margin and padding in the body selector.
Netscape and IE place a default margin of 8px around the <body> element. The Opera browser
confuses things further by applying a default padding of 8px. Therefore, until all browsers agree
and can settle on either margin or padding to provide this default spacing, it is recommended
that margin and padding be given the values you desire in the body selector:
/* Define default values for the whole site */
body {
margin: 0;
padding: 0;
}
Obviously values of 0 will remove the default spacing entirely, so it may be that you prefer
to set the margin to 10px, 20px, or whatever you need.
Other methods are available that will reset all margins and padding to a defined value that
is inherited throughout unless you declare otherwise. Such methods should be used with caution however, as all headings, paragraphs, lists, and so on will also inherit the value, and if the value
is 0, you might end up in trouble, with all of your page elements bunched together. This would
then require margin and/or padding values to be declared for all headings, paragraphs, and other
elements that typically have sensible default spacing values.
exactly as you desire on all browsers and doesn’t inherit browser defaults, it is important to
consider resetting the page margin and padding in the body selector.
Netscape and IE place a default margin of 8px around the <body> element. The Opera browser
confuses things further by applying a default padding of 8px. Therefore, until all browsers agree
and can settle on either margin or padding to provide this default spacing, it is recommended
that margin and padding be given the values you desire in the body selector:
/* Define default values for the whole site */
body {
margin: 0;
padding: 0;
}
Obviously values of 0 will remove the default spacing entirely, so it may be that you prefer
to set the margin to 10px, 20px, or whatever you need.
Other methods are available that will reset all margins and padding to a defined value that
is inherited throughout unless you declare otherwise. Such methods should be used with caution however, as all headings, paragraphs, lists, and so on will also inherit the value, and if the value
is 0, you might end up in trouble, with all of your page elements bunched together. This would
then require margin and/or padding values to be declared for all headings, paragraphs, and other
elements that typically have sensible default spacing values.
Padding Shortcuts in Css
The same shortcuts used for margin values are also available for padding.
/* Basic container */
#container {
padding: 20px 1em 0 10%;
}
As with the margin property, order is top (20px), right (1em), bottom (0), and right (10px).
Likewise, if all four values are the same, the padding declaration can also be shortened like so:
/* Basic container */
#container {
padding: 20px;
}
/* Basic container */
#container {
padding: 20px 1em 0 10%;
}
As with the margin property, order is top (20px), right (1em), bottom (0), and right (10px).
Likewise, if all four values are the same, the padding declaration can also be shortened like so:
/* Basic container */
#container {
padding: 20px;
}
Padding : Padding Declarations in Css
Padding
Padding is the distance between the edges (borders) of an (X)HTML element and the content
within it, and can be applied to any element.
Padding Declarations
Both length and percentage values are available, although there is no auto value, and negative
values cannot be declared for padding.
Let’s take the container div again, and this time add custom padding to each side:
/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding-top: 20px;
padding-left: 10%;
padding-right: 1em;
padding-bottom: 0;
background: #CCC;
}
Figure 3-7 shows how the paragraph within the container (highlighted by a thin border) is
spaced away from each edge by the given padding value.Percentage in this case refers directly to the parent element’s width. So if padding-left:
10% is declared, that equates to 10% of the parent element’s given width.
values cannot be declared for padding.
Let’s take the container div again, and this time add custom padding to each side:
/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding-top: 20px;
padding-left: 10%;
padding-right: 1em;
padding-bottom: 0;
background: #CCC;
}
Figure 3-7 shows how the paragraph within the container (highlighted by a thin border) is
spaced away from each edge by the given padding value.Percentage in this case refers directly to the parent element’s width. So if padding-left:
10% is declared, that equates to 10% of the parent element’s given width.
Css tutorial : Centering with margin: auto
The best way to center an element with CSS is to use the auto value for left and right margins.
For modern browsers, all this requires is a set width rule (as without it the box would naturally
stretch to fit its container—in this case the browser window) and the left and right margins
given the auto value. Building upon the earlier example, we have the following rule:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
Most browsers are happy with this, although IE5/Win fails miserably, usually aligning the
element to the left. At the time of writing, most IE users are using IE6, and IE7 is on the way, but
the percentage of IE5 users is significant enough to warrant consideration.
There is a way of making it work for IE5/Win, and it’s quite simple. The trick is to make use
of the text-align property in the container’s parent element (in this case that is the <body>) to
center the container. The downside is that all child elements within <body> will now correctly
inherit that value and center all their content, which isn’t good. Therefore text-align: left is
applied to all main division elements to counter the centering:
/* Define default values for the whole site */
body {
text-align: center;
}
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px; border: 1px solid #000;
background: #CCC;
text-align: left;
}
This approach ensures that the container is centered horizontally in the browser window
whatever browser is used, and acts as the perfect basis for any centered design (see Figure 3-6).
For modern browsers, all this requires is a set width rule (as without it the box would naturally
stretch to fit its container—in this case the browser window) and the left and right margins
given the auto value. Building upon the earlier example, we have the following rule:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
Most browsers are happy with this, although IE5/Win fails miserably, usually aligning the
element to the left. At the time of writing, most IE users are using IE6, and IE7 is on the way, but
the percentage of IE5 users is significant enough to warrant consideration.
There is a way of making it work for IE5/Win, and it’s quite simple. The trick is to make use
of the text-align property in the container’s parent element (in this case that is the <body>) to
center the container. The downside is that all child elements within <body> will now correctly
inherit that value and center all their content, which isn’t good. Therefore text-align: left is
applied to all main division elements to counter the centering:
/* Define default values for the whole site */
body {
text-align: center;
}
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px; border: 1px solid #000;
background: #CCC;
text-align: left;
}
This approach ensures that the container is centered horizontally in the browser window
whatever browser is used, and acts as the perfect basis for any centered design (see Figure 3-6).
Css Tutorial : Margin Shortcuts
A couple of easy shortcuts are available to reduce up to four margin:value declarations into one.
/* Basic container */
#container {
margin: 20px auto 1em auto;
}
The order of the values is very important here. The order is top (20px), right (auto), bottom
(1em), and right (auto). It helps to get used to the order by thinking of it like a compass—north,
east, south, and west, the first value always being north, or like a clock—12 o’clock, 3 o’clock,
6 o’clock, and 9 o’clock, the first value being 12 o’clock.
If all four values are the same, the declaration can be shortened even further:
/* Basic container */
#container {
margin: 20px;
}
These shortcuts will also work for padding and some other properties, which you’ll find out
more about later.
/* Basic container */
#container {
margin: 20px auto 1em auto;
}
The order of the values is very important here. The order is top (20px), right (auto), bottom
(1em), and right (auto). It helps to get used to the order by thinking of it like a compass—north,
east, south, and west, the first value always being north, or like a clock—12 o’clock, 3 o’clock,
6 o’clock, and 9 o’clock, the first value being 12 o’clock.
If all four values are the same, the declaration can be shortened even further:
/* Basic container */
#container {
margin: 20px;
}
These shortcuts will also work for padding and some other properties, which you’ll find out
more about later.
Css Tutorial : Margin Declarations
Margin
The margin property does exactly what it says on the tin. It is used to declare the margin between
an (X)HTML element and those elements outside of it. The margin can be set for the top, left,
right, and bottom of the given element. Note that margin values are not inherited from parent
elements. If they were, there would be chaos.
Margin Declarations
There are three choices of values for the margin property, which are length, percentage, or auto.
Note that if a value is 0, you do not need to add px.
Consider the following CSS for a container div. Note that it has a fixed width of 300px and
no margin properties.
/* Basic container */
#container {
width:300px;
border: 1px solid #000;
padding: 20px;
background: #CCC;
}
padding values declared in the <body> element.
/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding: 20px;
background: #CCC;
}
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding: 20px;
background: #CCC;
}
Dimensions: Width and Height in Css
Before moving on, it is worth mentioning two very important properties that can be declared
for any element—width and height.
It might seem a little patronizing to mention them, as their uses must seem obvious. However,
these two properties have already appeared in several examples, and will continue to be used
throughout the book.
Both properties are essential for setting specific heights and widths of elements. Consider
that an element will expand widthwise to fit its container and heightwise to encompass its
content—you will start to realize before long that, in some situations, a certain amount of
control is missing. By applying width and/or height rules, you can regain control.
Values can be given as a length, percentage, or auto. Note that all of these values can be
influenced adversely by other rules within the style sheet, and also by the (X)HTML elements
they might contain. For example, the resulting display can be affected by a number of knockon
values from margin, padding, border, or child elements.
for any element—width and height.
It might seem a little patronizing to mention them, as their uses must seem obvious. However,
these two properties have already appeared in several examples, and will continue to be used
throughout the book.
Both properties are essential for setting specific heights and widths of elements. Consider
that an element will expand widthwise to fit its container and heightwise to encompass its
content—you will start to realize before long that, in some situations, a certain amount of
control is missing. By applying width and/or height rules, you can regain control.
Values can be given as a length, percentage, or auto. Note that all of these values can be
influenced adversely by other rules within the style sheet, and also by the (X)HTML elements
they might contain. For example, the resulting display can be affected by a number of knockon
values from margin, padding, border, or child elements.
Divs and Contextual Selectors
There are two ways to target those particular paragraphs, the first of which will be familiar
from Chapter 2. Now that divs have been introduced, however, it is no longer the best way.
The Bad Way
Knowing what you already know, it’s tempting to create a new class for turning the paragraphs
red, as follows:
/* Make text red */
.highlight {
color: #F00;
}
Then in the (X)HTML, the identifiers for our highlight class would need to be added like
so:
<div id="container">
<p>This is our content area.</p>
<div class="box">
<p class="highlight">I'm in a box!</p>
</div>
<div class="box">
<p class="highlight">I'm also in a box!</p>
</div>
</div>
The paragraphs will certainly be red now, but it’s taken extra markup for each opening
paragraph tag to accomplish the effect. This extra markup would be required for every paragraph
within the div, which is only serving to bloat the markup.
The Good Way
This time, the identifiers are not required. In fact, no changes need be made to the (X)HTML at
all. Everything can be controlled within the style sheet. Time to put the paragraphs into context
with the following combination:
/* Make text red only for paragraphs within the box class */
.box p {
color: #F00;
}
Using this approach, no extra markup is required. Everything needed to take complete
control of the paragraphs is already in place. The contextual selector is constructed to show
that the rule will only have an effect when the last selector (p) is a direct descendent (the child)
of the first selector (.box). This is a strong example of how major changes to whole sections can
be achieved simply by working with what you already have.
Another contextual selector could then be used to control paragraphs in the parent
element (the container div).
/* Make text gray only for paragraphs within the container */
#container p {
color: #333;
}
Now paragraphs inside the container will be rendered dark gray, unless contained by .box, in
which case they will be red.
Taking the Context Even Further
Let’s now assume that you are using the box class all over the site. Sometimes the box classes
are children of the container div, and sometimes they have a different parent. What if you only
want the paragraph text to appear bold when the box class is inside the container? This can be
achieved without extra markup also. Note that, outside of the container div, a new box div has
been added, which is not parented by anything:
<div id="container">
Content
<div class="box">
<p>I'm in a box!</p>
</div>
<div class="box">
<p>I'm also in a box!</p>
</div>
</div>
<div class="box">
<p>I'm also in a box!</p>
</div>
As for the amazing CSS, the contextual selector consists of three selectors, putting the
paragraphs into a more specific context.
/* Make text bold only for paragraphs within the box class AND within the ➥
container */
#container .box p {
font-weight:bold;
}
This contextual selector is very powerful. The first thing to note is that the markup is very
clean. Yes, division elements exist to separate the content, but no identifiers are required for
any base elements. The effect of the contextual selector is threefold:
from Chapter 2. Now that divs have been introduced, however, it is no longer the best way.
The Bad Way
Knowing what you already know, it’s tempting to create a new class for turning the paragraphs
red, as follows:
/* Make text red */
.highlight {
color: #F00;
}
Then in the (X)HTML, the identifiers for our highlight class would need to be added like
so:
<div id="container">
<p>This is our content area.</p>
<div class="box">
<p class="highlight">I'm in a box!</p>
</div>
<div class="box">
<p class="highlight">I'm also in a box!</p>
</div>
</div>
The paragraphs will certainly be red now, but it’s taken extra markup for each opening
paragraph tag to accomplish the effect. This extra markup would be required for every paragraph
within the div, which is only serving to bloat the markup.
The Good Way
This time, the identifiers are not required. In fact, no changes need be made to the (X)HTML at
all. Everything can be controlled within the style sheet. Time to put the paragraphs into context
with the following combination:
/* Make text red only for paragraphs within the box class */
.box p {
color: #F00;
}
Using this approach, no extra markup is required. Everything needed to take complete
control of the paragraphs is already in place. The contextual selector is constructed to show
that the rule will only have an effect when the last selector (p) is a direct descendent (the child)
of the first selector (.box). This is a strong example of how major changes to whole sections can
be achieved simply by working with what you already have.
Another contextual selector could then be used to control paragraphs in the parent
element (the container div).
/* Make text gray only for paragraphs within the container */
#container p {
color: #333;
}
Now paragraphs inside the container will be rendered dark gray, unless contained by .box, in
which case they will be red.
Taking the Context Even Further
Let’s now assume that you are using the box class all over the site. Sometimes the box classes
are children of the container div, and sometimes they have a different parent. What if you only
want the paragraph text to appear bold when the box class is inside the container? This can be
achieved without extra markup also. Note that, outside of the container div, a new box div has
been added, which is not parented by anything:
<div id="container">
Content
<div class="box">
<p>I'm in a box!</p>
</div>
<div class="box">
<p>I'm also in a box!</p>
</div>
</div>
<div class="box">
<p>I'm also in a box!</p>
</div>
As for the amazing CSS, the contextual selector consists of three selectors, putting the
paragraphs into a more specific context.
/* Make text bold only for paragraphs within the box class AND within the ➥
container */
#container .box p {
font-weight:bold;
}
This contextual selector is very powerful. The first thing to note is that the markup is very
clean. Yes, division elements exist to separate the content, but no identifiers are required for
any base elements. The effect of the contextual selector is threefold:
Css Tutorial : Adding Child Divs
The container div can act as parent to child divs. Here, an ID holds a reusable class called box:
<div id="container">
<p>This is our content area.</p>
<div class="box">
<p>I'm in a box!</p>
</div>
<div class="box">
<p>I'm also in a box!</p>
</div>
</div>
The CSS rules for the box class are almost the same as that for the parent container, except
for the background color, which will appear by default. Note that, as no set width is defined for
the box, it will stretch to fit whatever contains it, be that another div or the browser window:
/* Define styling of our reusable box */
.box {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
<div id="container">
<p>This is our content area.</p>
<div class="box">
<p>I'm in a box!</p>
</div>
<div class="box">
<p>I'm also in a box!</p>
</div>
</div>
The CSS rules for the box class are almost the same as that for the parent container, except
for the background color, which will appear by default. Note that, as no set width is defined for
the box, it will stretch to fit whatever contains it, be that another div or the browser window:
/* Define styling of our reusable box */
.box {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
Css Tutorial : Adding a Div
You create a division element within the (X)HTML by placing the following in the body:
<div>
<p>This is our content area.</p>
</div>
The result is a hook to which CSS can be applied. In Chapter 2, you learned about using IDs
and classes to add identifiers to a standard (X)HTML element. The same formula is used for
divs by referencing the selector in the opening tag using id="name" or class="name". In this
case, we’ve used an ID named container to define the division:
<div id="container">
<p>This is our content area.</p>
</div>
Let’s apply some simple CSS to the container ID:
/* Container holds all visible page elements */
#container {
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
With this CSS applied to our markup, the container will have a gray background with a
black border, and any elements it contains will be padded 20px from that border, as you can see
in Figure 3-1.
<div>
<p>This is our content area.</p>
</div>
The result is a hook to which CSS can be applied. In Chapter 2, you learned about using IDs
and classes to add identifiers to a standard (X)HTML element. The same formula is used for
divs by referencing the selector in the opening tag using id="name" or class="name". In this
case, we’ve used an ID named container to define the division:
<div id="container">
<p>This is our content area.</p>
</div>
Let’s apply some simple CSS to the container ID:
/* Container holds all visible page elements */
#container {
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
With this CSS applied to our markup, the container will have a gray background with a
black border, and any elements it contains will be padded 20px from that border, as you can see
in Figure 3-1.
Divisions (Divs) in Css
Divisions—<div> elements, widely referred to as divs—are (X)HTML elements used to define
areas of an (X)HTML file. A division can, if you choose, encompass everything else within the
<body> of the page, be it additional elements, text, graphics—anything in fact, or more typically
be used for distinct areas such as headers, footers, navigation bars, and so on.
Most often, the (X)HTML in your templates does not provide enough hooks upon which to
hang your styles. For example, you know how to apply basic styling to a paragraph or header,
but turn paragraphs or headers into boxes, and you’ll find it impossible to enclose other (X)HTML
elements inside the box without compromising your code and causing extreme complications.
This is where divisions (I’ll refer to them mostly as divs from now on) are most useful—
invaluable in fact. Using divs is not unlike magically inventing your own (X)HTML tags, whenever
and wherever you need them.
areas of an (X)HTML file. A division can, if you choose, encompass everything else within the
<body> of the page, be it additional elements, text, graphics—anything in fact, or more typically
be used for distinct areas such as headers, footers, navigation bars, and so on.
Most often, the (X)HTML in your templates does not provide enough hooks upon which to
hang your styles. For example, you know how to apply basic styling to a paragraph or header,
but turn paragraphs or headers into boxes, and you’ll find it impossible to enclose other (X)HTML
elements inside the box without compromising your code and causing extreme complications.
This is where divisions (I’ll refer to them mostly as divs from now on) are most useful—
invaluable in fact. Using divs is not unlike magically inventing your own (X)HTML tags, whenever
and wherever you need them.
CSS Measurements
CSS rules can be declared to control text height, text spacing, border widths, spacing between
any element and its neighbor—pretty much any necessary measurement you need.
One of the strengths of a CSS-based design is its ability to remain flexible. As a designer,
you want your finely crafted masterpieces to look the same for every end user, and the desire to
pin elements down with exact measurements can be very tempting. On the flip side, most web
designers are aware of the inherent flexibility of the Web as a viewing platform, and are keen to
explore methods of customization and ensure their creations are viewed in the best context for
the end user.
Two options of measurement are available—absolute and relative. The former seeks to
freeze a design, ensuring widths, heights, and so on are not adjusted no matter how the site is
viewed. The latter enables web pages to be manipulated by the user or viewing device. So long
as web designers apply a measure of control in their style sheets, relative measurements can
actually do a much better job of tightening the design while also making it bulletproof in
display terms.
any element and its neighbor—pretty much any necessary measurement you need.
One of the strengths of a CSS-based design is its ability to remain flexible. As a designer,
you want your finely crafted masterpieces to look the same for every end user, and the desire to
pin elements down with exact measurements can be very tempting. On the flip side, most web
designers are aware of the inherent flexibility of the Web as a viewing platform, and are keen to
explore methods of customization and ensure their creations are viewed in the best context for
the end user.
Two options of measurement are available—absolute and relative. The former seeks to
freeze a design, ensuring widths, heights, and so on are not adjusted no matter how the site is
viewed. The latter enables web pages to be manipulated by the user or viewing device. So long
as web designers apply a measure of control in their style sheets, relative measurements can
actually do a much better job of tightening the design while also making it bulletproof in
display terms.
Absolute Measurements
Absolute values have a fixed, specific measurement. They let you be exact in your measurements
and control the display of your web pages. Absolute values are inches (in), centimeters
(cm), millimeters (mm), points (pt), and picas (pc) as Table 2-1 describes.
Unit Description
in Absolute measurement in inches.
cm Absolute measurement in centimeters.
mm Absolute measurement in millimeters.
pt Absolute measurement in points. A point is 11/72 of an inch.
pc Absolute measurement in picas. A pica is equivalent to 12 points, or 6 of an inch.
in Absolute measurement in inches.
cm Absolute measurement in centimeters.
mm Absolute measurement in millimeters.
pt Absolute measurement in points. A point is 11/72 of an inch.
pc Absolute measurement in picas. A pica is equivalent to 12 points, or 6 of an inch.
Absolute measurements will only give the desired results if the browser knows how many
pixels are on the screen and how big the screen is. Often, this is not the case. Not all computers
know how big the screen is, as not all screens tell the computer how big they are. In these cases,
the browser must make a guess.
It is my pleasure to inform you that for almost all day-to-day CSS design, no absolute
measurements are needed, and to keep things on course, we can skip straight to the much
more interesting relative measurements.
the browser must make a guess.
It is my pleasure to inform you that for almost all day-to-day CSS design, no absolute
measurements are needed, and to keep things on course, we can skip straight to the much
more interesting relative measurements.
Relative Measurements
Relative measurements have no fixed, specific value. Instead, they are calculated in comparison
to an inherited value. Relative values are percentage (%), x-height (ex), ems (em), and pixels
(px), as Table 2-2 describes.
Unit Description
% Measurement as a percentage relative to another value
ex Measurement relative to a font’s x-height, determined by the height of the font’s lowercase letter x
em Relative measurement for the height of a font in em spaces
px Relative measurement in screen pixels
% Measurement as a percentage relative to another value
ex Measurement relative to a font’s x-height, determined by the height of the font’s lowercase letter x
em Relative measurement for the height of a font in em spaces
px Relative measurement in screen pixels
Why Use Only Relative Measurements?
Your web sites will be viewed primarily on computer screens, but at what screen resolution and
on which browser? Some end users will view your site on PDAs, cell phones, projectors, or even
televisions.
Each end device has its own quirks and unique methods of display. Consider also that many
users manually configure their devices to suit their own preferences (think screen resolutions), so
it’s imperative that your design is not compromised in such situations.
A very important issue in web design is accessibility—ensuring all visitors can access all of
your content. Relative measurements are proven to provide the best solution for text resizing
and the knock-on effect this has on other page elements, and can therefore be considered best
practice.
While relative values give the designer less absolute control, they do create a better experience
for the end user. Let’s look at the primary relative measurements one by one, and consider
how they apply to text size.
Pixels
Pixel measurements give designers the most control over their layouts. By far the most consistent
unit of measurement, pixels are most commonly used for declaring the margin, padding,
borders, height, and width of custom elements such as containers, columns, and buttons, and can
be successfully combined with other relative measurements for all kinds of layout requirements.
Pixels are not, however, the best option for sizing text—text sized with pixels will ignore
user preferences, so if a low-vision user has set his or her browser to always show text at 20 pixels,
this will often be overridden by your pixel-based declarations.
Pixel-sized text offers consistency across most end devices. However your pages are viewed,
and at whatever resolution, 11px text should always scale appropriately with text set at other
pixel sizes. Thus in an ideal world, we could all use pixels without worry, safe in the knowledge
that our designs will retain their integrity on any platform and in any situation. Sadly, it isn’t an
ideal world, as there is a rather popular browser called Internet Explorer to consider.
user preferences, so if a low-vision user has set his or her browser to always show text at 20 pixels,
this will often be overridden by your pixel-based declarations.
Pixel-sized text offers consistency across most end devices. However your pages are viewed,
and at whatever resolution, 11px text should always scale appropriately with text set at other
pixel sizes. Thus in an ideal world, we could all use pixels without worry, safe in the knowledge
that our designs will retain their integrity on any platform and in any situation. Sadly, it isn’t an
ideal world, as there is a rather popular browser called Internet Explorer to consider.
Consider IE/Win Users
It is very important to consider the fact that an IE/Win user cannot use the browser’s text resizing
tools to resize pixel-sized text. An option is to use a style switcher, which gives users an on-page
option of adjusting viewing preferences. It is preferable to do this with PHP or similar languages.
JavaScript-based style switcher scripts are available and make switching seem seamless, but it
is always important to consider users who have JavaScript switched off. A brilliant example can
be found in Chris Clark’s “Build a PHP Switcher” article at the super-useful A List Apart web site
(www.alistapart.com/articles/phpswitch). Another important factor with style switchers is
that many users might miss the option, or fail to understand the point of it.
To ensure all end users can enforce their own viewing preferences upon your design, it is
strongly suggested that you declare font size using the em measurement (examples of which
follow throughout the “Ems” section).
Percentage
Providing incredible flexibility and often the solution to adventurous layouts is the percentage
measurement. Percentage values are always relative to another value, such as a width or height
declared in the parent element. In other words, a percentage can only be declared in relation
to a defined size earlier in that rule, within a parent element, or based on the width of the
browser window.
Percentage is particularly powerful for layout, and is an integral ingredient of liquid designs
where pages and their elements stretch to fit the browser window. You can learn more about
that aspect of percentage in Part 2 of this book.
Caution must be applied with percentage values, where inheritance can cause chaos.
While pixels and ems retain a modicum of control, the results of percentage values can end up
somewhat different than what you might expect when calculated by the browser, and as a
result layouts can be chewed and elements misplaced or shunted underneath each other.
Example
Here the percentage value is given for line-height, used to control the distance between the
lines of text, and relates directly to the font-size value within the rule.
/* Define default paragraph values */
p {
font-size:10px;
line-height:120%;
}
In this case, line-height will be applied to the text as a pixel value that is 120% of 10px, which
gives a line height of 12px.
Ems
It is a great shame that the humble em is the most misunderstood unit of relative measurement
in CSS, as it is by far the most flexible, and is ideally suited to a design principle where the end
user’s viewing device and text preferences are unpredictable.
The origin of the word itself is useful, for it stems from the idea of an em roughly equaling
the size of an uppercase letter M, hence it is pronounced “emm.” However, in reality an em is
actually larger than that. The em is a traditional typographic measurement, though because some
fonts don’t even have an M in them, the term has come to mean the height of the given font.
The thing about ems is that they make your style sheets scalable. Unlike the traditional,
typographic em, the CSS measurement can be employed to define the lengths (and by “length”
I mean both horizontal and vertical) of almost any CSS property. This makes it especially powerful
when applied to fonts and their containing elements. Resize the text with the browser tools,
and the containing element (be it a column, header, or more immediate container) can scale
with it. Reduce that text, and the scaling works the other way too. Remember that IE/Win will
not allow users to resize text that has been sized in pixels.
So How Do Ems Scale?
Well, an em is a measurement equal to the size of the type. Therefore, if within a given element
the font-size is set to 11 pixels, one em is equal to 11 pixels. If the font-size in another element
is 30 pixels, one em in that element is equal to 30 pixels, and so on. Thus 1em can have many
different values within one style sheet. The key to successful em usage is an understanding of a
given em’s relative status.
Richard Rutter (www.clagnut.com) explains this methodology with a similar example to the
following. Two rules for basic containers are identical except for the font-size, which is 11px
and 30px,respectively. Both rules have a width and height of 1em. A black border is added to
illustrate the extent of each container.
/* First container for the em example */
#firstbox {
margin:10px;
font-size:11px;
width:1em;
height:1em;
border:1px solid black;
}
/* Second container for the em example */
#secondbox {
margin:10px;
font-size:30px;
width:1em;
height:1em;
border:1px solid black;
}
Although both boxes have a height and width of 1em, the two different font sizes make one
box larger than the other. The first box is 11px × 11px, and 1em × 1em. The second box is 30px × 30px
but is still 1em × 1em.
Thus each resulting em measurement is relative to whatever contains it. Further rules
within #firstbox would be free to define measurements based on the em, knowing that it is
equal to 11px. For example, paragraphs that are children of #firstbox could be defined with a
value of 0.8em, making the paragraph text t the size of that container’s default text.
Work outside of #firstbox and em is reset to its default, unless you are working within
#secondbox, where em has been defined as 30px.
box larger than the other. The first box is 11px × 11px, and 1em × 1em. The second box is 30px × 30px
but is still 1em × 1em.
Thus each resulting em measurement is relative to whatever contains it. Further rules
within #firstbox would be free to define measurements based on the em, knowing that it is
equal to 11px. For example, paragraphs that are children of #firstbox could be defined with a
value of 0.8em, making the paragraph text t the size of that container’s default text.
Work outside of #firstbox and em is reset to its default, unless you are working within
#secondbox, where em has been defined as 30px.
**■Tip 1em displays at the default size for a font character as it appears within an (X)HTML element where
the user agent assigns the default display. Therefore, text styled with a font-size of 1em will display as if
no size declarations were assigned.
Ems and the Body
For most designers, the default font size is often way too big. The usual font-size defined by
the browser style sheet is 16px (which means 1em is of course equal to 16px). That’s a very accessible
size indeed, but most designers (and users) seem to prefer 11px.
You now know from the containers example in the previous section that the em measurement
is relative to the containing element. Earlier in the chapter, we looked at how all page
elements can inherit from the <body> element, as it contains all visual page elements. Therefore
<body> is the ideal place to make your em declaration in order for all child elements in the tree
to inherit that value.
Defining a font-size smaller than 1em for body text is a good starting point for em-based
design. Let’s say that you want your default text to be 11px. The following rule would ensure
your text generally renders at that size:
/* Define all main values for the web site */
body {
font-family:Helvetica,Arial,sans-serif;
font-size:0.7em;
color:#000;
}
So if no other measurements are added to the style sheet, all default text will be 0.7em or
approximately 11px. However, this also means that in Mozilla-based browsers all headings
(<h1> through <h6>), paragraphs, lists, and so on will also be t their default size (other browsers
will stay with the defaults). Also, IE/Win will show form and table text at t the default size.
Therefore, these elements need their font size to be declared in the corresponding rules.
/* Define all main values for the web site */
body {
font-family:Helvetica,Arial,sans-serif;
font-size:0.8em;
color:#000;
}
/* Define paragraph text size */
p {
font-size:1.1em;
}
/* Define headings font sizes */
h1 {
font-size:2em;
}
h2 {
font-size:1.8em;
}
h3 {
font-size:1.7em;
}
...
/* Define form and table font-size */
input, select, th, td {
font-size:1.1em;
}
Thus all appropriate page elements have font-size defined based upon the font-size
declaration in body. All page text is now scalable on any browser and will scale proportionately
at any setting.
body {
font-family:Helvetica,Arial,sans-serif;
font-size:0.7em;
color:#000;
}
So if no other measurements are added to the style sheet, all default text will be 0.7em or
approximately 11px. However, this also means that in Mozilla-based browsers all headings
(<h1> through <h6>), paragraphs, lists, and so on will also be t their default size (other browsers
will stay with the defaults). Also, IE/Win will show form and table text at t the default size.
Therefore, these elements need their font size to be declared in the corresponding rules.
/* Define all main values for the web site */
body {
font-family:Helvetica,Arial,sans-serif;
font-size:0.8em;
color:#000;
}
/* Define paragraph text size */
p {
font-size:1.1em;
}
/* Define headings font sizes */
h1 {
font-size:2em;
}
h2 {
font-size:1.8em;
}
h3 {
font-size:1.7em;
}
...
/* Define form and table font-size */
input, select, th, td {
font-size:1.1em;
}
Thus all appropriate page elements have font-size defined based upon the font-size
declaration in body. All page text is now scalable on any browser and will scale proportionately
at any setting.
BASING EM SIZES ON AN INITIAL PERCENTAGE DECLARATION
Richard Rutter suggests another method for resizing based on an initial font-size using percentage in his
article “How to Size Text Using Ems” (www.clagnut.com/blog/348/), whereby all em values can be easily
related to a specific pixel size.
Richard first declares font-size: 62.5% in the body selector (possible because although no previous
measurements are defined in the style sheet, the default value of the browser style sheet is cascading into it),
which effectively takes the default font-size down from 16px to 10px. It is then simple to think in terms of
pixels, but declare sizes in ems. Based on this setting, Richard suggests some correlating values between em
and pixel sizes:
• {font-size:2em} /* Displayed at 24px */
• {font-size:1.5em} /* Displayed at 18px */
• {font-size:1.25em} /* Displayed at 15px */
• {font-size:1em} /* Displayed at 12px */
This example is another great starting point for designers wishing to make better use of ems. It features
some excellent methods for calculating sizes and further explores the relationships between parent and child
selectors with regard to ems. Essential reading.
Css Tutorial : Contextual Selectors
Now there’s a horribly scary term. In the previous section, a heading containing emphasized
text was used to illustrate basic inheritance. Remember that the em selector was added to ensure the
<em> element in the (X)HTML would be rendered with red text. Here’s the CSS again:
/* Top-level heading */
h1 {
color:#333;
}
/* Make emphasized text shine brightly */
em {
color:#F00;
}
The downside of this is that all emphasized text across the whole web site would also
become red, regardless of its parent element. Assuming the rule is only meant to target the <em>
element when a child of <h1> headings, a simple adjustment can be made to put the emphasized
text into context:
/* Make emphasized text shine brightly ONLY when it’s the child of an h1 heading */
h1 em {
color:#F00;
}
Contextual selectors consist of two or more simple selectors separated by whitespace.
Here the contextual selector is constructed to show that the rule will only have an effect when
the last selector (em) is a direct descendent (be it a child, grandchild, great grandchild, or so on)
of the first selector (h1). If the browser does not find an exact match (i.e., it only finds <em> elements
outside of <h1> elements), it will not apply the styles dictated by the contextual selector to them.
Here’s similar markup to the original example, but with a paragraph acting as the parent
to a second <em> element:
<h1>This is the greatest heading <em>in the world</em></h1>
<p>I'm sorry but it simply is <em>not</em>, you fool.</p>
The <em> element owned by the <h1> element will be red, whereas the one owned by the
paragraph will not—it will inherit the default font color. To control the style of any emphasized
text that is out of context, simply define a new selector for em with the values you desire, or
maybe create a new contextual selector with p as the parent to your em.
In Chapter 6, contextual selectors will be used to gain tight control of nested elements
such as hierarchical lists and other problematic situations.
text was used to illustrate basic inheritance. Remember that the em selector was added to ensure the
<em> element in the (X)HTML would be rendered with red text. Here’s the CSS again:
/* Top-level heading */
h1 {
color:#333;
}
/* Make emphasized text shine brightly */
em {
color:#F00;
}
The downside of this is that all emphasized text across the whole web site would also
become red, regardless of its parent element. Assuming the rule is only meant to target the <em>
element when a child of <h1> headings, a simple adjustment can be made to put the emphasized
text into context:
/* Make emphasized text shine brightly ONLY when it’s the child of an h1 heading */
h1 em {
color:#F00;
}
Contextual selectors consist of two or more simple selectors separated by whitespace.
Here the contextual selector is constructed to show that the rule will only have an effect when
the last selector (em) is a direct descendent (be it a child, grandchild, great grandchild, or so on)
of the first selector (h1). If the browser does not find an exact match (i.e., it only finds <em> elements
outside of <h1> elements), it will not apply the styles dictated by the contextual selector to them.
Here’s similar markup to the original example, but with a paragraph acting as the parent
to a second <em> element:
<h1>This is the greatest heading <em>in the world</em></h1>
<p>I'm sorry but it simply is <em>not</em>, you fool.</p>
The <em> element owned by the <h1> element will be red, whereas the one owned by the
paragraph will not—it will inherit the default font color. To control the style of any emphasized
text that is out of context, simply define a new selector for em with the values you desire, or
maybe create a new contextual selector with p as the parent to your em.
In Chapter 6, contextual selectors will be used to gain tight control of nested elements
such as hierarchical lists and other problematic situations.
Css Tutorial : Inheritance
Inheritance describes situations where (X)HTML elements inherit stylistic properties from a
parent element. By not declaring a particular CSS value for the child element, that child element
may in some circumstances inherit the CSS value given to the parent element. Where CSS
cascades, so (X)HTML inherits.
Inheritance is both a blessing and a curse, and is another very powerful methodology that
is often misunderstood. It can cause confusion across multiple style sheets—especially when
debugging your CSS, and is something to be aware of from the start. On the plus side, it can be
embraced to minimize the size of style sheets and markup, and enable wholesale changes to
many CSS rules with minimal work. Generally, inheritance is always happening to your (X)HTML
elements, and in most cases intervention is only necessary to control the inherited values for a
specific reason.
parent element. By not declaring a particular CSS value for the child element, that child element
may in some circumstances inherit the CSS value given to the parent element. Where CSS
cascades, so (X)HTML inherits.
Inheritance is both a blessing and a curse, and is another very powerful methodology that
is often misunderstood. It can cause confusion across multiple style sheets—especially when
debugging your CSS, and is something to be aware of from the start. On the plus side, it can be
embraced to minimize the size of style sheets and markup, and enable wholesale changes to
many CSS rules with minimal work. Generally, inheritance is always happening to your (X)HTML
elements, and in most cases intervention is only necessary to control the inherited values for a
specific reason.
Parents and Children
To understand inheritance, it pays to think of some (X)HTML elements as parents, and the
elements they contain as children. A parent owns a child, and passes what he or she knows
down to the child. In CSS, inheritance works in a similar way, except that it hands down style
values, and not advice about education or the opposite sex.
Moving through (X)HTML markup, it is clear that some child elements act as parents to
other child elements and so on, and thus a containment hierarchy develops. This containment
hierarchy is also referred to as the tree.
So How Does Inheritance Work?
To illustrate inheritance, let’s stay with headings. The <h1> heading in this example is styled
with the following very simple rule:
/* Top-level heading */
h1 {
color:#333;
}
The rule is pretty simple, and you are right to assume that the heading will be rendered
dark gray. Now let’s assume that in the (X)HTML the markup dictates that a few of the words
should be emphasized using <em>:
<h1>This is the greatest heading <em>in the world</em></h1>
At this stage, no CSS rule exists to manipulate the <em> element. Therefore, the text within
the <em> element will inherit the color from the h1 rule (its parent element) and will therefore
also be dark gray. To overrule this inherited color, simply define <em> in the style sheet:
/* Make emphasized text shine brightly */
em {
color:#F00;
}
Now all emphasized text sitewide will be rendered in red, and the element is no longer
inheriting its color from any parent element. Note that unless otherwise defined in your em
selector, other declarations will still be inherited. Thus, if you want just your emphasized text
to be twice the font-size it currently is, declare that specific font-size in your em rule. If you
defined this rule in the p rule, all the text would grow to twice the size.
dark gray. Now let’s assume that in the (X)HTML the markup dictates that a few of the words
should be emphasized using <em>:
<h1>This is the greatest heading <em>in the world</em></h1>
At this stage, no CSS rule exists to manipulate the <em> element. Therefore, the text within
the <em> element will inherit the color from the h1 rule (its parent element) and will therefore
also be dark gray. To overrule this inherited color, simply define <em> in the style sheet:
/* Make emphasized text shine brightly */
em {
color:#F00;
}
Now all emphasized text sitewide will be rendered in red, and the element is no longer
inheriting its color from any parent element. Note that unless otherwise defined in your em
selector, other declarations will still be inherited. Thus, if you want just your emphasized text
to be twice the font-size it currently is, declare that specific font-size in your em rule. If you
defined this rule in the p rule, all the text would grow to twice the size.
Inheriting the Body
It is strongly recommended that all serious CSS designs begin with a <body> element declaration in
the main style sheet. The <body> element is more than just a requirement of a well-formatted
(X)HTML page, it is also the parent of every visible element in your template (i.e., not those
within the <head>, which concern meta information and other items not displayed by the browser),
and every element can inherit from it.
<body>
<h1>Absolutely everything else!</h1>
<p>Yep, every visible element is contained within the body.</p>
<p>And so on.</p>
</body>
Therefore it makes sense to define all default CSS using body as the first selector in the first
style sheet. Later in the book, the body selector will be used to define key elements such as a
margin for the page, the background color or tiled image, the default font and font color, and
so on, as in this example:
/* Define all main values for the web site */
body {
margin:10px;
font-family:Helvetica,Arial,sans-serif;
background:#CCC;
color:#000;
}
As a result of these declarations, every other rule in the CSS will inherit the values unless
specified otherwise. So all headers, paragraphs, lists, and other elements will be rendered with
black text (color: #000) using the first available font from the suggested options on the end
user’s machine (font-family: Helvetica, Arial, sans-serif;) unless the selector for each
child element specifies otherwise, or that child element is housed inside a more immediate
parent (such as a column or container) that contradicts the inherited values from body.
Note that some style properties are not inherited from the parent element—the background
property being the main example. The child element does not actually inherit the light
gray background (background: #CCC;), but rather the parent element’s background appears by
default. In other words, the child element can be thought of as having the inherited font color,
but it should not be assumed that it has the same background color.
child element specifies otherwise, or that child element is housed inside a more immediate
parent (such as a column or container) that contradicts the inherited values from body.
Note that some style properties are not inherited from the parent element—the background
property being the main example. The child element does not actually inherit the light
gray background (background: #CCC;), but rather the parent element’s background appears by
default. In other words, the child element can be thought of as having the inherited font color,
but it should not be assumed that it has the same background color.
**■Note It is worth remembering that all elements have a transparent background unless you specify otherwise.
A Word of Warning
Much like the cascade through multiple style sheets, inheritance can cause severe headaches if
you do not keep track of what is going on. Often, CSS is as much about what you don’t do as
what you do. The following is a classic example of how inheritance can cause confusion.
Let’s say you are using nested lists (that’s at least one list within another list). The markup
might be something like this three-level list:
<ul>
<li>Top level one</li>
<li>Top level two
<ul>
<li>Second level one</li>
<li>Second level two
<ul>
<li>Third level one</li>
<li>Third level two</li>
</ul>
</li>
<li>Second level three</li>
</ul>
</li>
<li>Top level three</li>
</ul>
You might then apply some basic CSS to that list to control font-size, as follows:
/* Font size for list elements */
li {
font-size:2em;
}
Your first thought might be that this selector would ensure that all text will be 2em in size,
but this is not the case. Each nested list will inherit the font-size value from the one above, and
as the em is a relative measurement (more on that later in the “Ems” section), this will result in the text size being doubled with every nested list. So, a list item within another list will inherit
the font-size rule and become twice as big as its parent.
In Chapter 6, you will learn all about lists and how to apply CSS correctly to avoid such a
hazard, but this is a fine example of how inheritance can cause problems. The flip side of this
is that there will be many times where such powerful inheritance can also be used to do the
work of several targeted selectors, and it’s all about knowing when it’s happening and when it
needs to be tamed.
**■Caution “Where on earth did that underline come from?” Inheritance can confuse anyone working
across multiple style sheets. Be very careful not to duplicate an existing selector unwittingly. If in doubt,
search your style sheets and ensure there won’t be a conflict. It pays to develop your own system of control
here, perhaps noting all ID/class names you’ve used in a separate text file or notepad.
Css Tutorial : Group Exceptions
What if you still wish to treat one of those headings slightly differently? Let’s say you’re happy
with the font, line-height, and color, but wish to render the <h1> heading in italicized text.
Luckily, there is a way to do that while still grouping h1 with the other selectors.
To create the italicized text, none of the existing declarations need to be altered. A new
declaration, font-style: italic, is required, however. If that were to be added to the group, all
headings would be italicized. Instead, a new style is added to the existing group: /* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
/* Additionally, render all h1 headings in italics */
h1 {
font-style:italic;
}
Now the browser will collate both h1 selectors (one from the grouping and the stand-alone
selector) to render top-level headings as specified in the grouping and also in italics. Again, this
method can be applied to any selectors.
with the font, line-height, and color, but wish to render the <h1> heading in italicized text.
Luckily, there is a way to do that while still grouping h1 with the other selectors.
To create the italicized text, none of the existing declarations need to be altered. A new
declaration, font-style: italic, is required, however. If that were to be added to the group, all
headings would be italicized. Instead, a new style is added to the existing group: /* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
/* Additionally, render all h1 headings in italics */
h1 {
font-style:italic;
}
Now the browser will collate both h1 selectors (one from the grouping and the stand-alone
selector) to render top-level headings as specified in the grouping and also in italics. Again, this
method can be applied to any selectors.
Grouping in Css
Another key principle for creating well-organized CSS is grouping. Consider the following CSS,
used to apply styles to the first three (X)HTML headings:
/* Heading styles */
h1 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h2 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
Note that aside from the selector, every rule is the same. The rules are using 13 lines and
are bloating the style sheet unnecessarily. Thankfully, the three rules can be grouped to save
space and keep things manageable:
/* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
That’s now just five lines! The three selectors (h1, h2, and h3) are grouped in a commaseparated
list, and this technique can be used to group any selectors with common values. If
later you should decide to treat h3 differently, simply remove it from the list and isolate the
h3 style.
used to apply styles to the first three (X)HTML headings:
/* Heading styles */
h1 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h2 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
Note that aside from the selector, every rule is the same. The rules are using 13 lines and
are bloating the style sheet unnecessarily. Thankfully, the three rules can be grouped to save
space and keep things manageable:
/* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
That’s now just five lines! The three selectors (h1, h2, and h3) are grouped in a commaseparated
list, and this technique can be used to group any selectors with common values. If
later you should decide to treat h3 differently, simply remove it from the list and isolate the
h3 style.
Careful with the Cascade
It can sometimes be hard to track the cascade across several style sheets. For example, if two
selectors have matching properties but varying values, e.g., each instance of a selector was made up
of font-family, color, and background, but with different values for each, the selector in the
style sheet with the highest hierarchy would win out and be rendered. Things get even more
interesting when each selector has unique properties.
Let’s clarify this with an example. Imagine that in a modular style sheet such as forms.css
you have defined a class called highlight as follows:
/* Highlight important form information */
.highlight {
color:#F00;
font-style:italic;
text-decoration:underline;
}
Should there be no other instance of that selector in any style sheets higher up the hierarchy,
highlight will indeed be rendered in red italicized text with a neat underline. However,
imagine that a few weeks later in external.css, a style sheet of more hierarchical importance,
you’ve forgotten about the original class and decide to reuse highlight as follows:
/* Highlight author’s name underneath articles */
.highlight {
color:#F00;
font-style:normal;
}
First, the cascade dictates that the font-style value for highlight in external.css (fontstyle:
normal;) is of greater importance than the value in forms.css (font-style: italic;).
Therefore, all instances of highlight sitewide will be normal red text, not italicized. Without
realizing it, you have just turned all your lovely italicized form text into boring normal text, and
you probably won’t notice until you revisit your forms in your browser.
And to further illustrate this pitfall, the new highlight class in external.css does not define a
value for text-decoration, so the normal red text you wished to create will be underlined, taking
that value from forms.css. Sure, your new highlight class takes precedence in the hierarchy,
but unless you turn off the underline in external.css, the cascade will still find its way to the
original rule and look for anything not being overruled.
selectors have matching properties but varying values, e.g., each instance of a selector was made up
of font-family, color, and background, but with different values for each, the selector in the
style sheet with the highest hierarchy would win out and be rendered. Things get even more
interesting when each selector has unique properties.
Let’s clarify this with an example. Imagine that in a modular style sheet such as forms.css
you have defined a class called highlight as follows:
/* Highlight important form information */
.highlight {
color:#F00;
font-style:italic;
text-decoration:underline;
}
Should there be no other instance of that selector in any style sheets higher up the hierarchy,
highlight will indeed be rendered in red italicized text with a neat underline. However,
imagine that a few weeks later in external.css, a style sheet of more hierarchical importance,
you’ve forgotten about the original class and decide to reuse highlight as follows:
/* Highlight author’s name underneath articles */
.highlight {
color:#F00;
font-style:normal;
}
First, the cascade dictates that the font-style value for highlight in external.css (fontstyle:
normal;) is of greater importance than the value in forms.css (font-style: italic;).
Therefore, all instances of highlight sitewide will be normal red text, not italicized. Without
realizing it, you have just turned all your lovely italicized form text into boring normal text, and
you probably won’t notice until you revisit your forms in your browser.
And to further illustrate this pitfall, the new highlight class in external.css does not define a
value for text-decoration, so the normal red text you wished to create will be underlined, taking
that value from forms.css. Sure, your new highlight class takes precedence in the hierarchy,
but unless you turn off the underline in external.css, the cascade will still find its way to the
original rule and look for anything not being overruled.
About Bottom of the cascade
Always at the bottom of the cascade hierarchy is the browser’s own default style sheet. Typically,
the browser style sheet will have default settings for headings, paragraphs, lists, and all common
(X)HTML elements. It is the browser style sheet that makes links blue and visited links purple.
View any page in your browser that isn’t styled with CSS, and you will see the default browser styles.
So long as you define all the elements you wish to control, the default browser CSS will be
overridden. Remember that the default styling was designed for numerous reasons, specifically
legibility, accessibility, and common understanding. It is up to you to integrate these accepted
conventions into your designs, and seek to improve them, not disregard them.
the browser style sheet will have default settings for headings, paragraphs, lists, and all common
(X)HTML elements. It is the browser style sheet that makes links blue and visited links purple.
View any page in your browser that isn’t styled with CSS, and you will see the default browser styles.
So long as you define all the elements you wish to control, the default browser CSS will be
overridden. Remember that the default styling was designed for numerous reasons, specifically
legibility, accessibility, and common understanding. It is up to you to integrate these accepted
conventions into your designs, and seek to improve them, not disregard them.
Subscribe to:
Posts (Atom)