CSS-CS


CHEAT SHEETS


Box Element quick look

..


colors: creative  –  crockford  –  Picker


Unit Types

Distance & Size & Position:

  • Pixels: px;  :  screen pixels.
  • em: 1.3em; = 130% the size of parent : Relative to “Parent” element property.
  • rem: 2.1rem; :  Relative to “Document Root” (Body) element property.
  • % :  85%;  : Relative to the holding container.

Colors

  • Hex: #RRGGBB  exadecimals 0..9 A..F  = #FFFFFF;
  • Name: its literal name = black;
  • RGB: rgb(0, 0, 0); of rgb(255, 255, 255);
  • RGBa: rgba(0, 0, 0, 0.5);

Syntax

This is how syntax works.


Selectors

Multiple selectors can be used on the same line with the following syntax.

Decendant Selector

here we use:  ” ” + “a”  to target all anchor tags whiting the <p>.

Id & Class

Combination Selector

Pseudo Selectors


Properties

Lists of CSS Properties: w3.org , w3schools – blooberryMDN

Formats of Properties

Extra Spaces

Simple Menu using List

.


Layout — (Positioning)

Introduction to CSS Development:  Lectures 14 & 15:   float,  clear,  position : relative -or- absolute

block Formatting Context: How the browser controls and contains floats.

 


Centering

Inline

Horizontal

Vertical


Normalize

Pages can be seen different in different computers with diff O.S. or different Browser, there few tools to deal with this problem:

Reset Files.

Normalize: cdnjs.com : A cdn is a site that is build for serving content to multiple users.

 


Miscellaneous CSS

Clear Fix:  Introduction to CSS Development:  Lecture 20.

Specificity:

!important > Style At. > Id > Class > Element

CSS Architecture

  1. Re-usability
  2. Maintainability
  3. Modularity
  4. Scalability
  5. Semantics

Use Calc to divide width

x


Libraries

Font Awesome

Links: The-Icons

 

 

 

 

 

 

 

..



Copyright 2017. All rights reserved.

Posted January 26, 2017 by Edmundo in category "FED