Commit ac3fc326 authored by O'Reilly Media, Inc.'s avatar O'Reilly Media, Inc.

Initial commit

parents
## Example files for the title:
# CSS: The Definitive Guide 3rd Edition, by Eric Meyer
[![CSS: The Definitive Guide 3rd Edition, by Eric Meyer](http://akamaicovers.oreilly.com/images/9780596527334/cat.gif)](https://www.safaribooksonline.com/library/view/title/0596527330//)
The following applies to example files from material published by O’Reilly Media, Inc. Content from other publishers may include different rules of usage. Please refer to any additional usage rights explained in the actual example files or refer to the publisher’s website.
O'Reilly books are here to help you get your job done. In general, you may use the code in O'Reilly books in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from our books does not require permission. Answering a question by citing our books and quoting example code does not require permission. On the other hand, selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Incorporating a significant amount of example code from our books into your product's documentation does require permission.
We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN.
If you think your use of code examples falls outside fair use or the permission given here, feel free to contact us at <permissions@oreilly.com>.
Please note that the examples are not production code and have not been carefully testing. They are provided "as-is" and come with no warranty of any kind.
appendix: Selector, Pseudo-Class, and Pseudo-Element Reference
==================
* {color: red;}
div * p {color: blue;}
====================================
body {background: #FFF;}
p {font-size: 1em;}
====================================
body h1 {font-size: 200%;}
table tr td div ul li {color: purple;}
====================================
div > p {color: cyan;}
ul > li {font-weight: bold;}
====================================
table + p {margin-top: 2.5em;}
h1 + * {margin-top: 0;}
====================================
p.urgent {color: red;}
a.external {font-style: italic;}
.example {background: olive;}
====================================
h1#page-title {font-size: 250%;}
body#home {background: silver;}
#example {background: lime;}
====================================
a[rel] {border-bottom: 3px double gray;}
p[class] {border: 1px dotted silver;}
====================================
a[rel="Home"] {font-weight: bold;}
p[class="urgent"] {color: red;;}
====================================
a[rel~="friend"] {text-transform: uppercase;}
p[class~="warning"] {background: yellow;}
====================================
a[href^="/blog"] {text-transform: uppercase;}
p[class^="test-"] {background: yellow;}
====================================
a[href$=".pdf"] {font-style: italic;}
====================================
a[href*="oreilly.com"] {font-weight: bold;}
div [class*="port"] {border: 1px solid red;}
====================================
html[lang|="en"] {color: gray;}
====================================
a:active {color: red;}
*:active {background: blue;}
====================================
a.external:after {content: " " url(/icons/globe.gif);}
p:after {content: " | ";}
====================================
a[href]:before {content: "[LINK] ";}
p:before {content: attr(class);}
====================================
body *:first-child {font-weight: bold;}
p:first-child {font-size: 125%;}
====================================
h1:first-letter {font-size: 166%;}
a:first-letter {text-decoration: underline;}
====================================
p.lead:first-line {font-weight: bold;}
====================================
a:focus {outline: 1px dotted red;}
input:focus {background: yellow;}
====================================
a[href]:hover {text-decoration: underline;}
p:hover {background: yellow;}
====================================
html:lang(en) {background: silver;}
*:lang(fr) {quotes: '« ' ' »';}
====================================
a:link {color: blue;}
*:link {text-decoration: underline;}
====================================
a:visited {color: purple;}
*:visited {color: gray;}
==================
\ No newline at end of file
appendix: Sample HTML 4 Style Sheet
==================
ol, ul, dir, menu, dd
{margin-left: 40px;}
====================================
button, textarea, input, object, select, img {
display:inline-block;}
====================================
address, blockquote, body, dd, div, dl, dt, fieldset, form,
frame, frameset, h1, h2, h3, h4, h5, h6, noframes,
ol, p, ul, center, dir, hr, menu, pre {
display: block;}
li {display: list-item;}
head {display: none;}
table {display: table;}
tr {display: table-row;}
thead {display: table-header-group;}
tbody {display: table-row-group;}
tfoot {display: table-footer-group;}
col {display: table-column;}
colgroup {display: table-column-group;}
td, th {display: table-cell;}
caption {display: table-caption;}
th {font-weight: bolder; text-align: center;}
caption {text-align: center;}
body {padding: 8px; line-height: 1.12em;}
h1 {font-size: 2em; margin: .67em 0;}
h2 {font-size: 1.5em; margin: .75em 0;}
h3 {font-size: 1.17em; margin: .83em 0;}
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu {
margin: 1.12em 0;}
h5 {font-size: .83em; margin: 1.5em 0;}
h6 {font-size: .75em; margin: 1.67em 0;}
h1, h2, h3, h4, h5, h6, b, strong {
font-weight: bolder;}
blockquote {margin-left: 40px; margin-right: 40px;}
i, cite, em, var, address {
font-style: italic;}
pre, tt, code, kbd, samp {
font-family: monospace;}
pre {white-space: pre;}
button, textarea, input, object, select, img {
display:inline-block;}
big {font-size: 1.17em;}
small, sub, sup {font-size: .83em;}
sub {vertical-align: sub;}
sup {vertical-align: super;}
s, strike, del {text-decoration: line-through;}
hr {border: 1px inset;}
ol, ul, dir, menu, dd {
margin-left: 40px;}
ol {list-style-type: decimal;}
ol ul, ul ol, ul ul, ol ol {
margin-top: 0; margin-bottom: 0;}
u, ins {text-decoration: underline;}
br:before {content: "\A";}
center {text-align: center;}
abbr, acronym {font-variant: small-caps; letter-spacing: 0.1em;}
:link,:visited {text-decoration: underline;}
:focus {outline: thin dotted invert;}
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] {direction: ltr; unicode-bidi: bidi-override;}
BDO[DIR="rtl"] {direction: rtl; unicode-bidi: bidi-override;}
*[DIR="ltr"] {direction: ltr; unicode-bidi: embed;}
*[DIR="rtl"] {direction: rtl; unicode-bidi: embed;}
@media print {
h1 {page-break-before: always;}
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;}
ul, ol, dl {page-break-before: avoid;}
}
@media aural { /* changed from 'speech' which was not defined in CSS2 */
h1, h2, h3, h4, h5, h6 {
voice-family: paul, male; stress: 20; richness: 90;}
h1 {pitch: x-low; pitch-range: 90;}
h2 {pitch: x-low; pitch-range: 80;}
h3 {pitch: low; pitch-range: 70;}
h4 {pitch: medium; pitch-range: 60;}
h5 {pitch: medium; pitch-range: 50;}
h6 {pitch: medium; pitch-range: 40;}
li, dt, dd {pitch: medium; richness: 60;}
dt {stress: 80;}
pre, code, tt {pitch: medium; pitch-range: 0; stress: 0; richness: 80;}
em {pitch: medium; pitch-range: 60; stress: 60; richness: 50;}
strong {pitch: medium; pitch-range: 60; stress: 90; richness: 90;}
dfn {pitch: high; pitch-range: 60; stress: 60;}
s, strike {richness: 0;}
i {pitch: medium; pitch-range: 60; stress: 60; richness: 50;}
b {pitch: medium; pitch-range: 60; stress: 90; richness: 90;}
u {richness: 0;}
a:link {voice-family: harry, male;}
a:visited {voice-family: betty, female;}
a:active {voice-family: betty, female; pitch-range: 80; pitch: x-high;}
}
==================
\ No newline at end of file
chapter: CSS and Documents
==================
<font size="+3" face="Helvetica" color="red">Page Title</font>
====================================
<h1>Leaping Above The Water</h1>
====================================
h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline;
background: yellow;}
====================================
h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline;
background: yellow url(titlebg.png) repeat-x;
border: 1px solid red; margin-bottom: 0; padding: 5px;}
====================================
<h2><font color="purple">This is purple!</font></h2>
====================================
h2 {color: purple;}
====================================
h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline;
background: yellow;}
====================================
h1, h2 {color: maroon; font: italic 2em Times, serif; text-decoration: underline;
background: yellow;}
====================================
h1, h2 {color: navy; font: bold 2em Helvetica, sans-serif;
text-decoration: underline overline; background: silver;}
====================================
h1, h2, h3, h4, h5, h6 {color: gray; background: white;}
====================================
h1, h2, h3, h4, h5, h6 {color: white; background: gray;}
====================================
h1, h2, h3, h4, h5, h6 {color: yellow; background: blue;}
====================================
a:link, a:visited {color: white; background: black;}
====================================
<img src="howdy.gif" />
====================================
<body>
<p>This is a paragraph with <em>an inline element</em> within it.</p>
</body>
====================================
p {display: inline;}
em {display: block;}
====================================
<em><p>This is a paragraph improperly enclosed by an inline element.</p></em>
====================================
<book>
<maintitle>Cascading Style Sheets: The Definitive Guide</maintitle>
<subtitle>Second Edition</subtitle>
<author>Eric A. Meyer</author>
<publisher>O'Reilly and Associates</publisher>
<pubdate>2004</pubdate>
<isbn>blahblahblah</isbn>
</book>
<book>
<maintitle>CSS2 Pocket Reference</maintitle>
<author>Eric A. Meyer</author>
<publisher>O'Reilly and Associates</publisher>
<pubdate>2004</pubdate>
<isbn>blahblahblah</isbn>
</book>
====================================
book, maintitle, subtitle, author, isbn {display: block;}
publisher, pubdate {display: inline;}
====================================
<html>
<head>
<title>Eric's World of Waffles</title>
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
<style type="text/css">
@import url(sheet2.css);
h1 {color: maroon;}
body {background: yellow;}
/* These are my styles! Yay! */
</style>
</head>
<body>
<h1>Waffles!</h1>
<p style="color: gray;">The most wonderful of all breakfast foods is
the waffle—a ridged and cratered slab of home-cooked, fluffy goodness
that makes every child's heart soar with joy. And they're so easy to make!
Just a simple waffle-maker and some batter, and you're ready for a morning
of aromatic ecstasy!
</p>
</body>
</html>
====================================
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
====================================
h1 {color: red;}
h2 {color: maroon; background: white;}
h3 {color: white; background: black;
font: medium Helvetica;}
====================================
<link rel="stylesheet" type="text/css" href="visual-sheet.css"
media="screen, projection" />
====================================
<link rel="stylesheet" type="text/css" href="basic.css" />
<link rel="stylesheet" type="text/css" href="splash.css" />
====================================
<link rel="stylesheet" type="text/css" href="basic.css" />
<link rel="stylesheet" type="text/css" href="splash.css" />
<p class="a1">This paragraph will be gray only if styles from the
stylesheet 'basic.css' are applied.</p>
<p class="b1">This paragraph will be gray only if styles from the
stylesheet 'splash.css' are applied.</p>
====================================
<link rel="stylesheet" type="text/css"
href="sheet1.css" title="Default" />
<link rel="alternate stylesheet" type="text/css"
href="bigtext.css" title="Big Text" />
<link rel="alternate stylesheet" type="text/css"
href="zany.css" title="Crazy colors!" />
====================================
<link rel="stylesheet" type="text/css"
href="sheet1.css" title="Default" media="screen" />
<link rel="stylesheet" type="text/css"
href="print-sheet1.css" title="Default" media="print" />
<link rel="alternate stylesheet" type="text/css"
href="bigtext.css" title="Big Text" media="screen" />
<link rel="alternate stylesheet" type="text/css"
href="print-bigtext.css" title="Big Text" media="print" />
====================================
<link rel="stylesheet" type="text/css"
href="sheet1.css" title="Default layout" />
<link rel="stylesheet" type="text/css"
href="sheet2.css" title="Default text sizes" />
<link rel="stylesheet" type="text/css"
href="sheet3.css" title="Default colors" />
====================================
<style type="text/css">
====================================
@import url(sheet2.css);
====================================
<style type="text/css">
@import url(styles.css); /* @import comes first */
h1 {color: gray;}
</style>
====================================
@import url(sheet2.css);
@import url(blueworld.css);
@import url(zany.css);
====================================
@import url(sheet2.css) all;
@import url(blueworld.css) screen;
@import url(zany.css) projection, print;
====================================
@import url(http://example.org/library/layout.css);
@import url(basic-text.css);
@import url(printer.css) print;
body {color: red;}
h1 {color: blue;}
====================================
h1 {color: maroon;}
body {background: yellow;}
====================================
<style type="text/css"><!--
@import url(sheet2.css);
h1 {color: maroon;}
body {background: yellow;}
--></style>
====================================
/* This is a CSS1 comment */
====================================
/* This is a CSS1 comment, and it
can be several lines long without
any problem whatsoever. */
====================================
/* This is a comment, in which we find
another comment, which is WRONG
/* Another comment */
and back to the first comment */
====================================
h1 {color: gray;} /* This CSS comment is several lines */
h2 {color: silver;} /* long, but since it is alongside */
p {color: white;} /* actual styles, each line needs to */
pre {color: gray;} /* be wrapped in comment markers. */
====================================
h1 {color: gray;} /* This CSS comment is several lines
h2 {color: silver;} long, but since it is not wrapped
p {color: white;} in comment markers, the last three
pre {color: gray;} styles are part of the comment. */
====================================
<p style="color: gray;">The most wonderful of all breakfast foods is
the waffle--a ridged and cratered slab of home-cooked, fluffy goodness...
</p>
==================
\ No newline at end of file
This diff is collapsed.
chapter: Structure and the Cascade
==================
h1 {color: red;}
body h1 {color: green;}
h2.grape {color: purple;}
h2 {color: silver;}
html > body table tr[id="totals"] td ul > li {color: maroon;}
li#answer {color: navy;}
====================================
h1 {color: red;} /* specificity = 0,0,0,1 */
p em {color: purple;} /* specificity = 0,0,0,2 */
.grape {color: purple;} /* specificity = 0,0,1,0 */
*.bright {color: yellow;} /* specificity = 0,0,1,0 */
p.bright em.dark {color: maroon;} /* specificity = 0,0,2,2 */
#id216 {color: blue;} /* specificity = 0,1,0,0 */
div#sidebar *[href] {color: silver;} /* specificity = 0,1,1,1 */
====================================
h1 {color: red;} /* 0,0,0,1 */
body h1 {color: green;} /* 0,0,0,2 (winner)*/
h2.grape {color: purple;} /* 0,0,1,1 (winner) */
h2 {color: silver;} /* 0,0,0,1 */
html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 (winner) */
====================================
h1 {color: silver; background: black;}
====================================
h1 {color: silver;}
h1 {background: black;}
====================================
h1, h2.section {color: silver; background: black;}
====================================
h1 {color: silver;} /* 0,0,0,1 */
h1 {background: black;} /* 0,0,0,1 */
h2.section {color: silver;} /* 0,0,1,1 */
h2.section {background: black;} /* 0,0,1,1 */
====================================
h1 + p {color: black; font-style: italic;} /* 0,0,0,2 */
p {color: gray; background: white; font-style: normal;} /* 0,0,0,1 */
*.aside {color: black; background: silver;} /* 0,0,1,0 */
====================================
<h1>Greetings!</h1>
<p class="aside">
It's a fine way to start a day, don't you think?
</p>
<p>
There are many ways to greet a person, but the words are not as important as the act
of greeting itself.
</p>
<h1>Salutations!</h1>
<p>
There is nothing finer than a hearty welcome from one's fellow man.
</p>
<p class="aside">
Although a thick and juicy hamburger with bacon and mushrooms runs a close second.
</p>
====================================
div p {color: black;} /* 0,0,0,2 */
* {color: gray;} /* 0,0,0,0 */
====================================
div p /* 0,0,0,2 */
body * strong /* 0,0,0,2 */
====================================
html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 (winner) */
====================================
#meadow {color: green;} /* 0,1,0,0 */
*[id="meadow"] {color: red;} /* 0,0,1,0 */
====================================
h1 {color: red;}
<h1 style="color: green;">The Meadow Party</h1>
====================================
h1#meadow {color: red;}
<h1 id="meadow" style="color: green;">The Meadow Party</h1>
====================================
p.dark {color: #333 !important; background: white;}
====================================
p.dark {color: #333 !important; background: white !important;}
====================================
p.light {color: yellow; font: smaller Times, serif !important;}
====================================
h1 {font-style: italic; color: gray !important;}
.title {color: black; background: silver;}
* {background: black !important;}
<h1 class="title">NightWing</h1>
====================================
h1 {color: gray;}
<h1>Meerkat <em>Central</em></h1>
====================================
ul {color: gray;}
====================================
* {color: gray;}
h1#page-title {color: black;}
<h1 id="page-title">Meerkat <em>Central</em></h1>
<p>
Welcome to the best place on the web for meerkat information!
</p>
====================================
body {font-size: 0.8em;}
====================================
body, table, th, td {font-size: 0.8em;}
====================================
#toolbar {color: white; background: black;}
====================================
a:link {color: blue;}
====================================
#toolbar {color: white; background: black;}
#toolbar a:link {color: white;}
====================================
h1 {color: red;}
h1 {color: blue;}
====================================
p {color: gray !important;}
<p style="color: black;">Well, <em>hello</em> there!</p>
====================================
p em {color: black;} /* author's style sheet */
p em {color: yellow;} /* reader's style sheet */
====================================
p em {color: black !important;} /* author's style sheet */
p em {color: yellow !important;} /* reader's style sheet */
====================================
p#bright {color: silver;}
p {color: black;}
<p id="bright">Well, hello there!</p>
====================================
h1 {color: red;}
h1 {color: blue;}
====================================
p em {color: purple;} /* from imported style sheet */
p em {color: gray;} /* rule contained within the document */
====================================
:link {color: blue;}
:visited {color: purple;}
:hover {color: red;}
:active {color: orange;}
====================================
:active {color: orange;}
:hover {color: red;}
:link {color: blue;}
:visited {color: purple;}
====================================
:link {color: blue;}
:hover {color: red;}
:visited {color: purple;}
:active {color: orange;}
====================================
:link {font-weight: bold;}
:visited {font-style: italic;}
:hover {color: red;}
:active {background: yellow;}
====================================
:link {color: blue;}
:visited {color: purple;}
:link:hover {color: red;}
:visited:hover {color: gray;}
====================================
:link {color: blue;}
:visited {color: purple;}
:link:hover {color: red;}
:visited:hover {color: gray;}
:link:active {color: orange;}
:visited:active {color: silver;}
====================================
:link:hover:active {color: orange;}
:visited:hover:active {color: silver;}
==================
\ No newline at end of file
chapter: Values and Units
==================
h1 {color: maroon;}