CSS Cookbook

by Christopher Schmitt

As the industry standard method for enriching the presentation of HTML-based web pages, Cascading Style Sheets (CSS) allow you to give web pages more structure and a more sophisticated look. But first, you have to get past CSS theory and resolve real-world problems. For those all-too-common dilemmas that crop up with each project, CSS Cookbook provides hundreds of practical examples with CSS code recipes that you can use immediately to format your web pages. Arranged in a quick-lookup format for easy reference, the second edition has been updated to explain the unique behavior of the latest Microsoft's IE 7 and Mozilla's Firefox 1.5. Also, the book has been expanded to cover the interaction of CSS and images and now includes more recipes for beginning CSS users. The explanation that accompanies each recipe enables you to customize the formatting for your specific needs. With topics that range from basic web typography and page layout to techniques for formatting lists, forms, and tables, this book is a must-have companion, regardless of your experience with Cascading Style Sheets.

Genres: Programming, Reference, Technical, Web, Nonfiction, Website Design, Computers

516 pages, Paperback

First published August 1, 2004

About the author

An award winning designer, web developer, writer, and speaker.
He earned an Undergraduate Degree from Florida State University in Fine Arts with emphasis in Graphic Design. He also earned a Master’s Degree from Florida State University in Communication for Interactive and New Communication Technologies and a Graduate Certificate in Project Management from FSU’s College of Communication. Christopher authored many books on web design, most notably the “CSS Cookbook” for O’Reilly Publishing. He produced and led the NonBreaking Space Show podcast, which discussed web design and related issues. Through his company, Heatvision, he hosted web-related professional conferences around the world, improved the accessibility and structure of his clients’ websites, and advocated for a more inclusive Web.

Reviews

[Matt]

I was sort of fed up with this new design they use on Goodreads. Especially for the font they use on the review pages. A Sans-Serif font for a running text?! Give me break.

The easiest solution I found (so far) is to use a plugin for my browser with which I am able to adjust the styles of any webpage to make it look like I want. This plugin is called simply Stylish.

What I basically wanted was to

- use a Serif-Font (Georgia in this case) almost anywhere on Goodreads
- make the text of a review a little larger
- make the text of a review justified
- some other things :)

Please note: This is a just my personal idea of a new style and it's far from perfect. It only works on the browser where you installed it. I don't take any responsibility.

UPDATE Aug 9, 2016

The new design of the timeline is hard to tackle to make it look good to me. I added four more styles to make it at least a little bit more pleasing to my eyes: The book covers, blurbs and comments become smaller and the review text uses a serif font, is justified and has a yellowish background color. You can update the style within the stylish plugin.

UPDATE Oct 8, 2017

As of today, it seems, we are blessed with a so called iframe that displays google-ads in the top right corner of the timeline. Although my ad-blocker takes care of the content (read: removes it), there was still a nasty looking empty space there, so I had to update my stylesheet accordingly, spending a minute of my valuable free Sunday time. The bill's in the mail.

If you already installed the stylesheet you have to repeat step 2 below and update it.

- - - - - INSTALLATION - - - - -

Step 1
Install the Stylish plugin. You can download it from here (it's available for Firefox, Chrome, Safari, and Opera)

https://userstyles.org/stylish

Step 2

Click here to install the stylesheet. It's called Goodreads Reloaded:

https://userstyles.org/styles/121918/...

Install the style by clicking on the green button labeled "Intall with Stylish" on the upper right. You need Javascript to be enabled for that.
After installing you can edit the styles to your need.

If you don't exactly know what this is all about you should read the book at hand.

Here's the current code I use for my stylesheet:

/* Copy/Paste all the text below */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("goodreads.com") {

 body, p, ol, ul, td, th, .readable, .updateAction {
 font-size: 14px;
 font-family: Georgia,Times New Roman,serif; 
 }
 
 div[data-react-class="ReactComponents.GoogleBannerAd"] {
 display: none;
 }
 
 iframe { 
 display: none; 
 }
 
 .smallText { 
 font-size: 12px !important ;
 font-family: Georgia,Times New Roman,serif; 
 }

 .mediumText { 
 font-size: 16px !important ;
 font-family: Georgia,Times New Roman,serif; 
 }

 .comment .reviewText { 
 font-size: 16px !important ;
 font-family: Georgia,Times New Roman,serif; 
 }

 .reviewText {
 line-height: 1.3;
 font-family: Georgia,Times New Roman,serif; 
 }
 
 .updateAction, .updateBodyAfterImage, .reviewText {
 text-align: justify;
 }

 .xhr_comment_body {
 font-family: Georgia,Times New Roman,serif; 
 font-size: 12px !important ;
 }

 blockquote {
 border-left: 2px solid #EEF;
 font-style: italic;
 padding: 6px;
 margin-right:0;
 }

 .reviewText a {
 text-decoration: none;
 border: 1px dotted #CCC;
 }

 .reviewText a:hover {
 background:#DDD;
 }

 .bookTitle {
 font-family: Arial,sans-serif;
 font-weight: normal;
 }

 .buttonBar {
 font-weight: normal;
 font-size:12px;
 }

 tr.update td {
 font-size: 14px !important ;
 }
 
 input[type="text"], 
 input[type="search"], 
 input[type="email"], 
 input[type="password"], 
 textarea {
 font-family:monospace;
 } 

 div.hreview {
 padding-top:8px;
 background: rgb(251, 251, 251) none repeat scroll 0% 0%;
 }

 .reviewText a.commenterIcon {
	 float: left;
	 padding-right: 0;
	 margin-left: -33px;
 }

 .moderatorIcon {
	 margin-left: -33px;
 }
 
 tr.update td {
 font-size: 120% !important;
 text-align: justify;
 }

 /* ========================================== */
 
 .gr-mainContentContainer {
 background-color: #FFF8F0;
 }
 
 .gr-book__image--large {
 margin-right: 16px;
 max-width: 60px;
 }
 
 .gr-book__description {
 line-height: 1.4;
 font-size:smaller;
 visibility: hidden; display: none;
 }
 
 .gr-comment {
 font-size: smaller;
 }

 .gr-newsfeedItem__reviewText {
 font-family: serif;
 text-align: justify;
 background: rgb(255,255,240);
 } 
 
 article header {
 background-color:#F0F0F0 !important;;
 }
 .circularIcon {
 border-radius: 2px;
 }
 
 div.siteAnnouncement, div.choiceWidget { display:none; } 
 
 /* added by Jimmy (see comments in review)
 @media (min-width: 1220px) {
 .gr-newsfeedItem__userStatusText, .gr-newsfeedItem__generalStatusText, .gr-newsfeedItem__reviewText {
 max-width: none;
 }}

 .gr-newsfeedItem__userStatusText, .gr-newsfeedItem__generalStatusText, .gr-newsfeedItem__reviewText {
 max-width: none;
 }

 @media (min-width: 1220px) {
 .homePrimaryColumn {
 width: 800px;
 }}

 @media (min-width: 1220px) {
 .homeTertiaryColumn {
 width: 0px;
 display: none;
 }} 
 */

}
/* THE END */

[Will Semin · Rating 5 out of 5]

Having finished this book, I'm simply itching to do some refactoring.

[Monica Willyard Moen · Rating 4 out of 5]

I value this type of book because it gives lots of code samples that can be used in projects, while also providing explanations of how and why they work as they do. This book helped me when I was first learning how to use style sheets with websites.

[Sammy · Rating 3 out of 5]

I liked it! I could relate to much of the writing angst and decisions about stepping away from the novel writing. Not sure I’d recommend it for non-writers though.

[Sebah Al-Ali · Rating 3 out of 5]

رغم أن نسخة الكتاب قديمة (2007) إلا أني تعلمت الكثير من المعلومات و استطعت تأكيد الكثير مما تعلمته بالتجربة مع السي إس إس.

أعجبني منهج الكتاب المتبع: قسم الكتاب على فصول، في كل فصل يتناول جانب من جوانب السي إس إس، و بدلا من تقدم المعلومات بأسلوب شرح ممل و نظري، لجأ إلى طرح "مسائل" و "مشاكل" قد يواجهها المصمم و التي تتعلق بالفصل، ثم يقدم الجواب للمسألة مع شرح الأساسات المتعلقة بها. فـ تعلمت الأساس النظري في محيط عملي. كان ممتعا جدا.


هناك الكثير الذي أود تدوينه، لكن وقتي لا يسعفني. و أريد الانتقال لكتب أخرى. لذا لن أستطيع تدوين كل ما أود الاحتفاظ به من الكتاب. لكن، مبدئيا:

* أعجبتني كثيرا مسألة تحديد تنسيق الأشياء بشكل أكثر تفصيلا. بمعنى
li {}
تحدد معالم كل نقطة بشكل عام. لكن حين نستخدم التالي:
li+li{}
يقوم بتحديد معالم النقاط التي تسبقها نقطة أخرى. يعني ينطبق على النقطة 2 و 3 و .... و لا ينطبق على النقطة 1. و المثل للفقرات و الأشياء الأخرى. هذا مفيد جدا. <- استخدمته فور تعلمي له


* و أيضا أعجبتني كثيرا خاصة تحديد التنسيق بناء على المتحوى في الروابط. مثل:
a[href="wa7di.com":]{}
تنسق الروابط التي تشير لمدونتي بشكل حصري!. خاصية مبهرة يمكن استخدامها بطرق متعددة.
و حين يكتب على شكل:
a[title~="happy":]{}
أي رابط يحوي عنوانه هذه الكلمة، يتم تنسيقه بهذا. أما حين نكتبه مثلا:
a[href|="digital":]{}
ينسق الروابط التي تحوي تلك الكلمة مع -. إذن الفكرة العامة:
a [attribute=val:]{}
(^بدون النقطتين. :/! الجودريدز بشكل تلقائي يضيف نقطتين لهذا النوع من الأقواس.)

*و لكي أتذكر، الأشياء التي تلحق الرابط:
a:link, a:visited, a:hover, a:active

*أيضا تعلمت أنه يمكن أيضا التحكم بشكل أكبر بتنسيق الفقرات. من خلال استخدام:
p:first-letter{} ينسق أول حرف!
p:first-line{} ينسق أول سطر!


* positions: كنت أجد صعوبة في فهم منطقها، لكن الآن فهمت.
- absolute: position based on window rather than element's default position.
- relative: position modified based to its natural position as rendered by the browser.


* لم أجرب بعد، لكن يقول الكاتب أنه يمكن استخدام أكثر من خلفية في أمر الخلفية. مثال:
background: url(x.jpg) center no-repeat,
url(y.gif) top center no-repeat,
url(x.gif) 40% 24px no-repeat;


*coloring the scrollbar:
body, html{
scrollbar-shadow-color:;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-3dlight-color:;
scrollbar-track-color:;
scrollbar-darkshadow-color:;
scrollbar-arrow-color:;
}

*ممكن إضافة محتوى للأشياء من خلال السي إس إس!. مثلا:
li:before{content: ">> ";}
li:after{content:".";}


*
media="print, screen"
types: all, handheld (mobiles), print, projection, screen.
or: in css, @media print{}, @media scree{}

[John Chilton · Rating 3 out of 5]

This book succeeds in some places and gets fairly bogged down in others. I cannot hold that against it too much though, I read it straight through, but it probably is much better as a reference. Despite some flaws, this book has some real strengths. Unlike a lot of technical book, this book is rooted deeply in the practical. It mentions JavaScript solutions where they are useful. It has lots of links to blog posts and websites with additional information. Some books are written by people paid to write books, other books are written by practitioners who have learned from experience and have something to say. This book definitely strikes me as the latter. I think used as an actual cookbook, this book definitely deserves a spot on your bookshelf.

[Caryl Westerberg · Rating 2 out of 5]

Lots of CSS examples to wrap your mind around. I think there must be some errors, or some of the examples just do not make sense.

I wish some of these examples were more fleshed out. The CSS is given with no HTML usage or example of the effect. Since I'm still learning CSS, this make it challenging.

[Will Smith · Rating 5 out of 5]

Its more of a reference, but I'm always reading it to get new ideas. The only problem i have with this book is- because I'm learning on my own and this is second edition - it assumes i know a lot more than i actually do, so i have a hard time understanding some of its concepts

[Mike · Rating 5 out of 5]

I can't say I've read this book cover-to-cover, but of all my CSS books, I find this is the one I refer to the most. Actually, I have a number of O'Reilly "Cookbook" technical books, and they are uniformly the most useful books of my collection.

[joke · Rating 5 out of 5]

As the industry standard method for enriching the presentation of HTML-based web pages, Cascading Style Sheets (CSS) allow you to give web pages more structure and a more sophisticated look. But first, you have to get past CSS theory and resolve real-world problems.

[Sooraj Raju · Rating 4 out of 5]

Part of starting the new business.

[Meryl Evans · Rating 4 out of 5]

Disclaimer: I helped behind the scenes in this book.

[Vladimir · Rating 2 out of 5]

Oh my god. It's one of the most boring book which I read.
All advices were actually in the start of century. Now this book should be considered as the museum exhibit.

[Caryl Westerberg · Rating 3 out of 5]

Cool to learn all sorts of fun ways to use CSS.