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 ::
:: 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-clip: border-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 ::
:: Page Styling ::
display: inline | block;
-:: 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 ::
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 ::
-:: 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 ::
to {background:blue;}
-webkit-animations: anim 2s
-:: 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
mozilla Webmaker
By Subhendu Ghosh
mozilla Webmaker
- 1,846