Search Ebook here:


CSS Visual Dictionary



CSS Visual Dictionary PDF

Author: Greg Sidelnikov

Publisher: Independently published

Genres:

Publish Date: June 11, 2018

ISBN-10: 1983065633

Pages: 256

File Type: PDF

Language: English

read download

Ads

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

Ads

PDF March 13, 2020


Do you like this book? Please share with your friends, let's read it !! :)

How to Read and Open File Type for PC ?