Nice book written by Richard York.
Few important quotations i wanted to share from 1st five chapters.
Tomorrow i will update next 4 chapters.
1) Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. Put simply, CSS handles the look and feel part of a web page. With CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.
2) Tim Berners-Lee (currently the director of the W3C) is credited with the invention of the modern Internet.That is the Internet as we know it and use it today to hop from one page to another by clicking colored hyperlinks. When Tim Berners-Lee came along with his invention, the Internet had already existed for several years in a different form. The earlier Internet was the result of the work and research of Vinton Cerf and Robert Kahn who devised a way for information to be transmitted over a network of computers.In a 1974 publication of a paper titled A Protocol for Packet Network Intercommunication, they outlined a protocol called Internet Protocol or IP. The IP is the underlying technology behind how information is
accessed and transferred over the Internet today.
3) In 1989, Tim Berners-Lee came along with a proposal about how research could be shared more easily between physicists over the Internet. At the time, information sharing was difficult because there were so many different methods of doing it. He put together pieces of technology already used on the Internet for functions such as e-mail and named his invention the World Wide Web (WWW).
4) At the time, style sheets were not a new invention. In fact, style sheets were part of the plan from the beginning of HTML in 1990. Unfortunately, however, no standardized method of implementing style sheets was ever outlined, leaving this function up to the various browsers. In 1994, Tim Berners-Lee founded the World Wide Web Consortium, and a few days later, Håkon Wium Lie published his first draft of Cascading HTML Style Sheets. This draft was a proposal for how HTML documents could be styled using simple declarations.
5) Cascading Style Sheets have the following advantages:
a) The presentation of an entire website can be centralized to one or a handful of documents,enabling the look and feel of a website to be updated at a moment’s notice. In legacy HTML documents, the presentation was limited only to the document. CSS brings a much needed feature to HTML: the separation of a document’s structure from its presentation.
b) Users of a website can compose style sheets of their own, a feature which makes websites more accessible. For example, a user can compose a high-contrast style sheet that makes content easier to read.
c) Browsers are beginning to support multiple style sheets, a feature which allows more than one design of a website to be presented at the same time. The user can simply select the look and feel that he or she likes most.
d) Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
e) Style sheets download much more quickly because web documents using CSS take up less hard disk space and consume less bandwidth.
6) Padding, a term that refers to the amount of space between the inside border edge and the edge of the content inside of an element, is also applied. In this example, it’s the space between the sentences inside each heading and the inside border edge.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<title>Selectors and Grouping</title>
</head>
<body>
<h1 style="color: black; border: 5px solid black; letter-spacing: 25px; padding: 10px;">
Heading 1
</h1>
<h2 style="color: orange; border: 4px solid orange; letter-spacing: 5px; padding: 10px;">
Heading 2
</h2>
<h3 style="color: blue; border: 3px solid blue; letter-spacing: 5px; padding: 10px;">
Heading 3
</h3>
<p style="font-family: Arial; font-size: 14pt;">
Selectors choose the element to apply formatting to. These may also be
grouped together.
</p>
</body>
</html>
7) Importing Style Sheets
You can also link to an external style sheet by using the @import rule. Here’s a demonstration:
<style type=”text/css”>
@import url(path/to/cssdoc.css);
</style>
8) Direct Child Selectors
Documented in CSS 3 and supported in Mozilla 1.7, Opera 7.5, and Safari 1.2.
Direct Child selectors operate much like descendant selectors in that they also rely on an ancestral relationship to decide where to apply style. Descendant selectors, however, are more ambiguous because they apply to any descendant of an element. Child selectors apply only to immediate children of the element. This is achieved by introducing a new syntax for the selector. This example shows a direct child
selector:
h2 > em {
color: blue;
}
It uses the greater than sign (>) to show the relationship between the two elements. In this example,<em> must be a direct child of an <h2> element before it becomes blue. For example
<h2>Welcome to <em>What’s-its</em> and Widgets</h2>
results in the application of this rule. Whereas
<h2>Welcome to <strong><em>Widgets</em></strong> and What’s-its</h2>
does not apply this rule, because <em> isn’t a direct child of <h2>. The <strong> element is the direct
child of <h2>, and <em> is the direct child of <strong>.
9) CSS 2 simply refers to these selectors as adjacent sibling selectors. CSS 3 changes the name slightly to direct adjacent sibling combinator. The name change is due to an expansion of CSS 3 to also include indirect adjacent sibling combinators (discussed in the next section). The word combinator is based on the word selector and what the syntax does.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<style type=”text/css”>
h2 + p {
text-indent: 20px;
color: red;
}
</style>
</head>
<body>
<div>
<h2>
Welcome to CSS widgets.
</h2>
<p>
This paragraph of text is red and is indented 20 pixels.
</p>
</div>
<p>
This paragraph of text is not indented, it does not have the same
parent as an h2 element.
</p>
</body>
</html>
10) Attribute Substring Selectors
Documented in CSS 3 and supported in Mozilla 1.7 and Safari 1.2.
Taking the flexibility of attribute selectors even further, the selectors in the following sections choose elements based on whether a particular string appears at the beginning of an attribute’s value, at the end of an attribute’s value, or anywhere inside an attribute’s value. A string that appears inside another string is often referred to as a substring.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
* {
font-family: sans-serif;
color: white;
}
/**
* Apply this style to all h1 elements regardless of where they
* appear in the page.
**
*/
h1, form h2 {
background: gray;
}
h1, h2, form {
margin: 0;
}
h1 {
font-size: 24px;
padding: 5px;
border-bottom: 5px solid black;
letter-spacing: -2px;
width: 510px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
}
form {
background: lightgrey;
padding: 10px;
width: 500px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
}
/**
* Apply these styles to label elements, but only if they
* appear inside of an input form
**
*/
form label {
display: block;
font-weight: bold;
margin: 5px;
width: 225px;
text-align: right;
background: black;
}
/**
* These styles are shared between h2 and label elements
* that appear inside of a form
**
*/
form h2, form label {
font-size: 15px;
-moz-border-radius: 10px;
padding: 3px;
}
/**
* Direct Child Selectors
**
*/
form > div > label {
float: left;
}
form > div {
clear: left;
}
div > input, div > select {
margin: 3px;
padding: 4px;
}
select > option {
padding: 4px;
}
/**
* Direct Adjacent Sibling Combinators
**
*/
label + input, label + select, label + textarea {
background: darkgray;
}
/**
* Attribute Selectors
**
*/
option[value] {
letter-spacing: 2px;
}
option[value='newspaper'] {
background: orange;
}
option[value='magazine'] {
background: red;
}
option[value='television'] {
background: black;
}
option[value='radio'] {
background: green;
}
option[value='other'] {
background: blue;
}
input[name$='[name]'] {
color: darkred;
}
input[name$='[email]'] {
color: darkblue;
}
textarea[name$='[address]'] {
color: purple;
}
textarea[name$='[message]'] {
color: black;
}
select[name$='[heard]'] {
color: darkgreen;
}
input[name^='feedback'], select[name^='feedback'], textarea[name^='feedback'] {
font-weight: bold;
}
</style>
<title>Feedback Form - Widgets and What's-its</title>
</head>
<body>
<h1>Widgets and What's-its</h1>
<form>
<h2>Tell us what's on your mind..</h2>
<div>
<label for='feedback[name]'>Name:</label>
<input type='text' size='25' name='feedback[name]' />
</div>
<div>
<label for='feedback[email]'>Email:</label>
<input type='text' size='25' name='feedback[email]' />
</div>
<div>
<label for='feedback[address]'>Address:</label>
<textarea name='feedback[address]' cols='40' rows='3' wrap='virtual'></textarea>
</div>
<div>
<label for='feedback[message]'>Comments:</label>
<textarea name='feedback[message]' cols='40' rows='6' wrap='virtual'></textarea>
</div>
<div>
<label for='feedback[heard]'>How'd you hear about us?</label>
<select name='feedback[heard]'>
<option value=''>Choose...</option>
<option value='newspaper'>Newspaper</option>
<option value='magazine'>Magazine</option>
<option value='television'>Television</option>
<option value='radio'>Radio</option>
<option value='other'>Other</option>
</select>
</div>
</form>
</body>
</html>
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.
2 comments:
Hei,
Found your nice explainations of CSS today... I´m in the middle of a CSS course, and look forward to the next chapters:)
/CSS nerd
Carro,
Thanks a lot for your encouragment.I will surely post rest in weekend.
Thanks
Prashant
Post a Comment