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/

< Prev : 2D and 3D Transformation

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

< Prev : Box Model, Selectors and Box Layout

Next : Cheat sheet and Browser support >

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

< Prev : Border, Font and Text

Next : 2D and 3D Transformation >

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;
}

< Prev : Intro, Wordwrap and Background

Next : Box-model, Selector and Box layout>

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