CSS Tutorial For Basic Students Studying

CSS Tutorial
CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology.
Our CSS tutorial is developed for beginners and professionals. The major points of CSS are
given below:
o CSS stands for Cascading Style Sheet.
o CSS is used to design HTML tags.
o CSS is a widely used language on the web.
o HTML, CSS and JavaScript are used for web designing. It helps the web designers to
apply style on HTML tags.
<html>
<head>
<style>
h1{
color:white;
background-color:red;
padding:5px;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>Write Your First CSS Example</h1>

<p>This is Paragraph.</p>
</body>
</html>
Output:
Write Your First CSS Example
This is Paragraph.
CSS Syntax
A CSS rule set contains a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It could be any tag like
<h1>, <title> etc.
Declaration Block: The declaration block can contain one or more declarations separated
by a semicolon. For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.
1. Selector{Property1: value1; Property2: value2; ..........;}
CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of
CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute
etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
The element selector selects the HTML element by name.
1. <html>
2. <head>
3. <style>
4. p{
5. text-align: center;
6. color: blue;
7. }
8. </style>
9. </head>
10. <body>
11. <p>This style will be applied on every paragraph.</p>
12. <p id="para1">Me too!</p>
13. <p>And me!</p>
14. </body>
15. </html>
Output:
This style will be applied on every paragraph.
Me too!
And me!

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id
is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
Let?s take an example with the id "para1".
1. <html>
2. <head>
3. <style>
4. #para1 {
6. color: blue;
7. }
8. </style>
9. </head>
10. <body>
11. <p id="para1">Hello</p>
12. <p>This paragraph will not be affected.</p>
13. </body>
14. </html>
Output:
Hello
This paragraph will not be affected.
3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.
Note: A class name should not be started with a number.
1. <html>
2. <head>
3. <style>
4. .center {
6. color: blue;
7. }
8. </style>
9. </head>
10. <body>
11. <h1 class="center">This heading is blue and center-aligned.</h1>
12. <p class="center">This paragraph is blue and center-aligned.</p>
13. </body>
14. </html>
Output:
This heading is blue and center-aligned.
This paragraph is blue and center-aligned.
CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected then you
should use the element name with class selector.
Let's see an example.

1. <html>
2. <head>
3. <style>
4. p.center {
6. color: blue;
7. }
8. </style>
9. </head>
10. <body>
11. <h1 class="center">This heading is not affected</h1>
12. <p class="center">This paragraph is blue and center-aligned.</p>
13. </body>
14. </html>
Output:
This heading is not affected
This paragraph is blue and center-aligned.
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the
pages.
1. <html>
2. <head>
3. <style>
4. * {
5. color: green;
6. font-size: 20px;
7. }
8. </style>
9. </head>

10. <body>
11. <h2>This is heading</h2>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>
Output:
This is heading
This style will be applied on every paragraph.
Me too!
And me!
5) CSS Group Selector
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector
in grouping.
Let's see the CSS code without group selector.
1. h1 {
3. color: blue;
4. }
5. h2 {
7. color: blue;
8. }
9. p {

11. color: blue;
12. }
As you can see, you need to define CSS properties for all the elements. It can be grouped in
following ways:
Let's see the full example of CSS group selector.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2, p {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. <h2>Hello Javatpoint.com (In smaller font)</h2>
14. <p>This is a paragraph.</p>
15. </body>
16. </html>
Output:
Hello Javatpoint.com
Hello Javatpoint.com (In smaller font)
This is a paragraph.
-------------------------------------------------------------------------------

How to add CSS
CSS is added to HTML pages to format the document according to information in the style
sheet. There are three ways to insert CSS in HTML documents.
1. Inline CSS
2. Internal CSS
3. External CSS
1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.
For example:
1. <p style="color:blue;">Hello CSS</p>
2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the
elements of the page. It is written inside the style tag within head section of html.
For example:
1. <style>
2. p{color:blue}
3. </style>
3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS
code in a css file. Its extension must be .css for example style.css.
For example:
1. p{color:blue}
You need to link this style.css file to /*your html pages like this:
1. <link rel="stylesheet" type="text/css" href="style.css">

The link tag must be used inside head section of html.
CSS Comments
CSS comments are generally written to explain your code. It is very helpful for the users
who reads your code so that they can easily understand the code.
Comments are ignored by browsers.
Comments are single or multiple lines statement and written within /*............*/ .
1. <html>
2. <head>
3. <style>
4. p {
5. color: blue;
6. /* This is a single-line comment */
8. }
9. /* This is
10. a multi-line
11. comment */
12. </style>
13. </head>
14. <body>
15. <p>Hello Javatpoint.com</p>
16. <p>This statement is styled with CSS.</p>
17. <p>CSS comments are ignored by the browsers and not shown in the output.</p>
18. </body>
19. </html>

-----------------------------------------------------------------------------------------------------------------------------
CSS Background
CSS background property is used to define the background effects on element. There are
CSS background properties that affects the HTML elements:
1. background-color
2. background-image
3. background-repeat
1) CSS background-color
The background-color property is used to specify the background color of the element.
You can set the background color like this:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2,p{
6. background-color: #b0d4de;
7. }
8. </style>
9. </head>
10. <body>
11. <h2>My first CSS page.</h2>
12. <p>Hello Javatpoint. This is an example of CSS background-color.</p>
13. </body>
14. </html>
Output:

My first CSS page.
Hello Javatpoint. This is an example of CSS background-color.
2) CSS background-image
The background-image property is used to set an image as a background of an element. By
default the image covers the entire element. You can set the background image for a page
like this.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("paper1.gif");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
13. </body>
14. </html>
CSS background-repeat
By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically.
The background looks better if the image repeated horizontally only.
background-repeat: repeat-x;
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {

6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-x;
8. }
9. </style>
10. </head>
11. <body>
13. </body>
14. </html>
background-repeat: repeat-y;
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-y;
8. }
9. </style>
10. </head>
11. <body>
13. </body>
14. </html>
CSS Border
The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an
element. The CSS border properties are given below
o border-style
o border-color
o border-width

1) CSS border-style
The Border style property is used to specify the border type which you want to display on
the web page.
There are some border style values which are used with border-style property to define a
border.
1. <html>
2. <head>
3. <style>
4. p.none {border-style: none;}
5. p.dotted {border-style: dotted;}
6. p.dashed {border-style: dashed;}
7. p.solid {border-style: solid;}
8. p.double {border-style: double;}
9. p.groove {border-style: groove;}
10. p.ridge {border-style: ridge;}
11. p.inset {border-style: inset;}
12. p.outset {border-style: outset;}
13. p.hidden {border-style: hidden;}
14. </style>
15. </head>
16. <body>
17. <p class="none">No border.</p>
18. <p class="dotted">A dotted border.</p>
19. <p class="dashed">A dashed border.</p>
20. <p class="solid">A solid border.</p>
21. <p class="double">A double border.</p>
22. <p class="groove">A groove border.</p>
23. <p class="ridge">A ridge border.</p>
24. <p class="inset">An inset border.</p>
25. <p class="outset">An outset border.</p>
26. <p class="hidden">A hidden border.</p>
27. </body>
28. </html>
2) CSS border-width

The border-width property is used to set the border's width. It is set in pixels. You can also
use the one of the three pre-defined values, thin, medium or thick to set the width of the
border.
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
p.three {
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Write your text here.</p>

<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>
Output
Write your text here.
3) CSS border-color
There are three methods to set the color of the border.
o Name: It specifies the color name. For example: "red".
o RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
o Hex: It specifies the hex value of the color. For example: "#ff0000".
There is also a border color named "transparent". If the border color is not set it is inherited
from the color property of the element.
Note: The border-color property is not used alone. It is always used with other border properties like
"border-style" property to set the border first otherwise it will not work.
<html>
<head>
<style>

p.one {
border-color: red;
}
p.two {
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">This is a solid red border</p>
<p class="two">This is a solid green border</p>
</body>
</html>
Output
This is a solid red border
This is a solid green border
CSS Display
CSS display is the most important property of CSS which is used to control the layout of the
element. It specifies how the element is displayed.

Every element has a default display value according to its nature. Every element on the
webpage is a rectangular box and the CSS property defines the behavior of that rectangular
box.
Syntax
1. display:value;
CSS display values
There are following CSS display values which are commonly used.
1. display: inline;
2. display: inline-block;
3. display: block;
4. display: run-in;
5. display: none;
1) CSS display inline
The inline element takes the required width only. It doesn't force the line break so the flow
of text doesn't break in inline example.
The inline elements are:
o <span>
o <a>
o <em>
o <b> etc.
Let's see an example of CSS display inline.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: inline;

7. }
8. </style>
9. </head>
10. <body>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>
Hello Javatpoint.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.
2) CSS display inline-block
The CSS display inline-block element is very similar to inline element but the difference is
that you are able to set the width and height.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
7. }
8. </style>
9. </head>
10. <body>
16. </body>
17. </html>
o/p

Hello Javatpoint.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.
3) CSS display block
The CSS display block element takes as much as horizontal space as they can. Means the
block element takes the full available width. They make a line break before and after them.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: block;
7. }
8. </style>
9. </head>
10. <body>
16. </body>
17. </html>
o/p
Output:
Java Tutorial.
SQL Tutorial.
HTML Tutorial.
CSS Tutorial.
4) CSS display run-in
This property doesn?t work in Mozilla Firefox. These elements don't produce a specific box
by themselves.

o If the run-in box contains a bock box, it will be same as block.
o If the block box follows the run-in box, the run-in box becomes the first inline box of
the block box.
o If the inline box follows the run-in box, the run-in box becomes a block box.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: run-in;
7. }
8. </style>
9. </head>
10. <body>
16. </body>
17. </html>
o/p
Java Tutorial.
SQL Tutorial.
HTML Tutorial.
CSS Tutorial.
5) CSS display none
The "none" value totally removes the element from the page. It will not take any space.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1.hidden {
6. display: none;
7. }
8. </style>
9. </head>
10. <body>
11. <h1>This heading is visible.</h1>
12. <h1 class="hidden">This is not visible.</h1>
13. <p>You can see that the hidden heading does not contain any space.</p>
14. </body>
15. </html>
Output:
This heading is visible.
You can see that the hidden heading does not contain any space.
CSS Float
The CSS float property is a positioning property. It is used to push an element to the left
or right, allowing other element to wrap around it. It is generally used with images and
layouts.
To understand its purpose and origin, let's take a look to its print display. In the print
display, image is set into the page such that text wraps around it as needed.

+Its web layout is also just similar to print layout.
How it works
Elements are floated only horizontally. So it is possible only to float elements left or right,
not up or down.
1. A floated element may be moved as far to the left or the right as possible. Simply, it
means that a floated element can display at extreme left or extreme right.
2. The elements after the floating element will flow around it.
3. The elements before the floating element will not be affected.
4. If the image floated to the right, the texts flow around it, to the left and if the image
floated to the left, the text flows around it, to the right.

CSS Float Property Example
Let's see a simple example to understand the CSS float property.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img {
6. float: right;
7. }
8. </style>
9. </head>
10. <body>
11. <p>The following paragraph contains an image with style
12. <b>float:right</b>. The result is that the image will float to the right in the paragraph
.</p>
13. <img src="good-morning.jpg" alt="Good Morning Friends"/>
14. This is some text. This is some text. This is some text.
27. </p>
28. </body>
29. </html>
The following paragraph contains an image with style float:right. The result is that
the image will float to the right in the paragraph.

This is some text. This is some text. This is some text. This is some text. This is
some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. Th alt is is so m e
text. This is some text. This is some text. This is some text. This is some text. This is
This is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text. This is
This is some text. This is some text. This is some text. This is some text.
CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property you
can change the text size, color, style and more. You have already studied how to make text
bold or underlined. Here, you will also know how to resize your font using percentage.
These are some important font attributes:
1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.
1) CSS Font Color
CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS
fonts. It is used to change the color of the text.

There are three different formats to define a color:
o By a color name
o By hexadecimal value
o By RGB
In the above example, we have defined all these formats.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h1 { color: red; }
9. h2 { color: #9000A1; }
10. p { color:rgb(0, 220, 98); }
11. }
12. </style>
13. </head>
14. <body>
15. <h1>This is heading 1</h1>
16. <h2>This is heading 2</h2>
18. </body>
19. </html>
Output:
This is heading 1
This is heading 2
2) CSS Font Family

CSS font family can be divided in two types:
o Generic family: It includes Serif, Sans-serif, and Monospace.
o Font family: It specifies the font family name like Arial, New Times Roman etc.
Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new
roman, Georgia etc.
Sans-serif: A sans-serif font doesn't include the small lines at the end of characters.
Example of Sans-serif: Arial, Verdana etc.
1. <html>
2. <head>
3. <style>
4. body {
5. font-size: 100%;
6. }
7. h1 { font-family: sans-serif; }
8. h2 { font-family: serif; }
9. p { font-family: monospace; }
10. }
11. </style>
12. </head>
13. <body>
14. <h1>This heading is shown in sans-serif.</h1>
15. <h2>This heading is shown in serif.</h2>
16. <p>This paragraph is written in monospace.</p>
17. </body>
18. </html>
Output:

This heading is shown in sans-serif.
This heading is shown in serif.
This paragraph is written in monospace.
3) CSS Font Size
CSS font size property is used to change the size of the font.
1. <html>
2. <head>
3. <title>Practice CSS font-size property</title>
4. </head>
5. <body>
6. <p style="font-size:xx-small;"> This font size is extremely small.</p>
7. <p style="font-size:x-small;"> This font size is extra small</p>
8. <p style="font-size:small;"> This font size is small</p>
9. <p style="font-size:medium;"> This font size is medium. </p>
10. <p style="font-size:large;"> This font size is large. </p>
11. <p style="font-size:x-large;"> This font size is extra large. </p>
12. <p style="font-size:xx-large;"> This font size is extremely large. </p>
13. <p style="font-size:smaller;"> This font size is smaller. </p>
14. <p style="font-size:larger;"> This font size is larger. </p>
15. <p style="font-size:200%;"> This font size is set on 200%. </p>
16. <p style="font-size:20px;"> This font size is 20 pixels. </p>
17. </body>
18. </html>
Output:
This font size is extremely small.
This font size is extra small
This font size is small
This font size is medium.

This font size is large.
This font size is extra large.
This font size is
extremely large.
This font size is smaller.
This font size is larger.
This font size is set on 200%.
This font size is 20 pixels.
4) CSS Font Style
CSS Font style property defines what type of font you want to display. It may be italic,
oblique, or normal.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h2 { font-style: italic; }
9. h3 { font-style: oblique; }
10. h4 { font-style: normal; }
11. }
12. </style>
13. </head>
14. <body>
15. <h2>This heading is shown in italic font.</h2>
16. <h3>This heading is shown in oblique font.</h3>

17. <h4>This heading is shown in normal font.</h4>
18. </body>
19. </html>
Output:
This heading is shown in italic font.
This heading is shown in oblique font.
This heading is shown in normal font.
5) CSS Font Variant
CSS font variant property specifies how to set font variant of an element. It may be normal
and small-caps.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p { font-variant: small-caps; }
6. h3 { font-variant: normal; }
7. </style>
8. </head>
9. <body>
10. <h3>This heading is shown in normal font.</h3>
11. <p>This paragraph is shown in small font.</p>
12. </body>
13. </html>
Output:
This heading is shown in normal font.
THIS PARAGRAPH IS SHOWN IN SMALL FONT.

6) CSS Font Weight
CSS font weight property defines the weight of the font and specify that how bold a font is.
The possible values of font weight may be normal, bold, bolder, lighter or number (100,
200..... upto 900).
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p style="font-weight:bold;">This font is bold.</p>
5. <p style="font-weight:bolder;">This font is bolder.</p>
6. <p style="font-weight:lighter;">This font is lighter.</p>
7. <p style="font-weight:100;">This font is 100 weight.</p>
16. </body>
17. </html>
Output:
This font is bold.
This font is bolder.
This font is lighter.
This font is 100 weight.

CSS Line Height
The CSS line height property is used to define the minimal height of line boxes within the
element. It sets the differences between two lines of your content.
It defines the amount of space above and below inline elements. It allows you to set the
height of a line of independently from the font size.
CSS line-height example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h3.small {
6. line-height: 70%;
7. }
8. h3.big {
9. line-height: 200%;
10. }
11. </style>
12. </head>
13. <body>
14. <h3>

15. This is a heading with a standard line-height.<br>
16. This is a heading with a standard line-height.<br>
17. The default line height in most browsers is about 110% to 120%.<br>
18. </h3>
19. <h3 class="small">
20. This is a heading with a smaller line-height.<br>
24. </h3>
25. <h3 class="big">
26. This is a heading with a bigger line-height.<br>
30. </h3>
31. </body>
32. </html>
o/p
This is a heading with a standard line-height.
This is a heading with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a heading with a smaller line-height.
This is a heading with a bigger line-height.

CSS Margin
CSS Margin property is used to define the space around elements. It is completely
transparent and doesn't have any background color. It clears an area around the element.
Top, bottom, left and right margin can be changed independently using separate properties.
You can also change all properties at once by using shorthand margin property.
There are following CSS margin properties:
CSS Margin Properties
Property Description
margin This property is used to set all the properties in one declaration.
margin-left it is used to set left margin of an element.
margin-right It is used to set right margin of an element.
margin-top It is used to set top margin of an element.
margin-bottom It is used to set bottom margin of an element.
CSS Margin Values
These are some possible values for margin property.
Value Description
auto This is used to let the browser calculate a margin.
length It is used to specify a margin pt, px, cm, etc. its default value is 0px.
% It is used to define a margin in percent of the width of containing element.
inherit It is used to inherit margin from parent element.
Note: You can also use negative values to overlap content.

CSS margin Example
You can define different margin for different sides for an element.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. p.ex {
9. margin-top: 50px;
10. margin-bottom: 50px;
11. margin-right: 100px;
12. margin-left: 100px;
13. }
14. </style>
15. </head>
16. <body>
17. <p>This paragraph is not displayed with specified margin. </p>
18. <p class="ex">This paragraph is displayed with specified margin.</p>
19. </body>
20. </html>
Output:
This paragraph is not displayed with specified margin.
This paragraph is displayed with specified margin.
Margin: Shorthand Property
CSS shorthand property is used to shorten the code. It specifies all the margin properties in
one property.

There are four types to specify the margin property. You can use one of them.
1. margin: 50px 100px 150px 200px;
2. margin: 50px 100px 150px;
3. margin: 50px 100px;
4. margin 50px;
1) margin: 50px 100px 150px 200px;
It identifies that:
top margin value is 50px
right margin value is 100px
bottom margin value is 150px
left margin value is 200px
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
7. }
8. p.ex {
9. margin: 50px 100px 150px 200px;
10. }
11. </style>
12. </head>
13. <body>
16. </body>
17. </html>
Output:

This paragraph is displayed with specified
margin.
2) margin: 50px 100px 150px;
It identifies that:
top margin value is 50px
left and right margin values are 100px
bottom margin value is 150px
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
7. }
8. p.ex {
9. margin: 50px 100px 150px;
10. }
11. </style>
12. </head>
13. <body>
16. </body>
17. </html>
Output:

3) margin: 50px 100px;
It identifies that:
top and bottom margin values are 50px
left and right margin values are 100px
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
7. }
8. p.ex {
9. margin: 50px 100px;
10. }
11. </style>
12. </head>
13. <body>
16. </body>
17. </html>
Output:

4) margin: 50px;
It identifies that:
top right bottom and left margin values are 50px
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
7. }
8. p.ex {
9. margin: 50px;
10. }
11. </style>
12. </head>
13. <body>
16. </body>
17. </html>
Output:
CSS Opacity
The CSS opacity property is used to specify the transparency of an element. In simple word,
you can say that it specifies the clarity of the image.
In technical terms, Opacity is defined as degree in which light is allowed to travel through
an object.

How to apply CSS opacity setting
Opacity setting is applied uniformly across the entire object and the opacity value is defined
in term of digital value less than 1. The lesser opacity value displays the greater opacity.
Opacity is not inherited.
CSS Opacity Example: transparent image
Let's see a simple CSS opacity example of image transparency.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img.trans {
6. opacity: 0.4;
7. filter: alpha(opacity=40); /* For IE8 and earlier */
8. }
9. </style>
10. </head>
11. <body>
12. <p>Normal Image</p>
13. <img src="rose.jpg" alt="normal rose">
14. <p>Transparent Image</p>
15. <img class="trans" src="rose.jpg" alt="transparent rose">
16. </body>
17. </html>
Output:
Normal Image

Transparent Image
CSS Overflow
The CSS overflow property specifies how to handle the content when it overflows its block
level container.
We know that every single element on a page is a rectangular box and the size, positioning
and behavior of these boxes are controlled via CSS.
Let's take an example: If you don't set the height of the box, it will grow as large as the
content. But if you set a specific height or width of the box and the content inside cannot fit
then what will happen. The CSS overflow property is used to overcome this problem. It
specifies whether to clip content, render scroll bars, or just display content.
CSS Overflow property values
Value Description
visible It specifies that overflow is not clipped. it renders outside the element's box.this is a de
hidden It specifies that the overflow is clipped, and rest of the content will be invisible.
scroll It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the co
auto It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the conte
inherit It inherits the property from its parent element.
initial It is used to set the property to its initial value.
CSS Overflow Example
Let's see a simple CSS overflow property.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div.Scroll {

6. background-color: #00ffff;
7. width: 100px;
8. height: 100px;
9. overflow: scroll;
10. }
11.
12. div.hidden {
13. background-color: #00FF00;
14. width: 100px;
15. height: 170px;
16. overflow: hidden;
17. }
18. </style>
19. </head>
20. <body>
21. <p>The overflow property specifies what to do if the content of an element exceeds the siz
e of the element's box.</p>
22. <p>overflow:scroll</p>
23. <div class="scroll">You can use the overflow property when you want to have better contr
ol of the layout.
24. The default value is visible.</div>
25. <p>overflow:hidden</p>
26. <div class="hidden">You can use the overflow property when you want to have better cont
rol of the layout.
27. The default value is visible.</div>
28. </body>
29. </html>
Output:
The overflow property specifies what to do if the content of an element exceeds the size of
the element's box.
overflow:scroll
overflow:scroll
You can use the overflow property when you want to have better control of the layout. The
default value is visible.
overflow:hidden

You can use the overflow property when you want to have better control of the layout. The
default value is
CSS Padding
CSS Padding property is used to define the space between the element content and the
element border.
It is different from CSS margin in the way that CSS margin defines the space around
elements. CSS padding is affected by the background colors. It clears an area around the
content.
Top, bottom, left and right padding can be changed independently using separate
properties. You can also change all properties at once by using shorthand padding property.
CSS Padding Properties
padding It is used to set all the padding properties in one declaration.
padding-left It is used to set left padding of an element.
padding-right It is used to set right padding of an element.
padding-top It is used to set top padding of an element.
padding-bottom It is used to set bottom padding of an element.
CSS Padding Values
Value Description
length It is used to define fixed padding in pt, px, em etc.
% It defines padding in % of containing element.

CSS Padding Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
7. }
8. p.padding {
9. padding-top: 50px;
10. padding-right: 100px;
11. padding-bottom: 150px;
12. padding-left: 200px;
13. }
14. </style>
15. </head>
16. <body>
17. <p>This is a paragraph with no specified padding.</p>
18. <p class="padding">This is a paragraph with specified paddings.</p>
19. </body>
20. </html>
This is a paragraph with no specified padding.
This is a paragraph with specified paddings.
CSS Position
The CSS position property is used to set position for an element. it is also used to place
an element behind another and also useful for scripted animation effect.
You can position an element using the top, bottom, left and right properties. These
properties can be used only after position property is set first. A position element's
computed position property is relative, absolute, fixed or sticky.
Let's have a look at following CSS positioning:

1. CSS Static Positioning
2. CSS Fixed Positioning
3. CSS Relative Positioning
4. CSS Absolute Positioning
1) CSS Static Positioning
This is a by default position for HTML elements. It always positions an element according to
the normal flow of the page. It is not affected by the top, bottom, left and right properties.
1. <html>
2. <head>
3. <style>
4. p.pos_fixed {
5. position: fixed;
6. top: 50px;
7. right: 5px;
8. color: blue;
9. }
10. </style>
11. </head>
12. <body>
13.
14. <p>Some text...</p><p>Some text...</p><p>Some text...</p><p>........</
p><p>.... ...</p
15. ><p>........</p><p>........</p><p>........</p><p>........</p>
16. <p>........ </p><p>........</p><p>........</p><p>........</p><p>........</p>
17. <p>........</p><p>........</p><p>Some text...</p><p>Some text...</p><p>Some t
ext...</p>
18. <p class="pos_fixed">This is the fix positioned text.</p>
19. </body>
20. </html>
o/p
Some text...

Some text...
........
.... ... This is the fix positioned text
........
........
........
........
........
........
........
........
........
........
........
Some text...
Some text...
Some text...
3) CSS Relative Positioning
The relative positioning property is used to set the element relative to its normal position.
1. <!DOCTYPE html>

2. <html>
3. <head>
4. <style>
5. h2.pos_left {
6. position: relative;
7. left: -30px;
8. }
9. h2.pos_right {
11. left: 30px;
12. }
13. </style>
14. </head>
15. <body>
16. <h2>This is a heading with no position</h2>
17. <h2 class="pos_left">This heading is positioned left according to its normal position</h2>
18. <h2 class="pos_right">This heading is positioned right according to its normal position</
h2>
19. <p>The style "left:-30px" subtracts 30 pixels from the element's original left position.</
p>
20. <p>The style "left:30px" adds 30 pixels to the element's original left position.</p>
21. </body>
22. </html>
This is a heading with no position
This heading is positioned left according to its normal
position
This heading is positioned right according to its normal
position
The style "left:-30px" subtracts 30 pixels from the element's original left position.
The style "left:30px" adds 30 pixels to the element's original left position.

4) CSS Absolute Positioning
The absolute positioning is used to position an element relative to the first parent element
that has a position other than static. If no such element is found, the containing block is
HTML.
With the absolute positioning, you can place an element anywhere on a page.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2 {
6. position: absolute;
7. left: 150px;
8. top: 250px;
9. }
10. </style>
11. </head>
12. <body>
13. <h2>This heading has an absolute position</h2>
14. <p> The heading below is placed 150px from the left and 250px from the top of the page
.</p>
15. </body>
16. </html>
o/p
The heading below is placed 150px from the left and 250px from the top of the pa
This heading has an absolute position

CSS Vertical Align
The CSS vertical align property is used to define the vertical alignment of an inline or table-
cell box. It is the one of the self-explanatory property of CSS. It is not very easy property
for beginners.
What it does
1. It is applied to inline or inline-block elements.
2. It affects the alignment of the element, not its content. (except table cells)
3. When it applied to the table cells, it affect the cell contents, not the cell itself.
CSS Vertical Align Values
value description
baseline It aligns the baseline of element with the baseline of parent element. This is a defau
length It is used to increase or decrease length of the element by the specified length. nega
% It is used to increase or decrease the element in a percent of the "line-height" prope
sub It aligns the element as if it was subscript.
super It aligns the element as if it was superscript.
top It aligns the top of the element with the top of the tallest element on the line.
bottom It aligns the bottom of the element with the lowest element on the line.
text-top the top of the element is aligned with the top of the parent element's font.
middle the element is placed in the middle of the parent element.
text-bottom the bottom of the element is aligned with the bottom of the parent element's font.
initial It sets this property to Its default value.
inherit inherits this property from Its parent element.

CSS Vertical Align Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img.top {
6. vertical-align: text-top;
7. }
8. img.bottom {
9. vertical-align: text-bottom;
10. }
11. </style>
12. </head>
13. <body>
14. <p><img src="good-morning.jpg" alt="Good Morning Friends"/> This is an image with a
default alignment.</p>
15. <p><img src="good-morning.jpg" class="top" alt="Good Morning Friends"/> This is an im
age with a text-top alignment.</p>
16. <p><img src="good-morning.jpg" class="bottom" alt="Good Morning Friends"/> This is a
n image with a text-bottom alignment.</p>
17. </body>
18. </html>
This is an image with a default alignment.

This is an image with a text-bottom alignment.
CSS White Space
The CSS white space property is used to specify how to display the content within an
element. It is used to handle the white spaces inside an element.
CSS White Space values
There are many white space values that can be used to display the content inside an
element.
Value Description
normal This is a default value. in this value, text is wrapped when necessary. sequences of white
whitespace.
nowrap Sequences of white space will collapse into a single whitespace. in this value, text will ne
when <br> tag is used.
pre Whitespace is preserved by the browser. it is act like html <pre> tag. text will only wrap
pre-line Sequences of white space will collapse into a single whitespace. texts are wrapped when
pre-
wrap
Whitespace is preserved by the browser. texts are wrapped when necessary, and on line
initial It sets this property to its default value.
inherit It inherits this property from its parent element.
CSS White Space Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. white-space: nowrap;
7. }
8. </style>
9. </head>
10. <body>
11. <p>
12. Write some text..Write some text..Write some text..
17. </p>
18. </body>
19. </html>
o/p
Write some text..Write some text..Write some text.. Write some
text..Write some text..Write some text.. Write some text..Write some
text..Write some text.. Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text.
CSS Width
The CSS width property is used to set the width of the content area of an element.
It does not include padding borders or margins. It sets width of the area inside the padding,
border, and margin of the element.
CSS width values

Value Description
auto It is a default value. it is used to calculate the width.
length It is used to define the width in px, cm etc.
% It defines the width of the containing block in %.
initial It is used to set the property to its default value.
inherit It is used to inherit the property from its parent element.
CSS Width Example: width in px
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img.normal {
6. width: auto;
7. }
8. img.big {
9. width: 150px;
10. }
11. p.ex {
12. height: 150px;
13. width: 150px;
14. }
15. </style>
16. </head>
17. <body>
18. <img class="normal" src="good-morning.jpg" width="95" height="84"><br>
19. <img class="big" src="good-morning.jpg" width="95" height="84">
20. <p class="ex">The height and width of this paragraph is 150px.</p>
22. </body>
23. </html>

The height and width of this paragraph is 150px.
CSS Width Example: width in %
The percent width is a measurement unit for the containing block. It is great for images.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img.normal {
6. width: auto;
7. }
8. img.big {
9. width: 50%;
10. }
11. img.small {
12. width: 10%;
13. }
14. </style>

15. </head>
16. <body>
17. <img class="normal" src="good-morning.jpg" width="95" height="84"><br>
18. <img class="big" src="good-morning.jpg" width="95" height="84"><br>
19. <img class="small" src="good-morning.jpg" width="95" height="84">
20. </body>
21. </html>

Note: You can also use the "min-width" and "max-width" property to control the size of image.
25/9
CSS Word Wrap
CSS word wrap property is used to break the long words and wrap onto the next line.
This property is used to prevent overflow when an unbreakable string is too long to fit in the
containing box.
CSS Word Wrap Values
Value Description
normal This property is used to break words only at allowed break points.
break-word It is used to break unbreakable words.
initial It is used to set this property to its default value.
inherit It inherits this property from its parent element.
CSS Word Wrap Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.test {
6. width: 11em;
7. background-color: #00ffff;

8. border: 1px solid #000000;
9. padding:10px;
10. word-wrap: break-word;
11. }
12. </style>
13. </head>
14. <body>
15. <p class="test"> In this paragraph, there is a very long word:
16. iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break a
nd wrap to the next line.</p>
17. </body>
18. </html>
o/p
In this paragraph, there is a very long word:
iamsoooooo
oooooooooooooooo
ooooooooolonggg
ggggggggggggg.
The long word will break and wrap to the next line.
CSS Outline
CSS outline is just like CSS border property. It facilitates you to draw an extra border
around an element to get visual attention.
It is as easy as to apply as a border.
1. <!DOCTYPE html>
2. <html>
3. <style type="text/css">
4. .box {
5. background-color: #eee;

6. outline: 3px solid red;
7. border: 3px solid lightgreen;
8. padding: 5px 10px;
9. }
10. </style>
11. <div class="box">Welcome to JavaTpoint</div>
12. </body>
13. </html>
o/p
Difference between Border and Outline
At first glance, border and outline look similar, but there are some very important
differences between them:
o It is not possible to apply a different outline width, style and color for the four sides
of an element while in border; you can apply the provided value for all four sides of
an element.
o The border is a part of element's dimension while the outline is not the part of
element's dimension. Means, it doesn't matter how thick an outline you apply to the
element, the dimensions of it won't change.
The outline property is a shorthand property. It can be divided into outline-width, outline-
style and outline-color properties. It facilitates you to use any of the property alone, if you
need it.
1. <!DOCTYPE html>
2. <html>
4. .box {
6. border: 3px solid Lightgreen;
8. outline-width: 3px;
9. outline-style: solid;

10. outline-color: red;
11. }
12. </style>
14. </body>
15. </html>
In the above example, you can see the three outline properties:
Outline-width:It is similar to margin and padding. It can be either an absolute value or a
relative value or one of the predefined outline width values i.e. thin, medium or thick. It is
preferred to use either an absolute value or a relative value because different browsers
interpret differently while using predefined outline width values like thin, medium or thick.
Outline-color:It specifies the color that you use for the outline. It supports all the colors
available in HTML and CSS.
Outline-style:In the above example, we have used only solid outline style while there are a
lot of outline style i.e. hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.
1. <!DOCTYPE html>
2. <html>
4. .box {
5. outline-color: red;
6. outline-width: 4px;
7. margin: 10px;
8. float: left;
9. border: 2px solid lightgreen;
11. }
12. </style>
13. <div class="box" style="outline-style: dashed;">This is dashed outline.</div>
14. <div class="box" style="outline-style: dotted;">This is dotted outline.</div>
15. <div class="box" style="outline-style: double;">This is double outline.</div>
16. <div class="box" style="outline-style: groove;">This is groove outline.</div>
17. <div class="box" style="outline-style: inset;">This is inset outline.</div>

18. <div class="box" style="outline-style: outset;">This is outset outline.</div>
19. <div class="box" style="outline-style: ridge;">This is ridge outline.</div>
20. <div class="box" style="outline-style: solid;">This is solid outline.</div>
21. </body>
22. </html>
Outline offset
The outline offset is used to create a distance between outline and border.
It takes a CSS length unit and the empty space between the border and the outline will be
transparent and then it takes the background color of the parent element. So you can see a
visible difference between outline and border.
1. <!DOCTYPE html>
2. <html>
4. .box {
6. outline: 3px solid red;
7. outline-offset: 6px;
8. border: 3px solid Lightgreen;
10. }
11. </style>
13. </body>
14. </html>
CSS Visibility
The CSS visibility property is used to specify whether an element is visible or not.
Note: An invisible element also take up the space on the page. By using display property
you can create invisible elements that don't take up space.

CSS Visibility Parameters
visible:It is the by default value. It specifies that the element is visible.
hidden:It specifies that the element is invisible (but still takes up space).
collapse:It is used only for table elements. It is used to remove a row or column, but it
does not affect the table layout.
The space taken up by the row or column will be available for other content.
If collapse is used on other elements, it renders as "hidden"
initial:It is used to set this property to its default value.
inherit:It is used to inherit this property from its parent element.
CSS Visibility Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1.visible {
6. visibility: visible
7. }
8. h1.hidden {
9. visibility: hidden
10. }
11. </style>
12. </head>
13. <body>
14. <h1 class="visible">I am visible</h1>
15. <h1 class="hidden">I am invisible</h1>
16. <p><strong>Note:</strong> An invisible element also take up the space on the page.
17. By using display property you can create invisible elements that don't
18. take space.</p>
19. </body>
20. </html>

CSS Counters
CSS counters are similar to variables. These are maintained by CSS and those values can be
incremented by CSS rules to track how many times they are used.
CSS counters facilitate simple CSS based incrementing and display of a number for
generated content.
CSS Counter Properties
Following is a list of properties that are used with CSS counter:
o counter-reset: It is used to create or reset a counter.
o counter-increment: It is used to increment the counter value.
o content: It is used to insert generated content.
o counter() or counters() function: It is used to add the value of a counter to an
element.
Note:Before using a CSS counter, it must be created with counter-reset.
CSS Counter Example
Let's take an example to create a counter for a page and increment the counter value for
each next element.
See this example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>

5. body {
6. counter-reset: section;
7. }
8. h2::before {
9. counter-increment: section;
10. content: "Section " counter(section) ": ";
11. }
12. </style>
13. </head>
14. <body>
15. <h1>Example of CSS Counters:</h1>
16. <h2>Java Tutorial</h2>
17. <h2>HTML Tutorial</h2>
18. <h2>CSS Tutorial</h2>
19. <h2>Oracle Tutorial</h2>
20. <p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specifi
ed.</p>
21. </body>
22. </html>
o/p
Example of CSS Counters:
1.Java Tutorial
2.HTML Tutorial
3.CSS Tutorial
4.Oracle Tutorial
Note: IE8 supports these properties only if a !DOCTYPE is specified.

Note: In the above example you can see that a counter is created for the page in the body selector
and it increments the counter value for each <h2> element and adds "Section <value of the
counter>:" to the beginning of each <h2> element.
CSS Nesting Counters
You can also create counters within the counter. It is called nesting of a counter. Let's take
an example to demonstrate nesting counter.
See this example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
7. }
8. h1 {
9. counter-reset: subsection;
10. }
11. h1::before {
13. content: "Section " counter(section) ". ";
14. }
15. h2::before {
16. counter-increment: subsection;
17. content: counter(section) "." counter(subsection) " ";
18. }
19. </style>
20. </head>
21. <body>
22. <h1>Java tutorials:</h1>
23. <h2>Core Java tutorial</h2>
24. <h2>Servlet tutorial</h2>
25. <h2>JSP tutorial</h2>
26. <h2>Spring tutorial</h2>
27. <h2>Hibernate tutorial</h2>
28.

29. <h1>Web technology tutorials:</h1>
30. <h2>HTML tutorial</h2>
31. <h2>CSS tutorial</h2>
32. <h2>jQuery tutorial</h2>
33. <h2>Bootstrap tutorial</h2>
34.
35. <h1>Database tutorials:</h1>
36. <h2>SQL tutorial</h2>
37. <h2>MySQL tutorial</h2>
38. <h2>PL/SQL tutorial</h2>
39. <h2>Oracle tutorial</h2>
40. <p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specifi
ed.</p>
41. </body>
42. </html>
o/p
section 1.
1.1
1.2
1.3
1.4
Section 2:
2.1
2.2
2.3
Section 3.
3.1
3.2
3.3

Note:In the above example you can see that a counter is created for the section and
another nesting counter named subsection is created within section.
Different level of nesting counters
You can create outlined lists by using nesting counters. It facilitates you to insert a string
between different levels of nested counters.
See this example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. ol {
7. list-style-type: none;
8. }
9.
10. li::before {
12. content: counters(section,".") " ";
13. }
14. </style>
15. </head>
16. <body>
17. <h2>Different level of Nesting counters</h2>
18. <ol>
19. <li>item</li>
20. <li>item
21. <ol>
22. <li>item</li>
23. <li>item</li>
24. <li>item
25. <ol>
26. <li>item</li>
27. <li>item</li>
28. <li>item</li>

29. </ol>
30. </li>
31. <li>item</li>
32. </ol>
33. </li>
34. <li>item</li>
35. <li>item</li>
36. </ol>
37. <p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
38. </body>
39. </html>
o/p
Different level of Nesting counters
1. item
2. item
1. item
2. item
3. item
1. item
2. item
3. item
4. item
3. item
4. item
Note: IE8 supports these properties only if a !DOCTYPE is specified.
CSS Tooltips
CSS Tooltips are a great way to display extra information about something when the user
moves the mouse cursor over an element.
Basic Tooltip Example

Let's create basic tooltip that appears when the cursor of the mouse moves over an
element.
See this example:
1. <!DOCTYPE html>
2. <html>
3. <style>
4. .tooltip {
7. border-bottom: 1px dotted black;
8. }
9. .tooltip .tooltiptext {
10. visibility: hidden;
11. width: 120px;
12. background-color: red;
13. color: #fff;
15. border-radius: 6px;
16. padding: 5px 0;
18. z-index: 1;
19. }
20. .tooltip:hover .tooltiptext {
21. visibility: visible;
22. }
23. </style>
24. <body style="text-align:center;">
25. <p>Move the mouse over the text below:</p>
26. <div class="tooltip">Hover over me
27. <span class="tooltiptext">This is tooltip text</span>
28. </div>
29. </body>
30. </html>
By using tooltips, you can display the position of the tooltip information in four ways:
o Top of the element
o Left side of the element

o Right side of the element
o Bottom of the element
Top Tooltip
The top tooltip specifies that if you move your mouse cursor over the element, the tooltip
information will be displayed on the top of the element.
See this example:
1. <!DOCTYPE html>
2. <html>
3. <style>
4. .tooltip {
8. }
11. width: 120px;
13. color: #fff;
16. padding: 5px 0;
18. z-index: 1;
19. bottom: 100%;
20. left: 50%;
21. margin-left: -60px;
22. }
25. }
26. </style>
28. <h2>Top Tooltip Example</h2>
29. <p>Move your mouse cursor over the below heading</p>

30. <div class="tooltip"><strong> Welcome to JavaTpoint</strong>
31. <span class="tooltiptext">A solution of all technology.</span>
32. </div>
33. </body>
34. </html>
Bottom Tooltip
The bottom tooltip specifies that if you move your mouse cursor over the element, the
tooltip information will be displayed on the bottom of the element.
See this example:
1. <!DOCTYPE html>
2. <html>
3. <style>
4. .tooltip {
8. }
9.
12. width: 120px;
14. color: #fff;
17. padding: 5px 0;
19. z-index: 1;
20. top: 100%;
21. left: 50%;
22. margin-left: -60px;
23. }

26. }
27. </style>
29. <h2>Bottom Tooltip Example</h2>
33. </div>
34. </body>
35. </html>
Left Tooltip
The left tooltip specifies that if you move your mouse cursor over the element, the tooltip
information will be displayed on the left side of the element.
See this example:
1. <!DOCTYPE html>
2. <html>
3. <style>
4. .tooltip {
8. }
11. width: 120px;
13. color: #fff;
16. padding: 5px 0;
18. z-index: 1;
19. top: -5px;
20. right: 105%;

21. }
24. }
25. </style>
27. <h2>Left Tooltip Example</h2>
31. </div>
32. </body>
33. </html>
Right Tooltip
The right tooltip specifies that if you move your mouse cursor over the element, the tooltip
information will be displayed on the right side of the element.
See this example:
1. <!DOCTYPE html>
2. <html>
3. <style>
4. .tooltip {
8. }
11. width: 120px;
13. color: #fff;
16. padding: 5px 0;

18. z-index: 1;
19. top: -5px;
20. left: 105%;
21. }
24. }
25. </style>
27. <h2>Right Tooltip Example</h2>
31. </div>
32. </body>
33. </html>
CSS Animation
CSS Animation property is used to create animation on the webpage. It can be used as a
replacement of animation created by Flash and JavaScript.
CSS3 @keyframes Rule
The animation is created in the @keyframe rule. It is used to control the intermediate steps
in a CSS animation sequence.
What animation does
An animation makes an element change gradually from one style to another. You can add as
many as properties you want to add. You can also specify the changes in percentage.0%
specify the start of the animation and 100% specify its completion.
How CSS animation works
When the animation is created in the @keyframe rule, it must be bound with selector;
otherwise the animation will have no effect.
The animation could be bound to the selector by specifying at least these two properties:
o The name of the animation

o The duration of the animation
CSS animation properties
@keyframes It is used to specify the animation.
animation This is a shorthand property, used for setting all the properties, except th
fill- mode property.
animation-delay It specifies when the animation will start.
animation-direction It specifies if or not the animation should play in reserve on alternate cycl
animation-duration It specifies the time duration taken by the animation to complete one cycl
animation-fill-mode it specifies the static style of the element. (when the animation is not play
animation-iteration-
count
It specifies the number of times the animation should be played.
animation-play-state It specifies if the animation is running or paused.
animation-name It specifies the name of @keyframes animation.
animation-timing-
function
It specifies the speed curve of the animation.
Animation
Example 1:
<!DOCTYPE html>

<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: black;}
}
/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: black;}
}
</style>

</head>
<body>
<p><b>Note:</b> The IE 9 and earlier versions don't support CSS3
animation property. </p>
<p>See the rectangle background from RED to BLACK.</p>
<div></div>
</body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;

}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:300px; top:0px;}
50% {background:blue; left:200px; top:300px;}
75% {background:green; left:0px; top:200px;}
}
/* Standard syntax */
@keyframes myfirst {
25% {background:yellow; left:300px; top:0px;}
50% {background:blue; left:300px; top:200px;}
75% {background:green; left:0px; top:200px;}
}
</style>
</head>
<body>

<p><b>Note:</b> The Internet Explorer 9 and its earlier versions don't
support this example.</p>
<div></div>
</body>
</html>
CSS Gradient
CSS gradient is used to display smooth transition within two or more
specified colors.
Why CSS Gradient
These are the following reasons to use CSS gradient.
o You don't have to use images to display transition effects.
o The download time and bandwidth usage can also be reduced.
o It provides better look to the element when zoomed, because the
gradient is generated by the browser.
There are two types of gradient in CSS3.
1. Linear gradients
2. Radial gradients
1) CSS Linear Gradient
The CSS3 linear gradient goes up/down/left/right and diagonally. To
create a CSS3 linear gradient, you must have to define two or more color

stops. The color stops are the colors which are used to create a smooth
transition. Starting point and direction can also be added along with the
gradient effect.
background: linear-gradient (direction, color-stop1, color-stop2.....);
(i) CSS Linear Gradient: (Top to Bottom)
Top to Bottom Linear Gradient is the default linear gradient. Let's take
an example of linear gradient that starts from top. It starts red and
transitions to green.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to
6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0
*/
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15
*/

background: linear-gradient(red, green); /* Standard syntax (must be
last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to
green:</p>
<div id="grad1"></div>
</body>
</html>
2) CSS Radial Gradient
You must have to define at least two color stops to create a radial
gradient. It is defined by its center.
1. background: radial-gradient(shape size at position, start-color, ..., last-
color);
(i) CSS Radial Gradient: (Evenly Spaced Color Stops)
Evenly spaced color stops is a by default radial gradient. Its by default
shape is eclipse, size is farthest- carner, and position is center.
1. <!DOCTYPE html>
2. <html>

3. <head>
4. <style>
5. #grad1 {
6. height: 150px;
7. width: 200px;
8. background: -webkit-radial-gradient(blue, green, red); /* Safari 5.1 to
6.0 */
9. background: -o-radial-gradient(blue, green, red); /* For Opera 11.6 to
12.0 */
10. background: -moz-radial-gradient(blue, green, red); /* For Firef
ox 3.6 to 15 */
11. background: radial-gradient(blue, green, red); /* Standard syntax
(must be last) */
12. }
13. </style>
14. </head>
15. <body>
16. <h3>Radial Gradient - Evenly Spaced Color Stops</h3>
17. <div id="grad1"></div>
18. </body>
19. </html>
CSS Transition
The CSS transitions are effects that are added to change the element
gradually from one style to another, without using flash or JavaScript.
You should specify two things to create CSS transition.
o The CSS property on which you want to add an effect.
o The time duration of the effect.
Let's take an example which defines transition effect on width property
and duration of 3 seconds.

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. width: 100px;
7. height: 100px;
8. background: orange;
9. -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
10. transition: width 1s;
11. }
12. div:hover {
13. width: 300px;
14. }
15. </style>
16. </head>
17. <body>
18. <div></div>
19. <p>Move the cursor over the div element above, to see the transiti
on effect.</p>
20. </body>
21. </html>
CSS Multiple Transition Effect
It is used to add transition effect for more than one CSS property. If you
want to add transition effect on more than one property, separate those
properties with a comma.

Let's take an example. Here, the transition effects on width, height and
transformation.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:15px;
width: 150px;
height: 100px;
background: violet;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For
Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 200px;
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */

transform: rotate(360deg);
}
</style>
</head>
<body>
<div><b>JavaTpoint.com</b><p> (Move your cursor on me to see the
effect)</p></div>
</body>
</html>

CSS Tutorial For Basic Students Studying

Recommended

More Related Content

Similar to CSS Tutorial For Basic Students Studying (20)

Recently uploaded (20)

CSS Tutorial For Basic Students Studying