Quick Reference Study Notes for CSS 3 (Advanced)

CSS3 

Introduction:
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.

Types:

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.

 

Syntax:

selector{

   property1: value1;

   property2: value2;

}

  • Inline style syntax

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

 

  • Internal CSS syntax

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

  • External CSS syntax

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

Selectors:

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:

 

Name

Purpose

Example

Universal

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

*{     font-family:Arial;    }

Class

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

.arialfamily{

    font-family: Arial;

}

Id

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

#myId {

  color: green;

}

Type

This selector means any element of that type.

h2{ font-weight: bold; }

Grouping

Multiple elements of different type categorized under this selector.

h1 , p {   font-style: Italic; }

Descendant

Elements those are one or more level below another element.

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

}

Child

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:

Property

Value

Possible Values(separated with pipe | )

animation

binds an animation to an element

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

animation-delay

delays animation start

time(s/ms) | initial | inherit

animation-direction

reverse animation or in alternate cycles

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

animation-duration

animation duration in seconds or ms

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

animation-fill-mode

style when the animation is not playing

none | forwards | backwards | both | initial | inherit

animation-iteration-count

number of an animation replays

number | infinite | initial | inherit

animation-name

name for the @keyframes animation

Keyframename | none | initial | inherit

animation-play-state

the animation is running or paused

paused | running | initial | inherit

animation-timing-function

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

backface-visibility

This is element visible when not facing the screen

visible | hidden | initial | inherit

@media

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;

  }

perspective

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

Length | none | Initial | Inherit

Transform

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:

 

Property

Purpose

Values

column-count

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

number | auto | initial | inherit

column-gap

Specify the gap between the columns

length | normal | initial | inherit

column-rule

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

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

column-rule-color

This property specifies the color of the rule between column

color | initial | inherit

column-rule-style

Specifies the style of the rule between columns

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

column-rule-width

specifies the width of the rule between columns

Medium | thin | thick | length | initial | inherit

column-span

property specifies how many columns an element should span across

None | all | initial | inherit

column--width

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:

p{

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).

Syntax:

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

Example

#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.

Syntax:

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

Example

#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