Css Notes
Css Notes
Features of css
css has the following list of unic features
Easy manage
Global change
Save lot of time
Easy maintainance
Inline style sheets
Internal style sheets
External style sheets
Performance
Superior style
Multidevice compatibility
Global webstandards etc.
What css?
css required because of the following reasons.
it is collection of style sheet mechanism.
It is used to add more affects.
We can embed css in html, java script etc.
The extension of css file is .css
use same style on multiple pages.
Reduce download size etc.
css structure: as per w3c standard css has the follwing detailed structure
<html>
<head>
<style type="text/css">
{
-------
-------
}
</style>
</head>
<body>
-------
-------
</body>
</html>
or
ex1:
<html>
<head>
<style type="text/css">
div{
color:blue;
background-color:#FFFF0;
text-decoration:underline;
font-family:Arial unicode ms;
}
</style>
</head>
<body>
<div>welcome to cascading style sheet....!</div>
<div>welcome to cascading style sheet....!</div>
</body>
</html>
css comments:
Comments are non executable statements/non ignore statements. Using these comment notations we
can declare customized statements or user defined statements in the web environment or in the style
sheet.
In css every comment begins with "/*" and ends with "*/"
Ex:
<html>
<head>
<style type="text/css">
div{
/* color:blue;
background-color:pink;*/
}
</style>
</head>
<body>
<div>welcome in cascading style sheet</div>
<div>welcome in cascading style sheet</div>
</body>
</html>
css basic syntax:
It is made up of three parts
selector
property
value
selector Declaration
| |
h1 {color:blue;font-size:12px;}
| | | |
property value property value
<head>
<style type="text/css">
div{
color:blue;
}
</style>
</head>
<body>
<div>welcome to cascading style sheet</div>
</body>
Types of stylesheets: In css stylesheets are classified into the following three types.
1. Inline style sheets
2. Internal/embeded style sheets
3. External style sheets
1) Inline style sheets: If we specify styles inside the tag in the body part. These styles able to apply only
for that perticular line.
Ex:
<head>
<title style='color:red'>
Hello
</title>
</head>
<body>
<s style='color:red'>It is removed text from the web page</s>
<p style='color:blue;background-color:lightgreen'>
It is removed text from the web page....
</p>
<b style='text-decoration:underline'>it is removed text from the web page</b>
</body>
2) Internal style sheets: These are popularly known as embeded style sheets. If we specify the style in
our html file itself then they are called as internal styles. These styles cann't be used in other files. But
we should implement again and again in the same file.
syntax:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Ex:
<head>
<style type="text/css">
p{
color:#FF00FF;
font-size:20px;
font-weight:bolder
}
</style>
</head>
<body>
<p>welcome to internal style sheets ... </p>
<p>welcome to internal style sheets ... </p>
</body>
3) External style sheets: If we declare the styles outside our html file then they are called external styles.
These styles can be reusable on more than one file. These file extension is .css
syntax:
<head>
<link rel="stylesheet" href="#" type="text/css">
</head>
->save with .html extension and run on any major web browser
Tag selectors: These are popularly know as type selectors. It matches every instance of the element type
in the document free.
syntax:
div{
styles
styles
}
ex:
<head>
<style type='text/css'>
h1{
color:#FF0000;
background-color:#FFFF00;
font-size:20px;
text-decoration:underline;
font-family:comic sans ms;
}
</style>
</head>
<body>
<h1>welcome to type or tag selector</h1>
</body>
Id selectors: It is used to specify style for a single, unique element. The id selector uses the id attribute of
the html element and is defined with a "#" prefix.
syntax: 1
#div{
styles
styles
}
syntax:2
div#div{
styles
styles
}
Ex:
<head>
<style type="text/css">
#h1{
color:#FF0000;font-size:20px;
text decoration:underline;
font-family:comic sans ms;
}
</style>
</head>
<body>
<p id='h1'>welcome to id selector</p>
</body>
Ex with prefix:
<head>
<style type="text/css">
b #h1{
color:FF00000;
font-size:20px;
font-decoration:underline;
font-family:comic san cs;
}
</style>
</head>
<body>
<b id="h1">welcome to id selector</b>
</body>
ex:
<head>
<style type='text/css'>
#div{
color:blue;
font-family:tahoma;
}
</style>
<script type='text/javascript' language="javascript">
function myval(){
document.getElementById("div1").innerHTML="HTML5";
}
</script>
</head>
<body>
<p> click the button to change the value based on ID ...</p>
<div id="div">angularJs</div>
<div id="div1">jquery</div>
<button onclick="myval()">click me</button>
</body>
is equivalent to
h1,h2,h3{font-family:sans-serif}
ex2:
<head>
<style type="text/css">
#div,p{ <----------Grouping selectors (id,tag)
color:blue;
font-size:20px;
font-family:tahoma
}
</style>
</head>
<body>
<div id="div">Java script is client side scripting language</div>
<p>welcome to selector grouping</p>
</body>
class selectors: It is used to specify a style for a group of elements. The class selector uses the html class
attribute and is defined with a "." prefix
syntax:
.div{
styles
styles
styles
}
ex:
<head>
<style type='text/css'>
.div{
clor:blue;
font-size:20px;
font-family:tahoma;
}
</style>
</head>
<body>
<div class="div">welcome to class selector</div>
<div class="div">
</body>
Ex:
<head>
<style type='text/css'>
div{
font-size:4em;
}
</style>
</head>
<body>
<div>working with css units...!</div>
</body>
<head>
<style type='text/css'>
div{
font-size:4px;
}
</style>
</head>
<body>
<div> working with css units!!</div>
</body>
background-color:
It is used to set the background color of an element.
synatx: background-color:color name|color code | hexa code;
or
background:color name|color code|hexa code;
ex:
<head>
<style type='text/css'>
div{
background-color:#FF00FF;
}
</style>
</head>
<body>
<div> working with css background...</div>
</body>
background-image:
It is used to set the background image of an element.
syntax: background-image:url('imgpath');
or
background:url('imagepath');
ex:
<head>
<style type='text/css'>
div{
background-image:url("html5.png");
}
</style>
</head>
<body>
<div> working with css background...</div>
</body>
value description
repeat The background image will be repeated both vertically and horizontally
repeat-x The background image will be repeated only horizontally
repeat-y The background image will be repeated only verticlly
no-repeat The background image will not be repeated
Ex:
<head>
<style>
body{
background-image:url("html5.png");
background-repeat:no-repeat;
}
</style>
</head>
<body> working with css backgrounds...!!</body>
Background attachment: It is used to controll scrolling of an image in the background
syntax: background-attachment : fixed;
or
background:fixed;
Ex:
<head>
<style>
div{
background-image: url("html5.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<div> working with css background </div>
</body>
ex:
<head>
<style type="text/css">
div{
font-family:tahoma;
font-size:10px;
font-style:oblique;
font-weight:bolder;
font-varient:small-caps;
}
</style>
</head>
<body>
<div> working with css font family </div>
</body>
ex:
<head>
<style type='text/css'>
div{
color:blue;
}
</style>
</head>
<body>
<div>welcome to css text properties....</div>
</body>
Direction: It is used to display the direction of the text.Text default direction is left to right.
syntax: direction:value(s)
ex:
<head>
<style type='text/css'>
div{
direction:ltr;
}
p{
direction:rtl;
}
</style>
</head>
<body>
<div>welcome to css direction property</div>
<p>welocme to css text property</p>
</body>
ex:
<head>
<style type='text/css'>
div{
text-decoration:underline;
}
p{
text-decoration:overline;
}
b{
text-decoration:line-through;
}
</style>
</head>
<body>
<div> It is underline format </div>
<p> It is underline format </p>
<b> It is underline format </b>
</body>
ex:
<head>
<style type='text/css'>
p{
text-indent:50px;
text-align:justify;
}
</style>
</head>
<body>
<p> welcome to indent property </p>
</body>
ex:
<head>
<style type='text/css'>
p{
letter-spacing:10px;
}
</style>
</head>
<body>
<p>welcome to css properties</p>
</body>
word-spacing: This property is used to add or substract space between the words.
syntax: word-spacing: pixels;
Eg:
<head>
<style type='text/css'>
p{
word-spacing:-5px;
}
</style>
</head>
<body>
<p> welcome to css property </p>
</body>
text-transform: This property is used to capitalize the text convert text upper case or lower case format.
syntax: text-transform:value;
ex:
<head>
<style='text/css'>
p{
text-transform:capitalize;
}
</style>
</head>
<body>
<p>welocme to css properties</p>
</body>
white-sapce: This property is used to control the flow and formating of text.
Eg:
<head>
<style type='text/css'>
p{
white-space:nowrap;
}
</style>
</head>
<body>
<p> line never break ! line never break </p>
</body>
verticle align: This propertty sets the verticle alignment of an element. It supports the following list of
values.
1. baseline
2. sub
3. super
4. top
5. text-top
6. middle
7. bottom
8. text-bottom
9. 0px
10. 10px
Eg:
<head>
<style type='text/css'>
label{
verticle-align:sub;
}
</style>
</head>
<body>
Verticle alignment of an <label> element </label>
</body>
CSS Borders
css supports the following list of border properties.
border-color: The border color specifies the color of a border
bordder-style: It specifies whether a border should be solid,dashed line,double line or one of the other
possible values.
The border width specifies the width of a border.
Ex:
<head>
<style type='text/css'>
div{
border-color:green;
border-style:dashed;
border-width:2px;
}
</style>
</head>
<body>
<div> welcome </div>
</body>
column-count: This property is used to specify number of columns and element divided into:
syntax: column count:number1 auto;
value Description
number The optimal number of columns into which the content of the element will be flowed.
auto The number of columns will be determined by other properties.
Ex:
<head>
<style type='text/css'>
div{
column-count: 3;
-moz-column-count:3; /* mozilla firefox */
-webkit-column-count:3; /* chrome/safari */
-ms-column-count:3; /* IE */
-o-column-count:3; /* opera */
}
</style>
</head>
<body>
<div> some text ....!! </div>
</body>
Ex:
<head>
<style type=<'text/css'>
div{
text-align:justify;
column-gap:30px;
-moz-column-gap:30px;
column-count:3;
-moz-column-count:3;
}
</style>
</head>
<body>
<div>The column-gap property is not supported in Internet Explorer 9 and earlier
versions.</div>
</body>
column-rule-property: It is a shorthand property for setting all the column-rule-* properties. The column
rule property sets the width, style and color of the rule between columns.
synatx: column-rule:column-rule-width column-rule-style column-rule-color;
value Description
column-rule-width sets the width of the rule between columns
column-rule-style sets the style of the rule between columns.
column-rule-color sets the color of the rule between columns.
Ex:
<head>
<style type='text/css'>
div{
text align:justify;
column-count:3;
-moz-column-count:3;
column-gap:30px;
-moz-column-gap:30px;
-column-rule-width:2px;
-moz-column-rule-width:2px;
column-rule-style:solid;
-moz-column-rule-style:solid;
column-rule-color:#FF0000;
-moz-column-rule-color:#FF0000;
}
</style>
</head>
<body>
<div> some text ... !! </div>
</body>
value Description
balance columns are balanced.Browsers should minimize the variation in column length.
auto columns are filled sequentially and thay will have different lengths.
value Description
1 The element should span across 1 column
all The element should span across all columns.
Ex:
<head>
<style type='text/css'>
div{
text-align:justify;
-webkit-column-count:3;
column-count:3;
}
h2{
-moz-column-span:1;
column-span:1;
}
</style>
</head>
<body>
<div><h2> heading </h2>some text</div>
</body>
value Descritpion
auto The column width will be determined by the browser.
length a length that specifies the width of the column.
Note: If you are increasing the page size number of columns will decrease and vice versa.
Ex:
<head>
<style type='text/css'>
div{
-moz-column-width:100px;
column-width:100px;
}
</style>
</head>
<body>
<div> some text ... </div>
</body>
columns: This propertty is shorthand property for setting column width and column count.
syntax: columns:column-width column-count;
value Description
column-width The width of the column
column-count The number of column
Ex:
<head>
<style type='text/css'>
div{
columns:100px 3;
-moz-columns:100px|3;
}
</style>
</head>
<body>
<div> some text </div>
</body>
working with css3 background property:
css3 supports the following list of advanced background properties.
1)background size:
property Description
background-size specifies the size of the background images.
background-origin specifies the positioning area of the background images.
background-clip specifies the painting area of the background images.
background-size: This property specifies the size of the background images.Before css3 the background
image size was determined by the actual size of an image
syntax: background-size:lenght|percentage|cover|contain;
ex:
<head>
<style type='text/css'>
body{
background: url(htmll5.png);
background-size: 480px 480px;
-moz-background-size: 480px 480px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p> css-image </p>
<p>original image:<img src="water.gif" alt="flowers" width="200" height="200"/></p>
</body>
ex:
<head>
<style type='text/css'>
div{
width: 300px;
height: 300px;
padding: 50px;
background-color: lightblue;
background-clip: border-box;
border: 4px dashed #FF0000;
-text-align: justify;
}
</style>
</head>
<body>
<div> some text ...!</div>
</body>
background-origin: This properttty specifies what the background position property relative to
synatx: background-origin:padding-box|border-box|content-box;
ex:
<head>
<style>
div{
border: 2px solid red;
padding: 30px;
background-image: url('html5.png');
background-repeat: no-repeat;
background-position: left;
background-origin: content-box;
}
</style>
</head>
<body>
<div> some text ...! </div>
</body>
property Description
border-image a shorthand property for setting all the border image-*properties.
border-radius a shorthand property for setting all the four border-*-radius properties.
box-shadow attaches one or more drop-shadows to the box.
border-image: it is a shorthand property for setting a border image source, border image slice, border-
image width,border-image outset and border image repeat properties.
syntax: border-image: source slice width outset repeat|initial|inherit;
ex:
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<p>The border-image property specifies an image to be used as the border around
an element:</p>
<p id="borderimg1">Here, the middle sections of the image are repeated to create
the border.</p>
<p id="borderimg2">Here, the middle sections of the image are stretched to create
the border.</p>
<p>Here is the original image:</p><img src="border.png">
</body>
box-shadow: The box shadow property attaches one or more drop shwdows to the box.
syntax: box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
ex:
<head>
<style>
div{
width: 300px;
height: 80px;
background-color: #FFFF00;
box-shadow:15px 15px 15px #FF0000;
}
</style>
</head>
<body>
<div> </div>
</body>
ex:
<head>
<style>
div{
width: 300px;
height: 10px;
border: 2px solid #FF0000;
padding: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<div> welcome to borders ... </div>
</body>
word-wrap: This property allows long words to be able to be broken and wrap onto the next line.
javascript syntax: object.style.wordwrap="break-word"
syntax: word-wrap:normal|break-word;
value Description
normal reak words only at allowed break points.
break-word allows underbreakable words to be broken.
ex:
<head>
<style>
div{
width: 10em;
border: 2px solid #FF0000;
word-wrap:break-word;
}
</style>
</head>
<body>
<div> HTML5 is new hypertext markup language for latest web apps. It is new for mobile apps
for responsive web app. This paragraph contains a very long word:
thisisaveryveryveryveryveryverylongword.</div>
</body>
value Description
normal Breaks non-CJK scripts according to their own rules.
break-all Lines may break between any two characters for non-CJK script.
keep-all Breaks are prohibited between pairs of letters.
Text-shadow: This property applies shadow to text you specify the horizontal shadow, the vertical
shadow, the blur distance and the color of the shadow.
syntax: text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
java script syntax: object.style.textshadow="2px 2px #FF0000"
ex:
<head>
<style type='text/css'>
div{
font-size:30px;
text-shadow:5px 5px #FF0000;
}
p{
font-size:30px;
text-shadow:5px 5px #FF0000;
}
</style>
</head>
<body>
<div> welcome to text shadow property ... </div>
<p> welcome to text shadow property ... </div>
</body>
Text-overflow: This property specifies what should happen when text overflows the containing element.
syntax: text-overflow: clip|ellipsis|string|initial|inherit;
javascript syntax: object.style.textoverflow="ellipses";
value Description
clip clips the text
ellipses Render an ellipsis ("---") to represent clipped text
String Render the given string to represent clipped text.
Eg:
<head>
<style>
div.test{
white-space: nowrap;
width: 12em;
overflow: hidden;
border: 1px solid #FF0000;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="test"> This will some long text that will not fit in box </div>
</body>
Text-justify: This property specifies the justification method to use when text-align is set to "justify". This
property specifies how justified text should be aligned and spaced.
syntax: text-justify: auto|inter-word|inter-ideograph|inter-cluster|
distribute|kashida|trim|initial|inherit;
javascript syntax: object.style.textjustify="inter-word";
ex:
<head>
<style>
div{
text-align: justify;
text-justify: inter-word;
}
</style>
</head>
<body>
<div> some text ... resize the browser window...</div>
</body>
@font-face: The css3 font-face rule: Your "own" fonts are defined in the css3 @font face. Before css3
webdesigners had to use fonts that are already installed in the users computers.
www. 1001freefonts.com
Note: firefox,chrome,safari and opera support font of type .hf and .off
Note: Internet explorer support the new @font-face rule but it only supports fonts of type .eot
ex1:
<head>
<style>
@font-face{
font-family: myFirstFont;
src:url('sansation-bold-Italic.woff');
}
div{
font-family: myFirstFont;
}
</style>
</head>
<body>
<div> some text </div>
</body>
font-size-adjust: This property gives you better control of the font size.
syntax: font-size-adjust: number|none|inherit;
value Description
number Defines the aspect value to use
none Default value no font size adjustment.
Inherit Inherits the font size adjustment from parent elements
Ex:
<head>
<style>
div{
font-size-adjust: 20px;
}
</style>
</head>
<body>
<div> some text ... </div>
</body>
css3 transforms
Transform is a powerfull property to move, scale, turn, spin and stretch element. It supports the
following list of properties.
transform
transform-origin
transform-style
translate(): with the help of this method you can move your object depending on it's parameter. Two
types of parameter you can pass in this method one is from left(x-axis) and the another is from top(y-
axis)
syntax: tranform: translate(x,y);
ex:
<head>
<style type='text/css'>
div{
width: 90px;
height: 60px;
background-color: #FF9900;
border: 2px solid #FF00FF;
}
#div1{
transform:translate(20px, 30px);
}
#div2{
transform:translate(40px,60px);
}
</style>
</head>
<body>
<div> </div>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
Rotate(): with the help of this method you can rotate your object depending on it's value. Two types of
value you can pass in this method one is positive and the another one is negative.
syntax: transform:rotate(x,y);
x --> represent clock wise rotation.
y --> represent counter clock wise rotation.(anticlock)
ex:
<head>
<style>
div{
width: 90px;
height: 60px;
background-color: #FF9900;
border: 2px solid #FF00FF;
}
#div1{
transform:rotate(30deg);
}
</style>
</head>
<body>
<div> ori </div>
<div id='div1'>rotate</div>
</body>
scale: with the help of this method you can increase or decrease your object size depending on it's value
passes in the parameter two types of value you can pass in the parameter one is for width(x-axis) and
the another one is for height(y-axis).
ex: scale(x, y);
ex:
<head>
<style>
div{
width: 90px;
height: 60px;
background color: #FF9900;
border: 2px solid #FF00FF;
}
#div1{
margin: 100px;
transform: scale(2,3);
}
</style>
</head>
<body>
<div> Rori </div>
<div id='div1'>scale</div>
</body>
skew(): With the help of this method you can change the angle of your object depending on it's value
passed in the parameter. Two types of values you can pass in the parameter,one is for horizontal (x-axis)
and the another one for vertical (y-axis).
syntax: transform: skew(x,y);
ex:
<head>
<style>
div{
height: 60px;
width: 90px;
background-color: #FF9900;
border: 2px solid #FF00FF;
}
#div1{
transform: skew(20deg, 30deg);
}
</style>
</head>
<body>
<div> ori </div>
<div id='div1'> skew </div>
</body>
css3 transitions
A transition is such a property of css3 which is used to animate the object without using flash or any
other animation application. With this feature of css3 you can change the shape and size of your object
with animated effects.
It supports the following list of properties.
Transition: A shorthand property for setting the four transition property into a single property.
transition-property: specifies the name of the css property to which the transition is applied.
transition-duration: Defines the length of time that a transition takes.
transition-timing-function: Describes how the speed during the transition will be calculated.
Eg:
<head>
<style>
div{
width: 90px;
height: 60px;
background-color: #FF0000;
transition: width;
border-radius: 20px;
transition-duration: 5s;
float: right;
}
</style>
</head>
<body>
<div> </div>
</body>
Transition Delay: It specifies when the transition effect will start. The transition delay value is defined in
seconds(s) or milliseconds(ms).
syntax: transition-delay: time;
value Description
time specifies the number of seconds for milliseconds to wait before the transition effect will start.
ex:
<head>
<style>
div{
width:90px;
height:60px;
background-color:#FF0000;
transition:width;
border-radius:20px;
transition-duration:25;
transition-delay:1s;
}
div:hover{
width:350px;
}
</style>
</head>
<body>
<div> </div>
</body>
@keyframes rule: The @keyframe rule is where the animation is created specify a css style inside the
@keyframes rule and the animation will gradually change from the current style to the new style. We
can create user defined animations.
How to implement animation: An animation is an effect that lets an element gradually change from one
style to another style. You can change as many styles you want, as many times you want. Specify when
the change will happen in percent or the keywords "from" and "to" which is the same as 0% and 100%.
0% is the begining of the animation. 100% when the animation is complete.
ex:
<head>
<style>
div{
width: 90px;
height: 60px;
background-color: #FF9900;
transition: width;
float: right;
transition-duration: 5s;
}
div:hover{
width: 350px;
}
</style>
</head>
<body>
<div> </div>
</body>
Multiple Transitions:
<head>
<style>
div{
width: 90px;
height: 60px;
background-color: #FF0000;
transition: width;
border-radius: 20px;
transition-duration: 2s;
}
div:hover{
width:350px;
}
#div1{
width: 90px;
height: 60px;
background-color: #0000FF;
transition: height;
border-radius: 5px;
transition-duration: 2s;
}
#div1:hover{
height: 150px;
}
</style>
</head>
<body>
<div> </div>
<div id="div1"></div>
</body>
Transition property: The transition property is a shorthand property for the four transition properties:
transition property, transition duration, transition-timing-function and transition-delay.
synatx: transition: property duration timimg-function delay;
ex1:
<head>
<style>
div{
width: 90px;
height: 60px;
background-color: #FF0000;
transition: width 25;
}
div:hover{
width:350px;
}
</style>
</head>
<body>
<div> </div>
</body>
Transition Duration: It specifies how many seconds(s) or milliseconds(ms) a transition effect takes to
complete.
syntax: transition-duration: time;
value Description
time specifies how many seconds or milliseconds a transition effect takes to complete.
Transition Timing Function: It specifies the speed curve of the transition effect. This property allows a
transition effect to change speed over it's duration.
syntax: Transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
syntax: animation: name duration timing-function delay iteration-count direction;
ex1:
<head>
<style type='text/css'>
div{
width: 80px;
height: 70px;
background-color: #FF0000;
position: relative;
animation: mymove 1s 4;
border-radius: 20px;
}
@keyframes mymove /* firefox */{
from{left:0px;}
to{left:300px;}
}
</style>
</head>
<body>
<div> </div>
</body>
css3 animation duration property: The animation duration property defines how many seconds or
milliseconds an animation takes to complete one cycle.
syntax: animation-duration: time;
value Description
time specifies the length an animation takes to finish default value is 0,meaning there
will be no animation.
Animation iteration count property: The animation iteration count property defines how many times an
animation should be played.
syntax: animation-iteration-count: value;
value Description
n A number that defines how many times an animation should be played.
infinite specifies that the animation should be played inifinite times.
ex:
<head>
<style>
div{
width: 80px;
height: 90px;
background-color: #FF0000;
position: relative;
animation: mymove;
animation-duration: 5s;
animation-iteration-count: 6;
border-radius: 20px;
}
@keyframes mymove{
from{left:0px;}
to{left:300px;}
}
</style>
</head>
Animation Direction: The animation direction property defines whether or not the animation should
play in reverse on alternate cycles. If the animation direction value is "alternate" the animation will be
played as normal every odd time (1,3,5 etc...) and backwords every even time(2,4,6 etc...).
syntax: animation-direction:value;
value Description
normal Default value. The animation should be played as normal value.
alternate The animation should be played in reverse on alternate cycle.
ex:
<head>
<style>
div{
height: 70px;
width: 60px;
background-color: #FF0000;
position: relative;
animation: mymove;
animation-duration: 5s;
animation-iteration-count: infinite;
border-radius:20px;
animation-direction: alternate;
}
@keyframes mymove{
0% {background: red; left: 0px;top: 0px;}
25%{background: yellow;left: 200px;top: 0px;}
50%{background: green;left: 0px;top: 200px;}
75%{background: blue;left: 0px;top: 200px;}
100%{backgroud: red;left: 0px;top: 0px;}
}
</style>
</head>
<body>
<div> </div>
</body>
ex:
<head>
<style>
div[class^="test"]{
background:#FF0000;font-family:tahoma;
}
</style>
</head>
<body>
<div class="first-test">The first div element</div>
<div class="test">The second div element</div>
<p class="test">This is some text in a</p>
</body>
ex2:
<head>
<style>
[class^="test"]{
background:#FF0000;font-family: tahoma;
}
</style>
</head>
<body>
<div class="first-test">The first div element</div>
</body>
css3 [attribute $=value] selector: The [attribute$=value] selector matches every element whose
attribute value ends with a specified value.
ex:
<head>
<style>
div[class$='test'] {
background:#FFFF11;
}
</style>
</head>
<body>
<div class="first-test"> The first div element </div>
<div class="second"> The second div element </div>
<div class="test"> The third div element </div>
<p class="test"> The fourth div element </p>
</body>
css3 [attribute*=value] selector: The [attribute *=value] selector matches every element whose
attribute value containing a specified value.
note: The [attribute*=value] selector is supported in all major web browsers.
ex:
<head>
<style>
[class*="test"]{
background:#FFF000;
}
</style>
</head>
<body>
<div class="first-test">The first div element</div>
<div class="second">The second div element</div>
<div class="test">The third div element</div>
<p class="test">The fourth div element</p>
</body>
css3-first of type selector: The first of type selector matches every element that is the first child of a
particular type of it's parent.
Note: The first of type selector is supported in all major web browser except IE8 and earlier.
ex:
<head>
<style>
p:first-of-type{
background: #00FFFF;
}
</style>
</head>
<body>
<h1> This is heading </h1>
<p> This is first paragraph </p>
<p> The second paragraph </p>
<p> The third paragraph </p>
</body>
css3-only-of-type selector: The only of type selector is matches every element that is the only child of
it's type of it's parent.
ex:
<head>
<style>
p:only-of-type{
background:#FF00FF;
font-family:tahoma;
}
</style>
</head>
<body>
<p> this is paragraph </p>
<div>
<p> This is paragraph </p>
<p> this is paragraph </p>
</div>
</body>
css3-nth-child selector: The nth child selector matches every element that is the nth child regardless of
type of it's parent.
Note: The nth child selector is supported in all major web browsers except IE8 and earlier.
ex:
<head>
<style>
p:nth-child(4) {
background: #FFCC00; font-family:tahoma;
}
</style>
</head>
<body>
<h1> This is heading </h1>
<p> the first paragraph </p>
<p> the second paragraph </p>
<p> the third paragraph </p>
<p> the fourth paragraph </p>
</body>
value Description
none user cann't resize the element user can adjust both the height and the width.
horizontal user can adjust the width of the element.
vertical user can adjust the height of the element.
ex:
<head>
<style>
div{
border: 2px solid;
padding: 10px 40px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<div> some text ... </div>
</body>
sessionStorage: It is also use browsers data locally but it is for limited period when we close the browser
it will automatically delete the stored data and we can't see the browsers stored data again. HTML5
introduces the session storage attribute which be used by the sites to add data to the session storage.
ex:
<head>
<script type='text/javascript'>
var sno=100;
alert("The entered number is:"+sno);
</script>
</head>
<body>
<a href="page2.html">page2</a>
</body>
o/p is 100,page2(link)
ex:
<head>
<script>
alert("hi");
alert("sno");
</script>
</head>
o/p : hi,No msg
ex3:with session storage
<head>
<script>
sessionStorage.sno=100;
alert(sessionStorage.sno)
</script>
</head>
<body>
<a href="page2.html"> page2 </a>
</body>
o/p : 100,page2
ex:
<head>
<script type='text/javascript'>
alert("hi");
alert(sessionStorage.sno);
</script>
</head>
o/p is hi,100
Local storage: Which is used to store the data locally. It stores the data with no expiration date, means if
browser is closed then it will not delete the data and we can view the data any time and even after year.
ex1:
<head>
<script>
localStorage.sno=100
alert(localStorage.sno);
</script>
</head>
<body>
<a href="page2.html"> page2 </a>
</body>
o/p : 100,page2(link)
ex2:
<head>
<script type="text/javascript">
alert("hi");
alert(localStorage.sno);
</script>
</head>
o/p is hi,100
Advanced example for session storage:
<body>
<script type='text/javascript'>
if(sessionStorage.hits) {
sessionStorage.hits=number(sessionStorage.hits)+1;
}
else{
sessionStorage.hits=1;
}
document.write("TotalHits:"+sessionStorage.hits);
</script>
<p> Refresh the page to increase the number of hits </p>
</body>
ex:
<body>
<script>
if(localStorage.hits) {
localStorage.hits=number(localStorage.hits)+1;
}
else{
localStorage.hits=1;
}
document.write("Totalhits"+localstorage.hits);
</script>
<p> Refresh the page to increase the number of hits </p>
</body>
In web storage storing sensitive data on a local mechine could be dangerous and could a security whole.
A session storage data deleted automatically when you close the browser where as local storage unable
to that time we sholud clear the local storage with the help of localStorage.clear() method.
Define web sql: Web sql database is webpage API for storing data in databases that can be queried using
a variant of sql. The API is supported by google chrome, opera, safari and the android browser.
Indexed DB: It is basically a persistant data store in the browser a database on the client side. like regular
relational databases it maintains indexes over the records it stores and developers use the IndexedDB
javascript API to locate records by key or by looking up an index.
latitude: latitude is a geographic coordinate that specifies the north side position of a point on the
earths surface.
longitude: It is a geographic co-ordinate that specifies the east west position of a point on the earths
surface.
Google maps controls: Google map supports the following list of controls.
1. zoom
2. pan
3. map type
4. street view
5. scale
6. rotate
Geolocation methods:
method Description
getcurrentposition It retrieves the current geographic location of the user
watchposition() It retrieves periodic updates about the current geographic location of the device.
clearwath() This method cancels an ongoing watch position call.
creating draggable content: making an object draggable is simple. set draggable=true attribute on the
element you want to make moveable.
ex:
<body>
<img src="html5.png" width="100px" height="100px" draggable="true">
</body>
Drag and Drop events: Drag and Drop supports the following list of events.
allow drop: By default all elements are not dragged or dropped to allow a drop we must prevent the
default handling of the element.
eg:
function allowDrop(ev) {
ev.preventDefault();
}
What to drag: The dataTransfer.setData() method sets the data type and the vlaue of the dragged data.
ex:
function drag(ev) {
ev.dataTransfer.setData("text",ev.target.id);
}
Do the Drop: when the drag data is dropped the drop event occures.This event fires as follows.
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
ev.target.appendchild(document.getElementById(data));
}
<head>
<style>
#div1{
width:350px;height:70px;
border:1px solid #FF00FF;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.datatransfer.setData("text/html",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("text/html");
ev.target.appendchild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="water.gif" draggable="true" ondragstart="drag(event)" width="336"
height="69">
</body>