CSS Visual Dictionary
Genres: Reference
Book Preface
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 https://codepen.io/sashatran/ 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 [email protected] or via his Instagram and Dribbble pages. His username fabiodicorleto is the same across his social media accounts.
…for their contributions and licensing permission to use their work in this edition of CSS Visual Dictionary published by Learning Curve book 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
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).
CSS Variables
You can also use CSS variables to avoid redundancy when reusing the same values.
Source Code 21
element { –default-color: yellow } /* define variable –default-color */
Source Code 22
element { –variable-name: 100px; } /* define variable –variable-name */
Source Code 23
element { background-color: var(–default-color); } /* set background color to –default-color variable */
Source Code 24
element { width: var(–variable-name); } /* set width to 100px */
Sass/SCSS
Although SASS and SCSS are outside of the scope of this book, they are recommended for advanced CSS specialists. Note, that Sass/SCSS will not work out of the box in any browser. You need to install SASS compiler from the command line in order to enable it on your web server.
Source Code 25
$a: #E50C5E;
$b: #E16A2E;
.mixing-colors {
background-color: mix($a, $b, 30%);
}
I encourage you to further study Sass/SCSS on your own, but only once you feel comfortable with standard CSS described in this book!
| Download Ebook | Read Now | File Type | Upload Date |
|---|---|---|---|
| Download here
|
Read Now | March 13, 2020 |
How to Read and Open File Type for PC ?
