Scribd
Upload
304 views

Css Notes

The document provides an introduction and overview of cascading style sheets (CSS). It describes what CSS is, its features, versions, structure, syntax, types of style sheets, selectors, and basic usage examples. Key points include that CSS is used to make web pages more presentable, it has features like easy management and global changes, different versions have been released, it uses selectors, properties, and values, and there are inline, internal, and external style sheets.

Uploaded by

AJAY SREEDHAR J
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
304 views

Css Notes

The document provides an introduction and overview of cascading style sheets (CSS). It describes what CSS is, its features, versions, structure, syntax, types of style sheets, selectors, and basic usage examples. Key points include that CSS is used to make web pages more presentable, it has features like easy management and global changes, different versions have been released, it uses selectors, properties, and values, and there are inline, internal, and external style sheets.

Uploaded by

AJAY SREEDHAR J
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 45

Introduction to cascading style sheet

css is a simple design language to make webpages more presentable


cascading: Represents inherit.
style: Represents attribute or property
sheet: That represent .css file

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 versions history:


css has the following list of versions
1. css 1.0 [1996]
2. css 2.0 [1998]
3. css 3.0 [2008]
4. css 4.0 [2014]

css structure: as per w3c standard css has the follwing detailed structure
<html>
<head>
<style type="text/css">
{
-------
-------
}
</style>
</head>
<body>
-------
-------
</body>
</html>

or

<input type='text' style="key: value; key:value'"/>

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

syntax: madde up of three parts


selector{property:value}
Note: The selector is normally the html tag

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

How to implement external style sheets.

step1: creating .css file


div{
color:#FF00FF;font-size:25px;
font-family:arial unicode ms;
text-decoration:underline;
font-weight:bold;
}
save with one .css extension @ any location.

step2: creating required html file


ex:
<head>
<link rel='stylesheet' href="one.css">
</head>
<body>
<div>welcome to external style sheets...</div>
</body>

->save with .html extension and run on any major web browser

ex: with file path


<head>
<link rel="stylesheet" href="file://c:user/subbapai/desktop/nit.css">
</head>
<body>
<div>welcome to external style sheet....</div>
</body>

Working with css selectors:


Selector means style reusability.In css there are different types of selectors.
tag selector
type selector
id selector
class selector
grouping selector
universal selector
decendent selector
customized selector etc.

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>

Selectors grouping: We can group selector using comma separator


ex1:
h1{font-family:sans-serif}
h2{font-family:sans-serif}
h3{font-family:sans-serif}

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>

Eg: ID and class grouping


<head>
<style type='text/css'>
div.div,#h1{
color:blue;
font-size:20px;
}
</style>
</head>
<body>
<div class="div">welcome to class</div>
<p id="h1">welcome to id selector</p>
</body>

Eg: class selector with java script


<head>
<style='text/css'>
.div{
color:blue;
font-size:20px;
}
</style>
<script type='text/javascript'>
function myval(){
document.getElementById("div").innerHTML="HTML5";
}
</script>
</head>
<body>
<p>click the button to dispaly class related result</p>
<div id="div" class="div">angularJs</div>
<div id="div" class="div">javascript</div>
<button onclick="myvalue()">click me</button>
</body>

Working with css units or measurements:


css supports a number of measurement including absolute and relative unix.These units are:
EM
EX
PX
in
cm
mm etc.

em: It is a unit of measurement in the field of typography. It is developed based on "m"


syntax: em;

Ex:
<head>
<style type='text/css'>
div{
font-size:4em;
}
</style>
</head>
<body>
<div>working with css units...!</div>
</body>

ex: Is another measurement developed based on lower case 'x'


syntax: ex;
<head>
<style type='text/css'>
div{
font-size:4ex;
}
</style>
</head>
<body>
<div> working with css units ...</div>
</body>
px: It defines a measurement in screen pixels.
syntax: px;

<head>
<style type='text/css'>
div{
font-size:4px;
}
</style>
</head>
<body>
<div> working with css units!!</div>
</body>

in: It defines a measurement in inches.


syntax: in;
<head>
<style type='text/css'>
div{
font-size:1in;
}
</style>
</head>
<body>
<div> working with css units!!</div>
</body>

cm: It defines a measurement in centimeters


syntax: cm;
<head>
<style type='text/css'>
div{
font-size:1cm;
}
</style>
</head>
<body>
<div> working with css units !! </div>
</body>

pt: It defines a measurement in points


syntax: pt;
<head>
<style type='text/css'>
div{
font-size:1pt;
}
</style>
</head>
<body>
<div> working </div>
</body>

pc: It defines measurement in picas


syntax: pc;
<head>
<style type='text/css'>
div{
font-size: 1pc;
}
</style>
</head>
<body>
<div> working </div>
</body>

%: It defines measurement in percentage


syntax: %;
<head>
<style type='text/css'>
div{
font-size: 100%;
}
</style>
</head>
<body>
<div> working </div>
</body>

CSS Background property


css supports the following list of background properties.
background-color
background-image
background-repeat
background-attachment
background-position

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>

background repeat: It is used to control the repeatition of an image in the background.


synatx: background-repeat:no-repeat;
or
background:no-repeat;

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;

Background-position: It is used to control position of an image in the background.


syntax: background-position:center;
or
background:center;

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>

CSS Font Family


css supports following list of font properties:
The font-family property is used to change the face of a font.
The font-style property is used to make a font italic or oblique.
The font-varient property is used to create a small-caps effect.
The font-weight property is used to display bold or ligt a font appears.
The font-size property is used to increase or decrease the size of a font.

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>

css text properties


css supports the following list of text properties.
color
direction
text-decoration
text-indent
text-align

color: using this property we can change the text color.


syntax: color:colorName/colorCode

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>

Text-decoration: it supports different decoration like underline,overline,line through....


syntax: text-decoration:value;

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>

Text-indent: This property is used to display indent at the starting of a paragraph.


syntax: text-indent:pixels;

Text-align: This property is used to align the text in a specific direction.


syntax: text-align:left|right|center|justify;

ex:
<head>
<style type='text/css'>
p{
text-indent:50px;
text-align:justify;
}
</style>
</head>
<body>
<p> welcome to indent property </p>
</body>

Letter-spacing: This property is used to apply space between letters.


syntax: letter-spacing: pixels;

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>

Working with advanced style sheets (css3)


css3 is new style sheet. It is divided into several modules. Each module having new capabilities and
extended features.
@font-face
opacity
RGBA (Red green blue alpha or amber)
Border-radius
Box-shadow
Text-shadow
Gradient
Multiple background images
Transform
Transition
Multi column layout
Styling forms with attribute selector
Wrapping up
Box-sizing and box-model
css3 selector

css3 browser support:


In css3 we are using the following prefixes for advanced properties.
IE requires the prefix -ms- (microsoft seem)
firefox requires the prefix -moz-
chrome and safari requires the prefix -webkit-
opera requires the prefix -o-

working with css multiple column properties:


In css we can create multiple columns layout for e-news papers. The following list of properties
frequently we are using.
column-count
column-gap
column-rule
column-fill
column- rule-color
column-rule-style
column-rule-width
column-span
column-width
columns

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>

column-gap: This property specifies the gap between the columns.


syntax: column-gap:length|normal;
value Description
lenght a specified length that will set the gap between the column.
normal specifies a normal gap between the column.

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>

column-fill: It specifies how to fill columns balanced or not.


syntax: column-fill:balance|auto;

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.

Note: currently no major web browser support.

column-span: It specifies how many columns an element should span across.


synatx: column-span:1/a11;

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>

column-width: It specifies the width of the column.


syntax: column-width:auto|length;

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>

background-clip: It specifies the painting area of the background.


syntax: background-clip:border-box|padding-box|content-box;

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>

Working with css3 borders:


css3 supports the following list of advanced properties.

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>

Border-radius: It is a shorthand property for setting the four border-*-radius properties.


syntax: border-redius: 1-4 length% 1px;

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>

css3 text properties:


css3 supports the following list of text properties;
text-justify
text-overflow
text-shadow
word-break
word-wrap

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>

word-break: It specifies the line breaking rules for non-CJK scripts.


syntax: word-break: normal|break-all|keep-all|initial|inherit;
javascript syntax: object.style.wordBreak=" inherit"

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>

CSS3 font properties


css3 supports the following list of advanced font properties.
@font-face
font-size-adjust
font-stretch

@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

.HF True type fonts


.off opene type fonts
.EOT embeded open type
WOFF web open font format
SVG scalable

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>

font-stretch: This property make or allow text wider and marrower.


syntax: font-stretch: wider|narrower|ultra-condensed|extra-condensed|condensed|semi-condensed|
normal|semi-expanded|extra-expanded|ultra-expanded|inherit.
Note: none of the major brosers supports the font-stretch property.

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

transform support the following five methods


translate()
rotate()
scale()
skew()
matrix()

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>

Working with css3 Animation


css3 supports the following list of advanced animations. We can create animations,
which can replace animated images,flash animation and javascript in many webpages.
Animation is a property to change an object from one style to another style in a animated way.
Animation properties: css3 supports the following list of animation properties.
@keyframes
animation
animation name
animation duration
animation delay
animation direction etc.

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

css3 animation property:


The animation property is a shorthand property for six of the animation properties. Animation-name,
animation-duration, animation timing-function, animation-delay, animation-iteration count and
animation direction.

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>

ex2: -moz-@keyframes mymove

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>

ex: with different direction


<head>
<style>
div{
width: 60px;
height: 70px;
background color: #FF0000;
position: relative;
animation: mymove;
animation-duration: 1s;
animation-iteration-count: infinite;
border-radius: 20px;
}
@keyframes mymove{
from{top:0px;}
to{top:250px;}
}
</style>
</head>
<body>
<div> </div>
</body>

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>

Working with advanced selectors:


In css3 selector means styles reusability. There are the following list of advanced selectors:
[attribute^=values] selector: The [attribute^=value] selector matches every element whose attribute
value begins with a specified value.
Note: The [attribute^=value] selector is supported in all major browsers.

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.

Note:the [attribute$=value] selector is supported in all major browsers.

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>

css3 user interface


User interface is powerfull property in css3. It is used to implement user interface without modifying a
code section you can resize div element and set the user interface property as follows.
css3 resizing: It specifies whether or not an element should be resizable by the user.
resize: Is a such property of user interface by which you can resize your div layout on your browser.
Three features of resize you use.
1. resize : both
2. resize : vertical
3. resize : horizontal
syntax: resize:none|both|horizontal|vertical

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>

HTML5 web storage


It has the following aliase name.
client side storage
web storage
off line storage
local storage
It is very close to cookies concept. The main intesion of web storage is store the data at client side
without disturbing the performance of the website. sIn HTML5 web storage is classified into the
following two types.
1. sessionStorage
2. localStorage

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.

HTML5 Geolocation (Deeper Integration with os)


HTML5 Gelocation API allows users to share their location with web applications by capturing the
approximate longitude and latitute coordinates of the user with their permission.

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.

Types of maps: Maps are classified into basic types.


ROADMAP (normal,default 2D map)
SATELITE (photographic map)
HYBRID (photographic map+roads & city names)
TERRAIN (map with mountains,riverrs etc)

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

Q)write a script to verify the browser support


<head>
<script>
function mysupport(){
if(navigator.geolocation) {
alert("your browser supports");
}
else{
alert("your browser unable to support");
}
}
</script>
</head>
<body>
<p> click the button to display the browser </p>
<button onclick="mysupport()"> support-browser </button>
</body>

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.

Working with HTML5 drag and drop


Define drag and drop: It is powerful user interface concept which makes it easy to copy, reorder and
deletion of items with the help of mouse clicks. It allows the user to click and hold the mouse button
down over an element, drag it to another location, release the mouse button.

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.

Events, dragstar, dragenter, dragover, dragleave, drag, drop, dragend.

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>

Drag and Drop between divisions:


ex:
<head>
<style>
#div1,#div2{
width:100px;height:95px;
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)">
<img id="drag1" src="html5.png" draggable="true" ondragstart="drag(event)"
width="100px" height="50px">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowdrop(event)"></div>
</body>

You might also like