Quick Reference Study Notes for CSS 3 (Advanced)


Cascading Style Sheets is a language that is used with the HTML to create content structure, and CSS3 has new additional features than CSS other versions.


There are three types of CSS

  1. Inline CSS :- For this every style content is in HTML element. And this is usually used whenever the requirement is very small and hence will affect the only element to which it is applied. But it is not a good practice to use inline-css, the code will look quite bulky and complex so try to avoid using the inline CSS.

  2. Internal CSS :- Internal CSS is the CSS which is specified in the <head> section of the page inside the <style></style> tag. And hence will affect all the elements of the body for which you have added the CSS.

  3. External CSS :- The external CSS is the CSS which is specified in the external CSS file which have .css extension included on the page. Generally it is used whenever we have a large number of attributes, so avoid to rewrite the CSS style again and again and use them wherever it is required. Simply create a .css file and use it on the page, where you want to add the CSS from that file.




   property1: value1;

   property2: value2;


  • Inline style syntax

<tag style="property: value"> </tag>


  • Internal CSS syntax

<style type="text/css">
  div { color: #444;}

  • External CSS syntax

<link rel="stylesheet" type="text/css" href="/style.css" />


The selector refers to the HTML element that you want to style. One or more selectors can be separated by the commas for a single css declaration block.


Selectors Types:






This selector is used when we need to apply the CSS to any element of a page

*{     font-family:Arial;    }


Multiple elements of different types assigned a single class, that is, when you don’t want to affect all the instance of that type.


    font-family: Arial;



A single element, when you don’t want to affect all the other instance of that particular type.

#myId {

  color: green;



This selector means any element of that type.

h2{ font-weight: bold; }


Multiple elements of different type categorized under this selector.

h1 , p {   font-style: Italic; }


Elements those are one or more level below another element.

#myId p , .myClass h3 {                font-family:Arial;



Element which is directly below another element.

#myId > p{   font-family:Arial;   }

Adjacent Sibling

All elements that share the same parent and have the same level(immediate sequence)

p + h6{

  font-size: 14px;


General Sibling

All elements that share the same parent and have the same level(not necessarily the immediate sequence).

p ~ h6{

  font-size: 14px;


Attribute(new in CSS3)

Elements that matches the attribute listed.

ele[attr=”val”]{ font-family:Arial; } /* Matches a DOM element with that specific value.*/

Ele[attr^=”val”]{ font-family: Arial; }       /* matches a DOM element that begins with the prefix value.*/

Ele[attr$=val] /*matches a DOM element with the attribute attr and a value ending with the suffix val */

Ele[attr*=val]   /*matches a DOM element with the attribute attr and a value containing the substring  */


                  Tip:      /* ... */ are used to add comments in a CSS file                                 .


CSS3 new Properties:



Possible Values(separated with pipe | )


binds an animation to an element

Syntax :- name duration timing-function delay iteration-count direction fill-mode play-state;


delays animation start

time(s/ms) | initial | inherit


reverse animation or in alternate cycles

normal | reverse | alternate | alternate-reverse | initial | inherit


animation duration in seconds or ms

time(s/ms/0) | initial | inherit


style when the animation is not playing

none | forwards | backwards | both | initial | inherit


number of an animation replays

number | infinite | initial | inherit


name for the @keyframes animation

Keyframename | none | initial | inherit


the animation is running or paused

paused | running | initial | inherit


speed curve of an animation

Linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps (int,start|end) | cubic-bezier (n,n,n,n) | initial | inherit


This is element visible when not facing the screen

visible | hidden | initial | inherit


Used in media queries to apply different styles for different media types/devices

Syntax:- @media not|only mediatype and (media feature and|or|not mediafeature) {  CSS-Code;



how many pixels the 3D element is placed from the view

Length | none | Initial | Inherit


This property applies a 2D or 3D transformation to an element and allows you to rotate, scale, move, skew, etc., elements.

None | matrix(n,n,n,n,n,n) | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | translate(x,y) |translateX(x) | translateY(y) | translateZ(z) | scale(x,y) | scaleX(x) | scaleY(y) | rotate(angle) | rotateX(angle) | rotateY(angle) | skew(x-angle, y-angle) | skewX(angle) | skewY(angle) | initial | inherit




CSS3 multiple column:






This specify the number of columns in which an element will be divided into.

number | auto | initial | inherit


Specify the gap between the columns

length | normal | initial | inherit


This sets the width, style, and color of the rule between columns

Syntax :- column-rule-width column-rule-style column-rule-color | initial | inherit


This property specifies the color of the rule between column

color | initial | inherit


Specifies the style of the rule between columns

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset  | initial | inherit


specifies the width of the rule between columns

Medium | thin | thick | length | initial | inherit


property specifies how many columns an element should span across

None | all | initial | inherit


Specifies the column width

auto | length | initial | inherit


CSS3 web-fonts

CSS3 has a new feature to add the custom fonts in the CSS by using the @font-face property.

@font-face {

 font-family: “my custom font”;

 src: url(“my_custom_font.woff | my_custom_font.ttf”);



CSS3 calculating values with cacl()


CSS3 provide a feature to calculate values using the calc() function, it allows you to do simple arithmetic calculations in CSS. This can be used anywhere where you need to define the size or length.

For example:


width: calc(100% - 80px);



That is you can freely mix the units as well that is % and px etc.


CSS3 Gradient


CSS3 gradient let you display the smooth transition between the multiple different colors.

There are two types of gradients

  1. Linear :- It goes down/up/left/right and diagonally, for linear gradient you will have to define at-least two colors, you can also define the direction or angle from which you want to start the gradient(default is top to bottom).


   background-image: linear-gradient(angle/direction, color-stop1, color-stop2,...);


#grad {

 background-image: linear-gradient(to bottom right, red, green);


#grad {

 background-image: linear-gradient(-90deg, red, green);


You can also repeat a linear gradient

#grad {

  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);


  1. Radial:- This one is defined by its center, for radial gradient too you will have to define at-least two colors. By default it takes shape as eclipse, size farthest-side, and position is center.


   background-image: radial-gradient(angle/direction, color-stop1, color-stop2,...);


#grad {

 background-image: radial-gradient( red, green, yellow);


#grad {

   background-image: radial-gradient(circle, red, green, yellow);


#grad {

   background-image: radial-gradient(closest-side at 60% 50%, red, green, yellow);


You can also repeat a radial gradient

#grad {

  background-image: repeating-radial-gradient(red, yellow 10%, green 20%);


*NOTE : "This study material is collected from multiple sources to make a quick refresh course available to students."

This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy. More info. I Agree