css3 notes
TRANSCRIPT
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
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.