rs79.vrx.palo-alto.ca.us
Kwif-Reference guide to CSS and CSS3
Kwik-Reference guide to CSS and CSS3

CSS3 was the last version of CSS that was still one monolithic entity. Now, the "background poeple" are off in their own world doing their thing, while the "CVG group" and "gradient group" are working in their bits and there is little of no chance all of these will have the same ideas about release dates. Thus, as CSS evolves you may have last months Background but the year befores spec for something else. This is more of an issue in theory than in practice and things haven're really changed much at all in CSS-land since about 2005.

Syntax

Introduction

How to specify and use CSS in your HTML pages: there are different ways to do it.



Gradients

Gradients

Between 2008-2012 browser writers made programmed gradients work, both linear and radial although at this time of writing (dec 2012) none have made the commands work per the spec and all require browser prefixes still.

Update: 2017; they all work, mostly. Some phones not so much, but prefix-less gradients are a reality now.


Color

Color

New methods for using color and transparency.



06

Background

When using the shorthand property the order of the property values is:

  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-attachment
  • background-origin
  • background-clip
  • background-color




08

Borders/Lines


Top Right Bottom Left

Border: size style color

where style is one of:

  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset


The HTML <HR> element is controlled the same way. The default behaviour is given by:
hr { 
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

Conics

Shapes and Geometry - Conical Sections

Advanced : Geometry for programmers

  • The mathematical foundation of css curve theory and practice of rendering curves in css3
  • Curves can make any shape in nature.
  • Bezier splines approximate these curves well and is what Adobe Postscript/Acrobat is based on. CSS has zero support for this state of the art 1987 technology but curves can be approximates as sections of an eclipse.

10

Characters

HTML5 has 40960 characters. No single font in the world has all of them (some come close) and many useful odd characters can be found in many common fonts.



Variables

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document.

They are set using custom property notation or a double-dash (or hyphen) prefix before the identifier.

e.g. --main-color: black;

accessed using the var() function

e.g., color: var(--main-color); .



Shadow

Box shadow and text shadow are the only two forms of shadow effect available.

  1. box-shadow: [inset] <x-offset> <y-offset><blur><radius><color>


15

Units of measurement

There's more than just PX! There are over a dozen different ways to specify dimension other than with PX


old_back

Backgrounds