mozilla Webmaker


CSS 3 WORKSHOP

subhoworld.wordpress.com

What is CSS 3 ?


  • CSS stands for Cascading Style Sheets

  • CSS specifies how documents are presented to users

  • CSS can be used to design any markup language

  • CSS 3 is the latest standard of CSS.

Why use CSS ?

  • Avoid duplication

  • make maintenance easier

  • Use the same content with different style and different content

How CSS works ?



  • Browser(markup language + CSS)=DOM (Document Object Model)


  • Browser displays the DOM.


CSS can be added in 3 ways:


  • Inline Style

  • Internal Stylesheet

  • external CSS Stylesheet

:: Syntax ::


 h1(color:blue;text-align:center;)
h1-> Selector
color-> Property
blue-> Value
colour:blue;-> Declaration

:: Selector ::


id-> # operator
class-> . operator

:: Inline CSS ::


 <p style="color:red;">hello!! this is inline css</p>

:: Internal Stylesheet ::

 <head><style>h1{color:green;}p{margin-left:20px;}body{background-color:lightblue");}</style></head>
<body><h1>Mozilla Webmaker</h1><p>i am attending the CSS Workshop"</p></body>

:: External Stylesheet ::



<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<body><h1>Mozilla Webmaker</h1><p>I am attending the CSS Workshop<p></body>

 h1{color:green;}p{margin-left:20px;}body{background-color:lightblue");}

:: Background Styling ::


background properties:

background-color : (value in hex, rgb, name)

background-image : url(image_url)

background-attachment: fixed | scroll;

background-size: (x y px)

background-repeat: repeat | repeat-x | repeat-y | no-repeat)

background-origin: border-box | padding-box | content-box ;

background-clipborder-box | padding-box | content-box ;

background-position: left top | left center | left bottom
                                               right top | right center | left bottom
                                               center top | center center | center bottom




-:: Hands on ::-


 body{background-color:lightblue;
background-image: url("http://i1285.photobucket.com/albums/a581/scriptcon2013/subhendu/background-image_zpsd9b69169.jpg")    



 background-repeat:no-repeat;


 background-position:right top;

:: Text Styling ::

color: (value in rgb,hex, name)

text-align: right | center | left | justify

text-decoration: overline | line-through | underline | none

text-transform: uppercase | lowercase | capitalize

text-indent: value px

line-height : value px

letter-spacing: value px

word-spacing: value px

text-shadow: (x y px color)

white-space: nowrap | wrap

-:: Hands on::-

 h1{colour:#191970;
 text-align:center;
 text-decoration:underline;
 text-transform:capitalize;}
 p{text-indent:40px;}

:: Font Styling ::


font-family: value main, default 1 , dafault 2 ;

font-style: normal | italic ;

font-size: value in px or % or  em;

font-weight: normal | bold | bolder | ligheter | value ;

font-varient: small-caps | normal ;


Defining your own font:

@font-face{font-family: name; src=url(font_url)}

-:: Hands on ::-


 h1{font-family: Times New Roman, serif;
font-size:25px; /* 2em */
 font-weight:bold;}
  p{font-family: courier, serif;
 font-style:italic;}

:: List Styling ::


list-style-type: circle | square | upper alpha | upper roman | lower roman | lower-alpha

list-style-image: url(image_url)


-:: Hands on ::-


 ul.s{list-style-type: circle;}

-:: Hands on ::-

 list

:: Box-Model Styling ::


margin: value in px

padding: value in px

border: value in px

:: The Box Model ::



-:: Hands on ::-

 td{padding:5px;}


:: Table Styling ::


border: value px;

border-collapse: collapse;

height: value px;

width: value px;

vertical-align: top | middle | bottom ;

padding: value in px;

border-style: solid | double | dashed | dotted | groove | ridge | inset | outset


-:: Hands on ::-

 table, td, th {border:1px; 
 border-style:solid;
 border-color:green;}
 th{background-color:green;
 color:white;}

:: Grouping ::


h1{color:red;}
p{color:red;}
h3{color:red;}


h1,p,h3{color:red;}

:: Page Styling ::


visibility: none | hidden;
display: inline | block;
positioning: static | absolute | fixed | relative 
float: right | left
clear: right| left | both



-:: Hands on ::-

 #hide{visibility:hidden;}
 ul>li{display:inline;
 position:relative;
 float:right;}

:: Image Styling ::


opacity: value 

filter:alpha(opacity=100)

border: value px

box-shadow: value px

height: value px

width: value px


-:: Hands on ::-

 img {opacity:0.5;filter:alpha(0.5);
 border:2px solid blue;}

:: 2D & 3D Transforms ::


2D Transform ::

transform: rotate(value) | scale(value,value) | skew(value,value) | ;

-ms-transform: rotate(value); /* IE 9 */

-webkit-transform: rotate(value); /*safari ,chrome*/

3D Transform ::

transform: rotateX(value) | rotateY(value)



-:: Hands on ::-

 div.trans{height:100px; width:100px;
 transform: rotate(45deg); -ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);

Pseudo-classes

:link

:hover

:focus

:visited

:first-line

:first-child

:first-letter

:: Transition ::


transition:width (value), height (value), transform: (effect)

-:: Hands on ::-

   div
{
width:100px;
height:100px;
background:white;
transition:width 2s, height 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
-webkit-transform:rotate(45deg);
  }

div.trans:hover{ width:200px;height:200px;
transform:rotate(180deg);
-webkit-transform:rotate(180deg); /* Safari */
}


:: Animation ::


animation: anim 2s

@keyframes anim{ from {background:yellow;} 
                                        to {background:blue;}

-webkit-animations: anim 2s
@-webkit-keyframes anim{ from { background:yellow;}
to{background:blue;}

-:: Hands on ::-

 div{width:100px;height:100px;background:red;animation:anim 5s;-webkit-animation: anim 5s; /* Safari and Chrome */}
 @keyframes anim
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes anim /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

 

Thank You

Subhendu Ghosh

@Subhorokz
IRC Nick: subho



email: subho.prp@gmail.com
blog: subho.wordpress.com



foss contributor: mozilla




Dr. B.C.Roy Engineering College, 3rd Year

mozilla Webmaker

By Subhendu Ghosh