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

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.

Reading Blog || Socials

This is a great book for learning industry standards when it comes to styling web pages. Internal versus external stylesheets, the explanation of why they are even called cascading style sheets, and so much more. My only concern with these textbooks is that they get outdated so quickly due to the advancements happening as quickly as they are. This is a great reference guide!

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.

رغم أن نسخة الكتاب قديمة (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{}

Disclaimer: I helped behind the scenes in this book.

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

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.

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.

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

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.

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:

n  

/* 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 {
t float: left;
t padding-right: 0;
t margin-left: -33px;
 }

 .moderatorIcon {
t 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 */

n