A Quick Guide To CSS3 - Cheat Sheet and Browser Support




CSS3 Cheat Sheet

With this sheet you can quickly refer the properties of different elements or components of a web page. Still it first requires the understanding of what each property do. You can click on the image and save it to your desktop for future references.

(Click to zoom)


CSS3 Browser Support

Almost all modern browsers support CSS3. Still it is important to consider older browsers as well in case we need to fallback to some other alternative to render the css properly. There are various css frameworks like bootstrap and foundation which takes care of this purpose of falling back to other alternative.



To test which all CSS3 properties your browser support, you can visit the below link:
http://css3test.com/

A Quick Guide To CSS3 - 2D and 3D Transformation




CSS3 2D and 3D Transformation

This is one of the most awaiting implementation in terms of creating interactive and real world web pages. CSS has introduced some properties through which we can changes the shape, size and position of the CSS3 elements.
Property Value options
perspective none | number
backface-visibility visible | hidden
transform none | matrix | matrix3d | translate3d | translateX | scale3d |
scaleY | rotate | rotateZ | skew | perspective and so on
perspective-origin x-axis y-axis|initial|inherit;
x-axis - % | left | center | right
y-axis - % | left | center | right
transform-style flat | preserve-3d
transform-origin x-axis y-axis z-axis|initial|inherit;
x-axis - left | center | right | length | %
y-axis - left | center | right | length | %
z-axis - left | center | right | length | %

Example : 2D Transformation
div {
 transform: translate(70px, 110px);
}



Example : 3D Transformation
div {
    transform: rotateX(150deg);
}





Browser Support for 2D Transformation



Browser Support for 3D Transformation




A Quick Guide To CSS3 - Box-model, Selector and Box Layout




CSS3 Box Model

It is one of the most important concept of CSS3. Every HTML element is surrounded by a box weather its a div, span, paragraph, anchor etc. CSS3 Box Model concept revolves around Margin, Border, Padding, and Content of the box. This makes browser takes complete control on how the box and its contents will be rendered on the webpage.


  • The margin is transparent. It clears the area of outside the border. If margin width is 0, then the edge of margin is same as border edge.
  • Border defines the border of the box. If the border width is 0, then the edge of the border is same as padding edge.
  • Padding edge surrounds the box padding. It can be controlled by padding-top, padding-bottom, padding-left and padding-right.
  • Content is the actual area which contains real content of an element. It has color, image or background. We can also set the width, the height of the content box.

Property Value options
height auto | % | length
width auto | % | length
margin margin-bottom | margin-top | margin-right | margin-left
float left | right | none
padding padding-bottom | padding -top | padding -right | padding -left
visibility visible | hidden | collapse
display inline | block | flex | inline-block | inline-table | list-item | table | none | initial | inherit



CSS Selectors

CSS3 Selectors used to select different elements on the webpage and manipulate their properties. There are different selectors with which we can select one or more elements in the webpage.

Selector Description
.<className> It is used to select all elements with .<className> class
#<identifierName> It is used to select all elements with id attribute set to <identifierName>
* It is used to select all elements.
div It is used to select div elements
[attribute] It is used to select all elements with the specified attribute
[attribute=value] It is used to select all elements where the specified attribute is equal to value
a: link It is used to select all unvisited links.
a: active It is used to select the active link and so on.

Box Layout


This property is used to set the layout of the box in the Webpage. It is very new in CSS3. The template is tested to check its compatibility with all requirements on multiple platforms.
Property Value options
box-direction normal | reserve
box-align start | end | center
box-lines single | multiple
box-orient vertical | horizontal | block-axis | inline-axis
box-sizing padding-box | content-box | margin-box | border-box
box-pack start | end | center | justify


A Quick Guide To CSS3 - Border, Font and Text



CSS3 Border

CSS3 borders are used to set the borders of a container which can be div, span, paragraph etc. It includes for different properties left, right, top, bottom in the webpage.

Property Value options
border-style none | hidden | dotted | dashed | double | inset | outset | solid
border-width thin | medium | thick | length
border-color Any color value RGB, Hash etc.
border-radius border-bottom-right-radius | border-top-right-radius |
border-bottom-left-radius | border-top-left-radius

Example
.one {
 border-width: 3px 8px 4px 20px;
 border-style: dashed;
 border-color: yellow green red blue;
}

CSS3 Font

CSS3 Font properties are used to set the font used in different textual components of a webpage.

Property Value options
font-size xx-small | x-small | small | medium | large | x-large | xx-large and so on
font-family family-name | generic family
font-style normal | italic | oblique | inherit
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 and so on
font-variant normal | small-caps | inherit

Example
p {
 font-style: italic;
 font-family: 'Arial';
 font-size: xx-large;
 font-weight: bolder;
 font-variant: small-caps;
}



CSS3 Text

CSS Text properties are used to set the general text properties like we used to do in any text editor like Word. Same textual decorations can be achieved in the webpage with the help of these properties.

Property Value options
text-align start | end | left | right | center | justify
direction rtl | ltr | inherit
letter-spacing normal | length | %
text-decoration none | overline | underline | blink
text-justify auto | inter-cluster | distribute etc
text-outline none | color | length
text-indent length | %
text-shadow none | color | length
text-transform none | uppercase | lowercase | capitalize

Example
p.example {
 text-align: center; 
 text-decoration: blink;
 text-transform: lowercase;
 text-outline: none;
 text-shadow: 2px 3px blue;
}

A Quick Guide To CSS3 - Introduction, Wordwrap and Backgrounds



CSS is an acronym for Cascading Style Sheet.

Cascading  - Declare once use anywhere. Cascade the styling rules to any level, from parent to child level elements.
Style Sheet - Defines style rules.

CSS3 is the extended version of CSS2. CSS3 has arrived with so many new features and enhancements can make any webpage a gem with fewer efforts.

We will cover here CSS selector syntax, properties, browser support, and useful information about its all controls. Its a quick guide so we will cover a more crisp cheat sheet kind of guide rather than the detailed one. To know more about CSS from basic please follow the link -
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

CSS3 Word Wrap 

Word Wrap is a property of CSS3 that is used to break the words and wrap into next line.

Syntax
Word-wrap : normal | break-word | initial | inherit

Normal - break the line at normal word break points.
Break-word - unbreakable word breaks into a new line.
Initial - used to set a default value.
Inherit - used to take computed value.

Example
p {
    width: 100px;
    background: #70ea70;
    word-wrap: break-word;
}



CSS3 Backgrounds 

These are used to set the various properties of the background of the webpage.

Property Value options
background-image URL | none
background-attachment scroll | fixed
background-image URL | none
background-color color | transparent
background-size length | % | auto | cover | contain
background-position top right | top left | top center | bottom left | center | center right and so on
background-repeat repeat | repeat-x | repeat-y | no-repeat

Example
#back {
 width: 300px; 
 height: 200px;
 background-position: center bottom, left top;
 background-repeat: no-repeat;
 background-color: #90ee90;
}

Next : CSS 3 Borders, Fonts and Text