CSS3 NOTESREX WANG

DEC. 2015

AUCKLAND

REFERENCES

http://www.w3schools.com/css/

http://www.w3schools.com/css/css_font.asp

http://www.w3schools.com/css/css_table.asp

http://www.w3schools.com/css/css_boxmodel.asp

http://www.w3schools.com/css/css_display_visibility.asp

http://www.w3schools.com/css/css_positioning.asp

http://www.w3schools.com/css/css_float.asp

http://www.w3schools.com/css/css_pseudo_classes.asp

http://www.w3schools.com/css/css_rwd_grid.asp

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

http://www.w3schools.com/css/css_rwd_images.asp

http://www.w3schools.com/cssref/css_selectors.asp

http://www.w3schools.com/cssref/trysel.asp

http://www.w3schools.com/cssref/css_ref_aural.asp

http://www.w3schools.com/cssref/css_websafe_fonts.asp

http://www.w3schools.com/cssref/css_animatable.asp

http://www.w3schools.com/css/css3_borders.asp

http://www.w3schools.com/css/css3_backgrounds.asp

http://www.w3schools.com/css/css3_gradients.asp

http://www.w3schools.com/css/css3_text_effects.asp

http://www.w3schools.com/css/css3_buttons.asp

http://www.w3schools.com/css/css3_multiple_columns.asp

http://www.w3schools.com/css/css3_box-sizing.asp

http://www.w3schools.com/css/css3_flexbox.asp

http://www.w3schools.com/css/css3_mediaqueries.asp

http://www.w3schools.com/css/css3_mediaqueries_ex.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss3_mediaqueries_ex6

http://www.w3schools.com/css/css3_2dtransforms.asp

http://www.w3schools.com/css/css3_3dtransforms.asp

http://www.w3schools.com/css/css3_transitions.asp

http://www.w3schools.com/css/css3_animations.asp

http://learnlayout.com/

BASIC

WHY CSS

Solved a Big Problem HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page.

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers.

Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work! The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

SYNTAX AND SELECTORS

selectors element selector: based on the element name

id selector: #identifier

class selector: .classname or p.center

......

to group selectors, separate each selector with a comma.

HOW TO CSS

three ways to insert a style sheet external style sheet

internal style sheet

inline style

cascading order 1. inline style

2. external and internal style sheets

3. browser default

BACKGROUND

the css background properties are used to define the background effects for elements background-color

background-image

background-repeat

repeat-x

repeat-y

no-repeat

background-position

right top

background-attachment

fixed; /* will not scroll with the rest of the page */

background: specify all the background properties in this one single

BORDER

(top, right, bottom, left)

border-style: 1 to 4 dotted, dashed, solid, double 3d: groove, ridge, inset, outset none, hidden

border-width: 1 to 4 thine, medium, thick px, pt, cm, em, etc

border-color name, rgb, hex, transparent default: color

border-top, border-top-

border-right, border-right-

border-bottom, border-bottom-

border-left, border-left-

border - shorthand property for: border-width

border-style (required)

border-color

MARGIN & PADDING

padding INSIDE the border padding-top

padding-right

padding-bottom

padding-left

padding

values: inherit

length: px, pt, em, etc.

%

margin OUTSIDE the border margin-top

margin-right

margin-bottom

margin-left

margin

values: auto, inherit

length: px, pt, em, etc.

%

WIDTH & HEIGHT

width & height auto

length: px, cm, etc.

%

do not include padding, borders, or margins

max-width length: px, cm, etc.

%

none

will override width

max-height

min-width

min-height

TEXT & LINK

TEXT

color hex, rgb, name

must also define background-color

text-alignment left, right, centered, justify

text-decoration overline

line-through

underline

none: often used to remove underlines from links

text-transform uppercase lowercase capitalize

text-indent: first line; like 50px

letter-spacing: specify the space between the characters in a text; like 3px

word-spacing: specify the space between the words in a text

line-height: specify the space between lines; like 0.8, 1.8

direction: text direction; like rtl

FONT

In CSS, there are two types of font family names: generic family - a group of font families with a similar look

font-family - a specific font family (like "Times New Roman" or "Arial")

Generic families: serif - have small lines at the ends on some characters

serif is a slight projection finishing off a stroke of a letter in certain typefaces .

sans-serif - do not have the lines at the ends of characters “sans” means “without”

monospace - all characters have same width

On computer screens, sans-serif fonts are considered easier to read than serif fonts.

font-family

font-size

font-style

font-weight

font-variant

font

font-family should hold several font names as a "fallback" system

if the browser does not support the first font, it tries the next font, and so on

with the preferred font, and end with a generic family

font-size: absolute | relative px

em

1em is equal to the current font size

by default is 16px

%

font-style normal, italic, oblique

font-weight normal, bold

font-variant normal, small-caps

font – all in one

LINK

links can be styled differently depending on what state they are in a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

!! MUST IN THIS ORDER !!

the text-decoration property is mostly used to remove underlines from links.

the background-color property can be used to specify a background color for links.

LIST & TABLE

LISTthere are two main types of lists in html <ul> - unordered list

<ol> - ordered list

css list properties will help to: set different list item markers

set image as the list item marker

add background colors to lists and list items

colors may make lists look more interesting

list-style-type circle, square

upper-roman

lower-alpha

list-style-image url(“the_url”)

list-style-position inside, outside

list-style - short hand

TABLE

The look of an HTML table can be greatly improved with CSS. border

border-collapse: collapse

width, height: 100%, 50px

text-align: horizontal alignment

vertical-align: vertical alignment: top, bottom, middle

border-bottom: horizontal divider

:hover - hoverable table

tr:nth-child - zebra striped table

border-spacing, caption-side, empty-cells, table-layout

A responsive table is the one that will display a horizontal scroll bar if the screen is too small to display the full content.

To make a table responsive, add a container element (like <div>) with overflow-x:auto around the <table> element.

a fancy table

BOX & LAYOUT

BOX MODEL

All HTML elements can be considered as boxes.

In CSS, the term "box model" is used when talking about design and layout.

Content - where text and images appear

Padding - clears an area around the content; is transparent

Border - goes around the padding and content

Margin - clears an area outside the border; is transparent

css properties of height and width is about the content

OUTLINE

An outline is a line that is drawn around elements (outside the borders).

The outline is NOT a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.

outline-width

outline-color

outline-offset

outline - shorthand

outline-style dotted, dashed, solid, double

groove, ridge, inset, outset

none, hidden

LAYOUTThe display property is the most important CSS property for controlling layout. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

A block-level element always starts on a new line

takes up the full width available (stretches out to the left and right as far as it can).

<div> <h1> <h6> <p> <form> <header> <footer> <section> etc.

An inline element does not start on a new line

only takes up as much width as necessary.

<span> <a> <img> etc.

display:none commonly used with JavaScript to hide and show elements without deleting and recreating them

display:none

the element will be hidden

the page will be displayed as if the element is not there

visibility:hidden

the element will be hidden

the element will still take up the same space as before

the element will still affect the layout

WIDTHMAX-WIDTH

Set the width of a block-level element will prevent it from stretching out to the edges of its container.

Then, to set the margins to auto will horizontally center the element within its container.

Problem will occur when the browser window is smaller than the width of the element.

Using max-width instead will improve the browser's handling of small windows. This is important when making a site usable on small devices.

POSITION

The position property specifies the type of positioning method used for an element.

There are four different position values:

static relative fixedabsolute

Elements are then positioned using the top, bottom, left, and right properties.

There properties work differently depending on the position value.

POSITION - STATIC

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties

always positioned according to the normal flow of the page

POSITION - RELATIVE

An element with position:relative is positioned relatively to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.

Other content will not be adjusted to fit into any gap left by the element.

POSITION - FIXED

An element with position:fixed is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

POSITION - ABSOLUTE

An element with position:absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positionedancestors, it uses the document body, and moves along with page scrolling. A "positioned" element is one whose position is anything except static.

FLOAT & CLEARThe float property specifies whether or not an element should float.

The float property can simply be used to wrap text around images.

Elements after a floating element will flow around it. To avoid this, use the clear property.

The clear property is used to control the behaviour of floating elements, specifying on which sides of an element floating elements are not allowed to float.

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. The pair overflow:auto can be added to the containing element to fix this problem.

It is common to do entire web layouts using the float property.

http://www.w3schools.com/css/tryit.asp?filename=trycss_float2

http://www.w3schools.com/css/tryit.asp?filename=trycss_float3

http://www.w3schools.com/css/tryit.asp?filename=trycss_float4

http://www.w3schools.com/css/tryit.asp?filename=trycss_float5

INLINE-BLOCKIt has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the float property.

However, the inline-block value of the display property makes this even easier.

inline-block elements are like inline elements but they can have a width and a height.

HORIZONTAL ALIGN - CENTER

Setting the width of a block-level element will prevent it from stretching out to the edges of its container.

Use margin:auto to horizontally center an element within its container.

HORIZONTAL ALIGN - LEFT & RIGHTposition:absolute elements are removed from the normal flow

can be overlap other elements

do define margin and padding for <body>

float do define margin and padding for <body>

SELECTOR

COMBINATORS

There are four different combinators in CSS3

descendant selector (space)

child selector (>) | immediate children

adjacent sibling (+) | “adjacent” means “immediately following”

general sibling selector (~) | all siblings (?? all following siblings ??)

PSEUDO CLASSES

A pseudo-class is used to define a special state of an element.

selector:pseudo-class

Pseudo-classes can be combined with CSS classes.

http://www.w3schools.com/css/css_pseudo_classes.asp

PSEUDO ELEMENTS

A CSS pseudo-element is used to style specified parts of an element.

selector::pseudo-elementPseudo-elements can be combined with CSS classes.

ATTRIBUTE SELECTORS

[attribute] elements with special attribute

[attribute="value"] elements with special attribute and value

[attribute~=“word”] elements with an attribute value containing a specified word

[attribute|=“word”] elements with special attribute and starting with the specified value(whole world)

“word” or “word-***”

[attribute^=“slice”] elements with special attribute and starting with the specified value,

“slice***”

[attribute$=“slice”] elements with special attribute and with value ends with a specified value

[attribute*=“slice”] elements whose attribute value contains a specified value

CSS COUNTER

counter-reset - creates or resets a counter

counter-increment - increments a counter value

counters() | counter() - adds the value of a counter to an element

content - inserts generated content

http://www.w3schools.com/css/css_counters.asp

EMPIRICAL

NAVIGATION BAR

Navigation Bar = List of Links

http://www.w3schools.com/css/css_navbar.asp

DROPDOWN

http://www.w3schools.com/css/css_dropdowns.asp

OPACITY

IMAGE GALLERY

IMAGE SPRITES

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

http://www.w3schools.com/css/css_image_sprites.asp

CSS3

INTRODUCTION

CSS3 is the latest standard for CSS.

CSS3 has been split into "modules”.

Selectors

Box Model

Background and Borders

Image Values and Replaces Content

Text Effects

2D/3D Transformation

Animations

Multiple Column Layout

User Interface

etc.

CSS3 BORDER

Rounded Corner

border-radius

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

border-radius:$all

border-radius: $tl $tr $br $bl

border-radius: $tl $tr-bl $br

border-radius: $tl-br $tr-bl

elliptical corners - border-radius: 50px/15px;

Border Images

border-image the image to use as the border

where to slice the image

whether the middle section should be repeated or stretched

the specified image will be sliced into nine sections

http://www.w3schools.com/css/css3_border_images.asp

CSS3 BACKGROUND

multiple backgrounds

background-size

can be used to specify the size of the background image

before css3, the actual size was presented

size can be: lengths, percentages, contain, cover, or auto

full size background image

background-origin & background-clip

border-box

padding-box

content-box

COLOURS

CSS supports colour names, hexadecimal, and RGB colour

Additionally CSS3 introduces: RGBA colour

HSL colour

HSLA colour

opacity

GRADIENT

background: linear-gradient(direction, colour-1, colour-2, …);

direction can be: omitted, to right, to right bottom, -90deg

colours can be specified using RGBA

background: radial-gradient(shape size at position, colour-1, colour-2, …);

SHADOW

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

To add more than one shadow to the text, add a comma-separated list of shadows.

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

text-shadowbox-shadow

CSS3 TEXT

text-overflow

how overflowed content that is not displayed should be signaled to the user

word-wrap

allows long words to be able to be broken and wrap onto the next line

word-break

specifies line breaking rules

text-align-last

text-emphasis

text-justify

WEB FONTS

@font-face

allow Web designers to use fonts that are not installed on the user's computer

http://www.w3schools.com/css/css3_fonts.asp

BUTTON

background-color to change the background colour

font-size to change the size of a button

border-radius to add rounded corners

border

:hover

box-shadow

opacity

width

float:left and remove margins to create a button group

animated buttons http://www.w3schools.com/css/css3_buttons.asp

MULTIPLE COLUMNS

The CSS3 multi-column layout allows easy definition of multiple columns of text.

• column-count• column-gap• column-rule-

style• column-rule-

width• column-rule-

color• column-rule• column-span• column-width

CSS3 USER INTERFACE

resize specifies whether or not an element should be resizable by the user horizontal, vertical, both

outline-offset adds space between an outline and the edge or border of an element

box-sizing

nav-index

nav-left, nav-right, nav-down, nav-up

CSS3 BOX SIZING

The CSS3 box-sizing property allows to include the padding and border in an element's total width and height.

The result of using the box-sizing:border-box; is so much better, that many developers want all elements on their pages to work this way.

value could be:

content-box, border-box, initial, inherit

FLEXIBLE BOX

Flexbox consists of flex containers and flex items.

A flex container is declared by setting the display property of an element to either flex (rendered as a block) or inline-flex (rendered as inline).

Inside a flex container there is one or more flex items.

Everything outside a flex container and inside a flex item is rendered as usual. Flexbox defines how flex items are laid out inside a flex container.

Flex items are positioned inside a flex container along a flex line. By default there is only one flex line per flex container.

http://www.w3schools.com/css/css3_flexbox.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website

flexbox is a new layout mode in CSS3

.flex-container { display:flex; }

flex-directionrowrow-reversecolumncolumn-reverseinitial

justify-content(horizontally align)flex-startflex-endcenterspace-betweenspace-around

align-items(vertically align)flex-startflex-endcenterbaselinestretch

flex-wrapnowrapwrapwrap-reverse

align-content(for flex lines)

.flex-item {}

order specifies the order of a flexible item relative to the rest of the flexible items inside the same container

margin:auto absorb extra space

used to achieve perfect centring

align-self overrides the flex container's align-items property for that item

has the same possible values as the align-items property

flex specifies weight of the length of the flex item

FILTRES

the filter property – adds visual effects, such as blur and saturation to any HTML element, often <img> elements.

to use multiple filters, separate each filter with a space

blur(px)

brightness(%)

contrast(%)

drop-shadow(h v blur spread color)

grayscale(%)

hue-rotate(deg)

invert(%)

opacity(%)

saturate(%)

sepia(%)

url()

initial

inherit

none

MEDIA QUERIES

the @media rule introduced in css2

made it possible to define different style rules for different media types

never got a lot of support by devices other than “print”

media queries in css3 extend the idea of media types

look at the capability of a device, instead of the type

@media not|only mediatype and (media feature) {}$mediatype is optional unless “not” or “only” is used

css3 media types all, print, screen, speech

media features width and height of the viewport

width and height of the device

orientation (landscape or portrait mode)

resolution

etc.

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://www.w3schools.com/css/css3_mediaqueries_ex.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss3_mediaqueries_ex6

2D TRANSFORMStranslate(x,y)

rotate(degree)

scale(x,y)

skew(x-degree, y-degree), skewX(degree), skewY(y-degree)

matrix() ??

transform

transform-originhttp://www.w3schools.com/css/css3_2dtransforms.asp

3D TRANSFORMS

translate3d(x,y,z), translateX(x), translateY(y), translateZ(z)

scale3d(x,y,z), scaleX(x), scaleY(y), scaleZ(z)

rotate3d(x,y,z,angle), rotateX(x), rotateY(y), rotateZ(z)

matrix3d

perspective

transform

transform-origin

transform-style

perspective

perspective-origin

backface-visibility

CSS3 TRANSITIONSCSS3 transitions allows to change property values smoothly

over a given duration.

to create a transition effect, specify the property to which the effect will be added

the duration of the effect

curvetransition-timeing-funcion to specify speed ease (default)

linear

ease-in, ease-out, ease-in-out

cubic-bezier(n,n,n,n)

ANIMATION

An animation lets an element gradually change from one style to another. some keyframes must be firstly specified

then bind the animation to an element.

@keyframes

animation-name

animation-duration

animation-delay

animation-iteration-count (number or infinite)

animation-direction (normal, reverse, alternate, etc.)

animation-timing-function ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)

animation-fill-mode

animation-play-state

animation: name duration timing-function delay iteration-count direction

RESPONSIVE WEB DESIGN

RWD

Responsive web design makes your web page look good on all devices

uses only HTML and CSS

It is called responsive web design when you use CSS and HTML to

resize, hide, shrink, enlarge, move the content to make it look good on any screen.

VIEWPORT

is the user's visible area of a web page

varies with the device

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag, which should be included in all web pages.

do NOT use large fixed with elements

do NOT let the content rely on a particular viewport width to render well

use CSS media queries to apply different styling for small and large screens

GRID VIEW

page is divided into columns

Using a grid-view is very helpful when designing web pages.

It makes it easier to place elements on the page.

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as the browser window is resized.

http://www.w3schools.com/css/tryresponsive_grid.htm

MEDIA QUERYMedia query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

MOBILE FIRSTMobile First means designing for mobile before designing for desktop or any other device, which will make the page display faster on smaller devices.

?? html class ??

IMAGES

width is set to 100%, the image will be responsive and scale up and down

max-width is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size

background-size contain

100% 100%

cover

different images for different devices

HTML5 <PICTURE>

define more than one image

the first source that fits the preferences is the one being used

VIDEOS

width

max-width

http://www.w3schools.com/css/css_rwd_videos.asp

FRAMEWORKS

Bootstrap

Foundation

Skeleton

w3.css

SELECTOR REFERENCE

selector example description

.class .container all elements with class=“container”

#id #champion the element with id=“champion”

* * all elements

element p all <p> elements

element, element

div, p all <div> elements and all <p> elements

element element

div p all <p> elements that inside <div> elements

element>element

div>p all <p> elements whose parent is <div>

element+element

div+p all <p> elements that are placed immediately after <div> elements

element~eleme p~ul all <ul> elements that are preceded by a <p> element

selector example description

[attribute] [target] all elements with target attribute

[attribute=“value”] [target=_blank] all elements with target=“_blank”

[attribute~=“word”]

[title~=“flower”] all elements with a title attribute contains the word “flower”

[attribute|=“word”] [lang|=en] all elements with a lang attribute value is “en” or begins with “en-”

[attribute^=“slice”] a[href^=“https”] all <a> elements with href attribute begins with the slice “https”

[attribute$=“slice”] a[href$=“.pdf”] all <a> elements with href attribute ends with the slice “.pdf”

[attribute*=“slice”] a[href*=“uu”] all <a> elements with href attribute contains slice “uu”

selector example description

::after p::after insert something after the content of each <p> element

::before p::before insert something before the content of each <p> element

::first-letter p::first-letter

select the first letter of every <p> element

::first-line p::first-line

select the first line of every <p> element

::selection p::selection

select the portion of an element that is selected by a user

selector example description

:link a:link all unvisited links

:visited a:visited all visited links

:hover

:active

selector example description

:checked input:checked all checked <input> elements

:focus input:focus the input element which has focus

:enabled input:enabled all enabled <input> elements

:disabled input:disabled all disabled <input> elements

:valid input:valid all input elements with a valid value

:invalid input:invalid all input elements with an invalid value

:optional input:optional all input elements without “required” attribute

:required input:required all input elements with “required” attribute

:read-only input:read-only all input elements with the “readonly” attribute specified

:read-write input:read-write all input elements with the “readonly” attribute NOT specified

:in-range input:in-range input elements with a value within a specified rangeonly works for elements with range limitations, such as input elements with min and max attributes

:out-of-range input:out-of-range

input elements with a value outside a specified rangeonly works for elements with range limitations, such as input elements with min and max attributes.

selector example description

:first-child p:first-child every <p> element that is the first child of its parent

:last-child p:last-child every <p> element that is the last child of its parent

:first-of-type p:first-of-type every <p> element that is the first <p> element of its parent

:last-of-type p:last-of-type every <p> element that is the last <p> element of its parent

:nth-child(n) p:nth-child(2) every <p> element that is the second child of its parentodd and even are keywords that can be usedhttp://www.w3schools.com/cssref/sel_nth-child.asp

:nth-last-child(n) p:nth-last-child(2) every <p> element that is the second child of its parent, counting from the last child

:nth-of-type(n) p:nth-of-type(2) every <p> element that is the second <p> element of its parent

:nth-last-of-type(n)

p:nth-last-of-type(2) every <p> element that is the second <p> element of its parent, counting from the last child

:only-child p:only-child every <p> element that is the only child of its parent

selector example description

:empty p:empty every <p> element that has no children (including text nodes)

:not(selector)

:not(p) every element that is not a <p> element

eq, lt, gt li:eq(0) the <li> element with index 0

:root :root the document’s root element

:target #news:target current active #news element(clicked on a URL containing that anchor name)http://www.w3schools.com/cssref/sel_target.asp

:lang(language)

p:lang(it) every <p> element with a lang attribute equal to “it”

CSS FUNCTIONS

attr()

returns the value of an attribute of the selected element

calc()

to perform calculation

GRADIENT

to create fake background image linear-gradient()

radial-gradient()

repeating-linear-gradient()

repeating-radial-gradient()

AURAL REFERENCE

http://www.w3schools.com/cssref/css_ref_aural.asp

ANIMATABLE

some CSS properties are animatable

they can be used in animations and transitions

these properties can change gradually from one value to another like size, numbers, percentage and color

the @keyframes rule specifies the animation code

@keyframes animationname {keyframe-selector {css-styles;}}

http://www.w3schools.com/cssref/css_animatable.asp

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

CSS UNITS

em font-size of the element

ex x-height of the current font (rarely used)

rem font-size fo the root element

vw 1% of the width of the viewport

vh 1% of the height of the viewport

vmin 1% of the viewport’s smaller dimension

vmax 1% of the viewport’s larger dimension

%

ch width of ‘0’ (zero)

RELATIVE UNITS

ABSOLUTE UNITS

cm centimetres

mm millimetres

in inches (1in = 96px = 2.54cm)

px pixels (1px = 1/96th of 1in)

pt points (1pt = 1/72 of 1in)

pc picas (1pc = 12 pt)

THE END

CSS3 NOTES BY REX J.W.