Few important quotations i wanted to share from the next 4 chapters (6-7-8-9)
Tomorrow i will final pending chapters
1) Following are the pseudo-elements currently supported by browsers that are discussed in this chapter:
::first-letter: styles only the first letter of an element
::first-line: styles only the first line of an element
::selection: styles mouse highlighted text
::before: inserts content into a document from CSS before an element
::after: inserts content into a document from CSS after an element
2) The pseudo-elements ::first-letter and ::first-line refer to the first letter and first line of an element containing text. When designing a website, it is helpful to have control over how you present content. With the ::first-letter and ::first-line pseudo-elements, you can control the formatting of the first letter and first line of a paragraph completely from CSS. You may add an increased font
size or other font effects, apply a background color or image, or use just about any text effect supported by CSS and the browser.
3) Dynamic Pseudo-Classes
The following are considered dynamic pseudo-classes. They are a classification of elements that are only present after certain user actions have or have not occurred:
:link: signifies unvisited hyperlinks
:visited: indicates visited hyperlinks
:hover: signifies an element that currently has the user’s mouse pointer hovering over it
:active: signifies an element on which the user is currently clicking
focus: indicates elements that currently have focus (input form elements, for example)
4) :link and :visited
The :link pseudo-class refers to an unvisited hyperlink, whereas :visited, of course, refers to visited hyperlinks. These two pseudo-classes are used to separate styles based on user actions. An unvisited hyperlink may be red and contain no underlined text, whereas a visited hyperlink may be green and have the underline applied. Dynamic pseudo-classes change document styles based on specific user actions.
5) :first-child
The :first-child pseudo-class refers to the first-child of an element.
For instance: div > p:first-child
This selector matches any element that is the first-child of a
element.
6) :last-child
The opposite of the :first-child pseudo-class, this pseudo-class matches the last-child of an element.
For instance.
div > p:last-child
7) Inheritance
CSS is designed to simplify web document creation, enabling a property to be applied to all elements in a document. To put it another way, after a property has been applied to a particular element,its children retain those property values as well. This behavior is called inheritance.Many properties in CSS are inheritable, and inheritance makes writing style sheets a snap. Two types of properties that can be inherited are most text properties and font properties. After they’re applied to an element, they are inherited by that element’s descendants. Take, for instance, this rule:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Property Inheritance </title>
<style type='text/css'>
div#parentdiv {
text-align: center;
}
</style>
</head>
<body>
<div id='parentdiv'>
Some text aligned center.
<div>
Because the text-align property is inherited,
this text is also aligned center.
</div>
</div>
</body>
</html>
8) Some properties, such as border, margin, and padding, are not inherited because inheriting would not be appropriate.
9) The inherit Keyword
The inherit keyword was introduced in CSS 2; all properties can have inherit as a value. This keyword allows you to state explicitly whether a property should inherit a value from its parent element, as shown in the following rules:
div#parentdiv {
border: thin solid black;
}
div#childdiv {
border: inherit;
}
When these rules are applied to the following markup, the thin, solid, black border is inherited by the child
because the child
has a border property with a value of inherit:
<div id=’parentdiv’>
This div has a border around it.
<div id=’childdiv’>
This div also has a border around it.
</div>
</div>
10) The letter-spacing Property
The letter-spacing property is a simple property that accepts a length as its value. A length value is any length value supported by CSS.
Example:
p {
letter-spacing: 10px;
}
11) The word-spacing Property
The word-spacing property, in essence, functions identically to the letter-spacing property.However, instead of controlling the space between letters, the word-spacing property controls the space between words.
12) Aligning Text with the text-align Property
The purpose of the text-align property is simple: It aligns text!
At first glance, including text-align:justify; in a document has the same effect as text-align: left;.
13) The text-decoration Property
The text-decoration property applies underlining, overlining, and strikethrough to text. The following table outlines the text-decoration property and the values it allows.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type='text/css'>
p#underline {
text-decoration: underline;
}
p#overline {
text-decoration: overline;
}
p#line-through {
text-decoration: line-through;
}
p#blink {
text-decoration: blink;
}
</style>
</head>
<body>
<p id='underline'>
This text is underlined.
</p>
<p id='overline'>
This text is overlined.
</p>
<p id='line-through'>
This text has a line through it.
</p>
<p id='blink'>
This text blinks in those browsers that support it.
</p>
</body>
</html>
14) The white-space Property
The white-space property allows you to control text formatting in the source code of the web document.The following table outlines the possible keyword values of the white-space property as of CSS 2.
| Value | |
|---|---|
| white-space | normal | pre | nowrap | inherit | Initial Value:normal |
By default the browser will collapse the extra spaces between words and ignore the line breaks, which is the behavior of the white-space: normal; declaration. The white-space: pre; declaration preserves
that extra space and keeps the line breaks where they appear in the source code. Under normal circumstances, if there is too much text to appear on a single line, the extra text overflows onto the following
line or lines. The white-space: nowrap; declaration prevents that overflow from happening and forces the text to stay on one line, unless an HTML line break
element is encountered. That
forces a line break.
15) The font-style Property
The font-style property is used to switch between styles provided by a particular font. Those styles are italic or oblique, and they are a part of the font itself. The following table outlines the possible values for the font-style property.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type='text/css'>
p {
font-family: sans-serif;
font-size: 25px;
}
p#normal {
font-style: normal;
}
p#italic {
font-style: italic;
}
p#oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p id='normal'>
This font is normal.
</p>
<p id='italic'>
This font is italic.
</p>
<p id='oblique'>
This font is oblique.
</p>
</body>
</html>
16) The font-variant Property
The font-variant property provides an effect that is only slightly different from that of the texttransform:uppercase; The following table outlines the fontvariant property and its possible values.
| Property | Value |
|---|---|
| font-variant | normal|small-caps Initial value:normal |
Example:
<html>
<head>
<title></title>
<style type='text/css'>
p#text-transform {
text-transform: uppercase;
}
p#font-variant {
font-variant: small-caps;
}
</style>
</head>
<body>
<p id='text-transform'>
This demonstrates the use of the text-transform: uppercase; effect.
</p>
<p id='font-variant'>
This demonstrates the use of the font-variant: small-caps; effect.
</p>
</body>
</html>
17) The font-size Property
The font-size property is, of course, used to control the size of fonts. The following table outlines the font-size property and its possible values.
| Property | Value |
| font-size |
About the Author
Richard York is a freelance web designer and a participant in the open source community. After attending website and graphic design courses at Indiana University-Purdue University, Indianapolis in Indianapolis, Indiana, Richard continued a course of self-study which involved mastering design of web sites using web technologies like CSS, XHTML, and PHP.
When not writing for Wrox or building a website, Richard works on open source webmail applications written for PHP PEAR, an open source repository of PHP applications. Richard also enjoys writing poetry, playing music, and painting. He maintains a website at www.smilingsouls.net that exhibits his personal and professional interests.
1 comment:
I would like to exchange links with your site prasanthaboutjava.blogspot.com
Is this possible?
Post a Comment