Welcome to my website.

Disclaimer for Kindle, IOS and Androidbased Readers You are reading Kindle e-Book conversion of the original print manuscript. To accurately transfer a technical manuscript containing CSS Source Code to the e-book format acceptable for Kindle readers often takes extraordinary editing measures. As a long time publisher Learning Curve strives to provide the best experience for our Kindle readers given limitations of the medium. For example, source code is traditionally difficult to implement correctly for Kindle format. Although Learning Curve books -originally designed as a desk reference -- are best consumed in the paperback format. Nonetheless, we've gone to a great extent to make sure that the content of this technical book is readable on as many Amazon Kindle, Apple and Android-based devices as possible in its most acceptable format. Learning Curve Books is a TradeMark of Learning Curve Books, LLC. © 2018 . Title: CSS -- Visual Dictionary Edition: I Release: June 1, 2018 Genre: Web Design & Software Education Publisher: Learning Curve Books Imprint: Independently published Author: Greg Sidelnikov Contact: The primary purpose of Learning Curve Book publishing company is to provide effective education for web designers, software engineers and all readers who are interested in being edified in the area of web development. This edition of CSS -- Visual Dictionary was created to speed up the learning process of Cascading Style Sheets -- a language for decorating HTML elements. For questions and comments about the book you may contact the author or send an email directly to our office at the email address mentioned below. Special Offers & Discounts Available Schools, libraries and educational organizations may qualify for special prices. Get in touch with our distribution department at © 2018 Learning Curve Books, LLC. CSS Visual Dictionary Several months have gone into creation of the book you are holding in your hands (or on your device) right now. Indeed, CSS -- Visual Dictionary is a work of love and hard labor. Thoughtfully created to help maximize your journey on your way to expanding your knowledge of CSS -- Cascading Style Sheets. A language for decorating HTML elements. We hope that this volume will serve as a faithful guide on your desk in the years to come. Special Thanks To: Sasha Tran Front End Developer for contributing the CSS rendition of the Tesla and complete CSS source code. If you like her CSS art work, you can get a hold of her via her website sashatran.com, her Codepen.io account at or on Twitter @sa_sha26. Fabio Di Corleto Graphic Designer for contributing the original concept work for the Tesla in space image. If you're looking for a talented Graphic Designer you can get in touch with him at or via his Instagram and Dribbble pages. His username fabiodicorleto is the same across his social media accounts. edition of CSS Visual Dictionary publishing company. CSS Properties and Values CSS has 415 unique properties. You can verify this with a simple JavaScript code snipplet as follows: Source Code 0 var element = document.createElement("div"); var count = 0; for (index in element.style) p++; console.log(p); // outputs 415 as of June 1st, 2018. There may be more or less in the future as new features are being added to the specification and old ones deprecate. A large number of CSS properties that are rarely in use (or still don't have full browser support across all major browsers) were skipped from the contents of this book. They would only create unneeded clutter. Instead, in this book we focused only on CSS properties that are in common use by web designers and developers today. A great deal of effort went into creation of CSS Grid and Flex diagrams in particular. Placement CSS code can be saved in a separate, external file and included as follows: Source Code 1 Welcome to my website. CSS style instructions stored in "style.css" will be applied to this page. Or you can type it directly into your HTML document between: tags. Simple Assignments To assign a value to a property of an HTML element whose id is "box", you would write something like this: Source Code 2 #box { property: value; } Depending on the property, the value can be a measure of space specified in pixels, pt, em or fr units, a color... in named red, blue, black, etc..., hexadecimal #0F0 or #00FF00... or rgb(r, g, b) formats. Other times the value is unique to a specific property name that cannot be used with any other property. For example, the CSS transform property can take a value called rotate that takes an angle in degrees -- here, CSS requires that you append "deg" to the numeric degree value: Source Code 3 #box { transform: rotate(45deg); } /* rotate this element by 45 degrees in clock-wise direction */ CSS Comments CSS only supports "block comment" syntax for creating in-code comments. By surrounding a block of text or CSS code with /* comment */ symbols. Source Code 4 color: #FFFFFF; /* Set font color to white using Hexadecimal value */ Source Code 5 color: #FFF; /* Set font color to white using short Hexadecimal value */ Source Code 6 color: white; /* Set font color to white using named value */ Source Code 7 color: rgb(255,255,255); /* Set font color to white using an RGB value */ Source Code 8 color: var(--white-color); /* Set font color to white using a CSS variable */ You can also comment out entire sections of CSS code to temporarily disable them for future use: Source Code 9 content: "hello"; border: 1px solid gray; color: #FFFFFF; */ CSS does not support inline syntax // inline comments are not allowed or rather... have no effect on the browser's CSS interpreter. Other than they might confuse it a bit! Assignment Patterns You can use property: value pair combination to set background images, colors and other basic properties of HTML elements. You could alternatively use property: value value value to assign multiple values to a single property, to avoid redundant declarations. These are called shorthands. They usually separate multiple property values by space. But CSS has undergone considerable upgrades over the years. Before we begin exploring the visual diagrams describing each CSS property it is imperative to understand how CSS interprets property and value patterns. The majority of properties use these patterns: Source Code 10 property: value; /* The most common pattern */ Source Code 11 property: value, value, value;/* separated by comma */ Source Code 12 property: value value value; /* separated by space*/ Properties that refer to a size of something can also be calculated using calc keyword: Source Code 13 property: calc(value[px]); /* calculated */ Source Code 14 property: calc(value[%] - value[px]); /* calculated between % and px -ok. */ Source Code 15 property: calc(value[%] - value[%]}; /* calculated between % and % -- ok. Source Code 16 property: calc(value[px] + value[px]); /* add px to px -- ok. */ Source Code 17 property: calc(value[px] - value[px]); /* subtract px from px -- ok. */ Source Code 18 property: calc(value[px] * number}); /* multiply px by number -- ok. */ Source Code 19 property: calc(value[px] / number});/* divide px by number -- ok. */ Source Code 20 property: calc(number / value[px]}); /* divide number by px -- error. */ The last example will produce an error. When using calc you cannot divide a number by a value specified in pixels (px).