[go: up one dir, main page]
Scribd
Upload
39 views72 pages

Web Tech (Third Unit)

Uploaded by

Rahul suthar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views72 pages

Web Tech (Third Unit)

Uploaded by

Rahul suthar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 72

What is CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to
describe the look and formatting of a document written in markup language. It provides
an additional feature to HTML. It is generally used with HTML to change the style of web
pages and user interfaces. It can also be used with any kind of XML documents including
plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for
web applications and user interfaces for many mobile applications.

What does CSS do

o You can add new looks to your old HTML documents.


o You can completely change the look of your website with only a few changes in
CSS code.

Why use CSS

These are the three major benefits of CSS:

1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and size
had to be repeated on every web page. This was a very long process. For example: If you
are developing a large website where fonts and color information are added on every
single page, it will be become a long and expensive process. CSS was created to solve this
problem. It was a W3C recommendation.

2) Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.

1
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

Inline CSS

We can apply CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. This method
mitigates some advantages of style sheets so it is advised to use this method sparingly.

If you want to use inline CSS, you should use the style attribute to the relevant tag.

Syntax:

1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

Example:

1. <h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>


2. <p>This paragraph is not affected.</p>

Inline CSS is applied on this heading.

This paragraph is not affected.

Disadvantages of Inline CSS

o You cannot use quotations within inline CSS. If you use quotations the browser will
interpret this as an end of your style value.
o These styles cannot be reused anywhere else.
o These styles are tough to be edited because they are not stored at a single place.
o It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
o Inline CSS does not provide browser cache advantages.

2
Internal CSS

The internal style sheet is used to add a unique style for a single document. It is defined
in <head> section of the HTML page inside the <style> tag.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-color: linen;
7. }
8. h1 {
9. color: red;
10. margin-left: 80px;
11. }
12. </style>
13. </head>
14. <body>
15. <h1>The internal style sheet is applied on this heading.</h1>
16. <p>This paragraph will not be affected.</p>
17. </body>
18. </html>

External CSS

The external style sheet is generally used when you want to make changes on multiple
pages. It is ideal for this condition because it facilitates you to change the look of the
entire web site by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head
section.

Example:

1. <head>
2. <link rel="stylesheet" type="text/css" href="mystyle.css">
3. </head>

3
The external style sheet may be written in any text editor but must be saved with a .css
extension. This file should not contain HTML elements.

Let's take an example of a style sheet file named "mystyle.css".

File: mystyle.css

1. body {
2. background-color: lightblue;
3. }
4. h1 {
5. color: navy;
6. margin-left: 20px;
7. }
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. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }

4
9. </style>
10. </head>
11. <body>
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>

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. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p id="para1">Hello Javatpoint.com</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>

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.

Let's take an example with a class "center".

5
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>

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. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is not affected</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>

This heading is not affected

6
4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the
pages.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. * {
6. color: green;
7. font-size: 20px;
8. }
9. </style>
10. </head>
11. <body>
12. <h2>This is heading</h2>
13. <p>This style will be applied on every paragraph.</p>
14. <p id="para1">Me too!</p>
15. <p>And me!</p>
16. </body>
17. </html>

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 {
2. text-align: center;
3. color: blue;
4. }
5. h2 {
6. text-align: center;
7. color: blue;
8. }
9. p{

7
10. text-align: center;
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:

1. h1,h2,p {
2. text-align: center;
3. color: blue;
4. }

Let's see the full example of CSS group selector.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2, p {
6. text-align: center;
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>

HTML Div Tag

The HTML <div> tag is used to group the large section of HTML elements together.

We know that every tag has a specific purpose e.g. p tag is used to specify paragraph,
<h1> to <h6> tag are used to specify headings but the <div> tag is just like a container
unit which is used to encapsulate other page elements and divides the HTML documents
into sections.

8
The div tag is generally used by web developers to group HTML elements together and
apply CSS styles to many elements at once. For example: If you wrap a set of paragraph
elements into a div element so you can take the advantage of CSS styles and apply font
style to all paragraphs at once instead of coding the same style for each paragraph
element.

1. <div style="border:1px solid pink;padding:20px;font-size:20px">


2. <p>Welcome to Javatpoint.com, Here you get tutorials on latest technologies.</p>
3. <p>This is second paragraph</p>
4. </div>

HTML <span> tag

HTML <span> tag is used as a generic container of inline elements. It is used for styling
purpose to the grouped inline elements (using class and id attribute or inline style).

The <span> tag does not have any default meaning or rendering.

The <span> tag can be useful for the following task:

o To change the language of a part of the text.


o To change the color, font, background of a part of text using CSS
o To apply the scripts to the particular part of the text. Syntax

1. <span>Write your content here......</span>

Following are some specifications about the HTML <span> tag

Display Inline

Start tag/End tag Both Start and End tag

Usage Styles and semantics

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Span Tag</title>
5. </head>
9
6. <body>
7. <h2>Example of span tag</h2>
8. <p>I have choosen only
9. <span style="color: red;">red</span>,
10. <span style="color: blue;">blue</span>, and
11. <span style="color: green;">green</span> colors for my painting.
12. </p>
13. </body>
14. </html>
Output:

CSS Text Formatting


The CSS text formatting properties are used to format text, style the text and perform different
types of manipulations like word spacing, alignment, justification, and text transformation.
Syntax:
CSS Text Formatting Properties:
These are the following text formatting properties.
 Text Color: This property is used to set the color of the text and the color can be set by using
a color name like “red”, hex value “#ff0000”, or by its RGB value “rgb(255,0,0)”;
 text-align: This property in CSS is used to specify the horizontal alignment of text in an
element inside a block element or table-cell box.
 text-align-last: It is used to set the last line of the paragraph just before the line break. It sets
the alignment of all the last lines occurring in the element in which the text-align-last
property is applied.
 text-decoration: text-decoration property is used to “decorate ” the content of the text.
 text-decoration-color: It is used to set the color of the decorations (overlines, underlines, and
line-throughs) over the text.
 text-decoration-line: It is used to set the various kinds of text decorations. this may include
many values such as underline, overline, line-through, etc.
 text-decoration-style: This property is used to set the text-decoration of the element. It is the
combination of the text-decoration-line and text-decoration-color properties.
 text-indent: It is used to indent the first line of the paragraph and the size can be in px, cm, pt.

10
 text-justify: This property is used to set the text-align to justify. It spreads the words into
complete lines.
 text-overflow: This property of text formatting specify that some text has overflown and is
hidden from the view.
 text-transform: It is used to control the capitalization of the text.
 text-shadow: it is used to add shadow to the text.
 letter-spacing: This property is used to specify the space between the characters of the text.
 line-height: It is used to set the space between the lines.
 direction: This property is used to set the direction of the text.
 word-spacing: It is used to specify the space between the words of the line.
Example 1: This example illustrates the use of text color property.
 html

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: red;

h2 {

color: green;

</style>

11
</head>

<body>

<h1>

GEEKS FOR GEEKS

</h1>

<h2>

TEXT FORMATTING

</h2>

</body>

</html>

Output:

Example 2: This example illustrates the use of the text-align property.


 html

<!DOCTYPE html>

12
<html>

<head>

<style>

h1 {

color: red;

text-align: center;

h2 {

color: green;

text-align: left;

</style>

</head>

<body>

<h1>

GEEKS FOR GEEKS

13
</h1>

<h2>

TEXT FORMATTING

</h2>

</body>

</html>

Output:

Example 3: This example illustrates the use of the text-decoration property.


 html

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: red;

14
text-decoration: underline;

</style>

</head>

<body>

<h1>

GEEKS FOR GEEKS

</h1>

<h2>

TEXT FORMATTING

</h2>

</body>

</html>

Output:

Example 4: This example illustrates the use of the text-transform property.


 html
15
<!DOCTYPE html>

<html>

<head>

<style>

h2 {

text-transform: lowercase;

</style>

</head>

<body>

<h1>

GEEKS FOR GEEKS

</h1>

<h2>

TEXT FORMATTING

</h2>

16
</body>

</html>

Output:

Example 5: This example illustrates the use of the text-indent property.


 html

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

text-indent: 80px;

</style>

17
</head>

<body>

<h1>

GEEKS FOR GEEKS

</h1>

<h2>

This is text formatting properties.<br />

Text indentation property is used to

indent the first line of the paragraph.

</h2>

</body>

</html>

Output:

Example 6: This example illustrates the use of the letter-spacing property.


 html

18
<!DOCTYPE html>

<html>

<head>

<style>

h2 {

letter-spacing: 4px;

</style>

</head>

<body>

<h1>

GEEKS FOR GEEKS

</h1>

<h2>

This is text formatting properties.

</h2>

19
</body>

</html>

Output:

Example 7: This example illustrates the use of the line-height property.


 html

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

line-height: 40px;

</style>

</head>

20
<body>

<h1>

GEEKS FOR GEEKS

</h1>

<h2>

This is text formatting properties.<br />

This property is used to set the

space between the lines.

</h2>

</body>

</html>

Output:

Example 8: This example illustrates the use of the direction property.


 html

21
<!DOCTYPE html>

<html>

<head>

<style>

h2 {

direction: rtl;

text-align: center;

</style>

</head>

<body>

<h1>

GEEKS FOR GEEKS

</h1>

<h2>

<bdo dir="rtl">

This is text formatting properties.

</bdo>

22
</h2>

</body>

</html>

Output:

Example 9: This example illustrates the use of the text-shadow property.


 html

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 3px 1px blue;

</style>

23
</head>

<body>

<h1>

GEEKS FOR GEEKS

</h1>

<h2>

This is text formatting properties.

</h2>

</body>

</html>

Output:

Example 10: This example illustrates the use of the word-spacing property.
 html

<!DOCTYPE html>

24
<html>

<head>

<style>

h2 {

word-spacing: 15px;

</style>

</head>

<body>

<h1>

GEEKS FOR GEEKS

</h1>

<h2>

This is text formatting properties.

</h2>

</body>

25
</html>

Output:

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 family: This property is used to change the face of the font.
2. CSS Font size: This property is used to increase or decrease the size of the font.
3. CSS Font style: This property is used to make the font bold, italic or oblique.
4. CSS Font variant: This property creates a small-caps effect.
5. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.

1)

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.

26
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. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h1 { font-family: sans-serif; }
9. h2 { font-family: serif; }
10. p { font-family: monospace; }
11. }
12. </style>
13. </head>
14. <body>
15. <h1>This heading is shown in sans-serif.</h1>
16. <h2>This heading is shown in serif.</h2>
17. <p>This paragraph is written in monospace.</p>
18. </body>
19. </html>

Output:

This heading is shown in sans-serif.

This heading is shown in serif.

This paragraph is written in monospace.

27
3) CSS Font Size

CSS font size property is used to change the size of the font. <html>

1. <head>
2. <title>Practice CSS font-size property</title>
3. </head>
4. <body>
5. <p style="font-size:xx-small;"> This font size is extremely small.</p>
6. <p style="font-size:x-small;"> This font size is extra small</p>
7. <p style="font-size:small;"> This font size is small</p>
8. <p style="font-size:medium;"> This font size is medium. </p>
9. <p style="font-size:large;"> This font size is large. </p>
10. <p style="font-size:x-large;"> This font size is extra large. </p>
11. <p style="font-size:xx-large;"> This font size is extremely large. </p>
12. <p style="font-size:smaller;"> This font size is smaller. </p>
13. <p style="font-size:larger;"> This font size is larger. </p>
14. <p style="font-size:200%;"> This font size is set on 200%. </p>
15. <p style="font-size:20px;"> This font size is 20 pixels. </p>
16. </body>
17. </html>

Output:

This font size is extremely small.

This font size is extra small

This font size is small

This font size is medium.

28
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. }

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

30
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>
8. <p style="font-weight:200;">This font is 200 weight.</p>
9. <p style="font-weight:300;">This font is 300 weight.</p>
10. <p style="font-weight:400;">This font is 400 weight.</p>
11. <p style="font-weight:500;">This font is 500 weight.</p>
12. <p style="font-weight:600;">This font is 600 weight.</p>
13. <p style="font-weight:700;">This font is 700 weight.</p>
14. <p style="font-weight:800;">This font is 800 weight.</p>
15. <p style="font-weight:900;">This font is 900 weight.</p>
16. </body>
17. </html>

Output:

This font is bold.

This font is bolder.

This font is lighter.

31
This font is 100 weight.

This font is 200 weight.

This font is 300 weight.

This font is 400 weight.

This font is 500 weight.

This font is 600 weight.

This font is 700 weight.

This font is 800 weight.

This font is 900 weight.

CSS Background

CSS background property is used to define the background effects on element. There are
5 CSS background properties that affects the HTML elements:

1. background-color
2. background-image

32
3. background-repeat
4. background-attachment
5. background-position

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>

33
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>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>

Note: The background image should be chosen according to text color. The bad
combination of text and background image may be a cause of poor designed and not
readable webpage.

3) 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>
12. <h1>Hello Javatpoint.com</h1>

34
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>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>

4) CSS background-attachment

The background-attachment property is used to specify if the background image is fixed


or scroll with the rest of the page in browser window. If you set fixed the background
image then the image will not move during scrolling in the browser. Let?s take an example
with fixed background image.

1. background: white url('bbb.gif');


2. background-repeat: no-repeat;
3. background-attachment: fixed;

5) CSS background-position

The background-position property is used to define the initial position of the background
image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

1. center
2. top

35
3. bottom
4. left
5. right

1. background: white url('good-morning.jpg');


2. background-repeat: no-repeat;
3. background-attachment: fixed;
4. background-position: center;
CSS Box Model

The components that can be depicted on the web page consist of one or more than one
rectangular box.

A CSS box model is a compartment that includes numerous assets, such as edge, border,
padding and material. It is used to develop the design and structure of a web page. It can
be used as a set of tools to personalize the layout of different components. According to
the CSS box model, the web browser supplies each element as a square prism.

The following diagram illustrates how the CSS properties


of width, height, padding, border and margin dictate that how much space an attribute
will occupy on a web page.

The CSS box model contains the different properties in CSS. These are listed below.

o Border
o Margin
o Padding

36
Elements of the width and height

Example 1

Here, to explain the CSS box model, we have an instance.

1. <!DOCTYPE html>
2. <head>
3. <title>CSS Box Model</title>
4. <style>
5. .main
6. {
7. font-size:30px;
8. font-weight:bold;
9. Text-align:center;
10. }
11. .gfg
12. {
13. margin-left:50px;
14. border:50px solid Purple;
15. width:300px;
16. height:200px;
17. text-align:center;
18. padding:50px;
19. }
20. .gfg1
21. {
22. font-size:40px;
23. font-weight:bold;
24. color:black;
25. margin-top:60px;
26. background-color:purple;
27. }
28. .gfg2
29. {
30. font-size:20px;
31. font-weight:bold;
32. background-color:white;
33. }
34. </style>
35. </head>

37
36. <body>
37. <div class = "main">CSS Box-Model Property</div>
38. <div class = "gfg">
39. <div class = "gfg1">JavaTpoint</div>
40. <div class = "gfg2">A best portal for learn Technologies</div>
41. </div>
42. </body>
43. </html>

Output

After the compilation of the above code, you get the following output.

Example 2

Here, we also have an illustration to describe the CSS box model.

1. <!DOCTYPE html>
2. <head>
3. <style>
4. .main
5. {
6. font-size:30px;
7. font-weight:bold;
8. text-align:left;
9. }
10. #box
11. {
12. padding-top:30px;
13. width: 300px;
14. height: 100px;
15. border: 40px solid red;
38
16. margin: 30px;
17. text-align:center;
18. font-size:32px;
19. font-weight:bold;
20. }
21. </style>
22. </head>
23. <body>
24. <div class="main">CSS Box-Model Property</div>
25. <div id="box">JavaTpoint</div>
26. </body>
27. </html>

Output

After the execution of the code, you get the following output:

Important Point: In the CSS box model, the subject area of an entity box is the region
where the content, such as image, text, video, etc., initially appeared. It may also retain
boxes of decedent elements.

CSS Border

The CSS border is a shorthand property used to set the border on an element.

39
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
o border-radius

1) CSS border-style

The Border style property is used to specify the border type which you want to display on
the web page.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.none {border-style: none;}
6. p.dotted {border-style: dotted;}
7. p.dashed {border-style: dashed;}
8. p.solid {border-style: solid;}
9. p.double {border-style: double;}
10. p.groove {border-style: groove;}
11. p.ridge {border-style: ridge;}
12. p.inset {border-style: inset;}
13. p.outset {border-style: outset;}
14. p.hidden {border-style: hidden;}
15. </style>
16. </head>
17. <body>
18. <p class="none">No border.</p>
19. <p class="dotted">A dotted border.</p>
20. <p class="dashed">A dashed border.</p>
21. <p class="solid">A solid border.</p>
22. <p class="double">A double border.</p>
23. <p class="groove">A groove border.</p>
24. <p class="ridge">A ridge border.</p>
25. <p class="inset">An inset border.</p>
26. <p class="outset">An outset border.</p>
27. <p class="hidden">A hidden border.</p>

40
28. </body>
29. </html>
Test it Now

Output:

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

A hidden border.

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.

Note: The border-width 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.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.one {
41
6. border-style: solid;
7. border-width: 5px;
8. }
9. p.two {
10. border-style: solid;
11. border-width: medium;
12. }
13. p.three {
14. border-style: solid;
15. border-width: 1px;
16. }
17. </style>
18. </head>
19. <body>
20. <p class="one">Write your text here.</p>
21. <p class="two">Write your text here.</p>
22. <p class="three">Write your text here.</p>
23. </body>
24. </html>

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.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.one {
6. border-style: solid;
7. border-color: red;

42
8. }
9. p.two {
10. border-style: solid;
11. border-color: #98bf21;
12. }
13. </style>
14. </head>
15. <body>
16. <p class="one">This is a solid red border</p>
17. <p class="two">This is a solid green border</p>
18. </body>
19. </html>

CSS border-radius property

This CSS property sets the rounded borders and provides the rounded corners around an
element, tags, or div. It defines the radius of the corners of an element.

It is shorthand for border top-left-radius, border-top-right-radius, border-bottom-


right-radius and border-bottom-left-radius. It gives the rounded shape to the corners
of the border of an element. We can specify the border for all four corners of the box in
a single declaration using the border-radius. The values of this property can be defined in
percentage or length units.

Property Description

border-top-left-radius It is used to set the border-radius for the top-left corner

border-top-right-radius It is used to set the border-radius for the top-right corner

border-bottom-right-radius It is used to set the border-radius for the bottom-right corner

border-bottom-left-radius It is used to set the border-radius for the bottom-left corner

Example
1. <!DOCTYPE html>
2. <html>

43
3.
4. <head>
5. <title> CSS border-radius </title>
6. <style>
7. div {
8. padding: 50px;
9. margin: 20px;
10. border: 6px ridge red;
11. width: 300px;
12. float: left;
13. height: 150px;
14. }
15. p{
16. font-size: 25px;
17. }
18. #one {
19. border-radius: 90px;
20. background: lightgreen;
21. }
22. #two {
23. border-radius: 25% 10%;
24. background: orange;
25. }
26. #three {
27. border-radius: 35px 10em 10%;
28. background: cyan;
29. }
30. #four {
31. border-radius: 50px 50% 50cm 50em;
32. background: lightblue;
33. }
34.
35. </style>
36. </head>
37.
38. <body>
39. <div id = "one">
40. <h2> Welcome to the javaTpoint.com </h2>
41. <p> border-radius: 90px; </p>
42. </div>

44
43. <div id = "two">
44. <h2> Welcome to the javaTpoint.com </h2>
45. <p> border-radius: 25% 10%; </p>
46. </div>
47. <div id = "three">
48. <h2> Welcome to the javaTpoint.com </h2>
49. <p> border-radius: 35px 10em 10%; </p>
50. </div>
51. <div id = "four">
52. <h2>Welcome to the javaTpoint.com</h2>
53. <p>border-radius: 50px 50% 50cm 50em;</p>
54. </div>
55. </body>
56. </html>

Output

Now, let's see the border-radius for specific corners.

Example- border-top-left-radius

It sets the border radius for the top-left corner.

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title> CSS border-radius </title>
6. <style>

45
7. #left {
8. border-top-left-radius: 250px;
9. background: lightgreen;
10. padding: 50px;
11. border: 6px ridge red;
12. width: 300px;
13. height: 200px;
14. font-size: 25px;
15. }
16. </style>
17. </head>
18.
19. <body>
20. <center>
21. <div id = "left">
22. <h2>Welcome to the javaTpoint.com</h2>
23. <p>border-top-left-radius: 250px;</p>
24. </div>
25. </center>
26. </body>
27. </html>

Output

46
Example- border-top-right-radius

It sets the border-radius for the top-right corner.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #left {
6. border-top-right-radius: 50%;
7. background: lightgreen;
8. padding: 50px;
9. border: 6px ridge red;
10. width: 300px;
11. height: 200px;
12. font-size: 25px;
13. }
14. </style>
15. </head>
16.
17. <body>
18. <center>
19. <div id = "left">
20. <h2>Welcome to the javaTpoint.com</h2>
21. <p>border-top-right-radius: 50%;</p>
22. </div>
23. </center>
24. </body>
25. </html>

Output

47
Example- border-bottom-right-radius

It sets the border-radius for the bottom-right corner.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #left {
6. border-bottom-right-radius: 50%;
7. background: lightgreen;
8. padding: 50px;
9. border: 6px ridge red;
10. width: 300px;
11. height: 200px;
12. font-size: 25px;
13. }
14. </style>
15. </head>
16.
17. <body>
18. <center>
19. <div id = "left">
20. <h2>Welcome to the javaTpoint.com</h2>
21. <p>border-bottom-right-radius: 50%;</p>
22. </div>
23. </center>
24. </body>
25. </html>

Output

48
Example- border-bottom-left-radius

It sets the border-radius for the bottom-left corner.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #left {
6. border-bottom-left-radius: 50%;
7. background: lightgreen;
8. padding: 50px;
9. border: 6px ridge red;
10. width: 300px;
11. height: 200px;
12. font-size: 25px;
13. }
14. </style>
15. </head>
16.
17. <body>
18. <center>
19. <div id = "left">
20. <h2>Welcome to the javaTpoint.com</h2>
21. <p>border-bottom-left-radius: 50%;</p>
22. </div>
23. </center>
24. </body>
25. </html>

Output

49
We can specify separate horizontal and vertical values by using the slash (/) symbol. The
values before the slash (/) is used for the horizontal radius and the values after the slash
(/) are for the vertical radius.

There is an example given below using the slash (/) symbol.

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. padding: 50px;
7. border: 6px ridge red;
8. width: 300px;
9. margin: 20px;
10. font-weight: bold;
11. height: 175px;
12. float: left;
13. font-size: 25px;
14. }
15. #one {
16. border-radius: 10% / 50%;
17. background: lightgreen;
18. }
19. #two {
20. border-radius: 120px / 100px 10px;
21. background: lightblue;
22. }
23. #three {
24. border-radius: 50% 10em / 10% 20em;
25. background: lightpink;
26. }
27. #four {
28. border-radius: 100px 10em 120px / 30%;
29. background: cyan;
30. }
31. </style>
32. </head>
33.

50
34. <body>
35. <center>
36. <div id = "one">
37. <h2>Welcome to the javaTpoint.com</h2>
38. <p>border-radius: 10% / 50%; </p>
39. </div>
40. <div id = "two">
41. <h2>Welcome to the javaTpoint.com</h2>
42. <p>border-radius: 120px / 100px 10px; </p>
43. </div>
44. <div id = "three">
45. <h2>Welcome to the javaTpoint.com</h2>
46. <p>border-radius: 50% 10em / 10% 20em; </p>
47. </div>
48. <div id = "four">
49. <h2>Welcome to the javaTpoint.com</h2>
50. <p>border-radius: 100px 10em 120px / 30%; </p>
51. </div>
52. </center>
53. </body>
54. </html>

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.

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

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.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: inline;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello Javatpoint.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

2) CSS display inline-block

52
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 {
6. display: inline-block;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello Javatpoint.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

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>
11. <p>Hello Javatpoint.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>

53
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

Output:

Hello Javatpoint.com

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

4) CSS display run-in

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>
11. <p>Hello Javatpoint.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>

54
16. </body>
17. </html>

Output:

Hello Javatpoint.com

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.

CSS Float

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

CSS Float Property Example

1. <!DOCTYPE html>
2. <html>

56
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.
15. This is some text. This is some text. This is some text.
16. This is some text. This is some text. This is some text.
17. This is some text. This is some text. This is some text.
18. This is some text. This is some text. This is some text.
19. This is some text. This is some text. This is some text.
20. This is some text. This is some text. This is some text.
21. This is some text. This is some text. This is some text.
22. This is some text. This is some text. This is some text.
23. This is some text. This is some text. This is some text.
24. This is some text. This is some text. This is some text.
25. This is some text. This is some text. This is some text.
26. This is some text. This is some text. This is some text.
27. </p>
28. </body>
29. </html>

CSS resize property

This CSS property allows the user to control the resizing of an element just by clicking or
dragging the bottom right corner of the element

This CSS property is used to define how an element is resizable by the user. It doesn't
apply on the block or inline elements where overflow is set to visible. So, to control the
resizing of an element, we have to set the overflow other than visible like (overflow:
hidden or overflow: scroll).

57
It is possible to resize the elements either in a horizontal or vertical direction or in both
directions. After applying the resize property to an element, we can see a small triangular
knob at the bottom right corner of the element. The user can drag the knob to enlarge
the textarea in either vertical, horizontal, or in both directions.

Sometimes resizing the element may affect the entire layout in an undesirable way. So,
depending on the layout, it is sometimes preferable to not allow the element from being
resized or restrict the resizability to only one direction.

Syntax
1. resize: none | horizontal | vertical | both | initial | inherit;
Property values

The property values of this CSS property are defined as follows:

none: It is the default value of this property, which does not allow resizing the element.

horizontal: This value allows the user to resize the element's width. It resizes the element
in a horizontal direction. There is a unidirectional horizontal mechanism for controlling
the width of an element.

vertical: It allows the user to resize the height of an element. It resizes the element in a
vertical direction. There is a unidirectional vertical mechanism for controlling the height
of an element.

both: It allows the user to resize the width and height of an element. It resizes the element
in both horizontal and vertical directions.

initial: It sets the property to default value.

inherit: It inherits the property from its parent element.

Let's understand this CSS by using some examples.

Example: Using horizontal value

This value has a unidirectional resizing that allows the user to adjust the element's width.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>

58
5.
6. div {
7. border: 2px solid red;
8. padding: 20px;
9. font-size: 25px;
10. width: 300px;
11. resize: horizontal;
12. overflow: auto;
13. background-color: lightgreen;
14. color: blue;
15. }
16. </style>
17. </head>
18. <body>
19. <center>
20.
21. <h1>Example of the resize: horizontal; </h1>
22.
23. <div>
24. <p> This is the div element. </p>
25. <p> To see the resizing effect, click and drag the bottom right corner of this div eleme
nt. </p>
26. </div>
27. </center>
28. </body>
29. </html>

Output

In the above output, we can see the resizing of div element in the horizontal direction.
We can see the triangular knob at the bottom right corner of the element. To see the
effect, we have to click and drag the knob.

Example: Using vertical value

Like the horizontal value, it also has a unidirectional resizing, but it allows the user to
adjust the element's height.

59
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5.
6. div {
7. border: 2px solid red;
8. padding: 20px;
9. font-size: 25px;
10. width: 300px;
11. resize: vertical;
12. overflow: auto;
13. background-color: lightgreen;
14. color: blue;
15. }
16. </style>
17. </head>
18. <body>
19. <center>
20.
21. <h1>Example of the resize: vertical; </h1>
22.
23. <div>
24. <p> This is the div element. </p>
25. <p> To see the resizing effect, click and drag the bottom right corner of this div eleme
nt. </p>
26. </div>
27. </center>
28. </body>
29. </html>

60
In the above output, we can see the resizing of div element in the vertical direction. We
can see a triangular knob at the bottom right corner of the element. To see the effect, we
have to click and drag the knob.

Example: Using both value

This value has a bidirectional resizing that allows the user to adjust both width and height
of the element.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5.
6. div {
7. border: 2px solid red;
8. padding: 20px;
9. font-size: 25px;
10. width: 300px;
11. resize: both;
12. overflow: auto;
13. background-color: lightgreen;
14. color: blue;
15. }
16. </style>
17. </head>
18. <body>
19. <center>
20.
21. <h1>Example of the resize: both; </h1>
22.
23. <div>
24. <p> This is the div element. </p>
25. <p> To see the resizing effect, click and drag the bottom right corner of this div eleme
nt. </p>
26. </div>
27. </center>
28. </body>
29. </html>

Output

61
Example: Using none value

It does not present any resizing mechanism.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5.
6. div {
7. border: 2px solid red;
8. padding: 20px;
9. font-size: 25px;
10. width: 300px;
11. resize: none;
12. overflow: auto;
13. background-color: lightgreen;
14. color: blue;
15. }
16. </style>
17. </head>
18. <body>
19. <center>
20.
21. <h1>Example of the resize: none; </h1>
22.
23. <div>
24. <p> This is the div element. </p>

62
25. <p> There is not any dragging mechanism at the bottom right corner because it is the
<b>none</b> value </p>
26. </div>
27. </center>
28. </body>
29. </html>

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given
duration.

Mouse over the element below to see a CSS transition effect:

CSS

In this chapter you will learn about the following properties:

 transition
 transition-delay
 transition-duration
 transition-property
 transition-timing-function

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

 the CSS property you want to add an effect to


 the duration of the effect

Note: If the duration part is not specified, the transition will have no effect,
because the default value is 0.

The following example shows a 100px * 100px red <div> element. The
<div> element has also specified a transition effect for the width property,
with a duration of 2 seconds:

63
Example
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

The transition effect will start when the specified CSS property (width)
changes value.

Now, let us specify a new value for the width property when a user mouses
over the <div> element:

Example
div:hover {
width: 300px;
}

Notice that when the cursor mouses out of the element, it will gradually
change back to its original style.

Change Several Property Values

The following example adds a transition effect for both the width and height
property, with a duration of 2 seconds for the width and 4 seconds for the
height:

div {
transition: width 2s, height 4s;
}

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the


transition effect.

64
The transition-timing-function property can have the following values:

 ease - specifies a transition effect with a slow start, then fast, then end
slowly (this is default)
 linear - specifies a transition effect with the same speed from start to
end
 ease-in - specifies a transition effect with a slow start
 ease-out - specifies a transition effect with a slow end
 ease-in-out - specifies a transition effect with a slow start and end
 cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-
bezier function

The following example shows some of the different speed curves that can be
used:

#div1 {transition-timing-function: linear;}


#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the


transition effect.

The following example has a 1 second delay before starting:

div {
transition-delay: 1s;
}

Transition + Transformation

The following example adds a transition effect to the transformation:

div {
transition: width 2s, height 2s, transform 2s;
}

65
More Transition Examples

The CSS transition properties can be specified one by one, like this:

div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

or by using the shorthand property transition:

div {
transition: width 2s linear 1s;
}

CSS filter
CSS filters are used to set visual effects to text, images, and other aspects of a webpage.
The CSS filter property allows us to access the effects such as color or blur, shifting on
the rendering of an element before the element gets displayed.

The syntax of CSS filter property is given below.

Syntax

1. filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | hue-


rotate() | contrast() | opacity() | grayscale() | sepia() | url();

Let's discuss the property values along with an example.

brightness()
As its name implies, it is used to set the brightness of an element. If the brightness is 0%,
then it represents completely black, whereas 100% brightness represents the original one.
It can also accept values above 100% that provide brighter results.

We can understand it by using the following illustration.

66
Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>CSS filter property</title>
6. <style>
7. body{
8. text-align:center;
9. }
10. #img1 {
11. filter: brightness(130%);
12. }
13. </style>
14. </head>
15. <body>
16. <img src = "tiger.png" > <h2>Original Image </h2>
17. <img src = "tiger.png" id = "img1"> <h2>brightness(130%)</h2>
18. </body>
19.
20. </html>

blur()
It is used to apply the blur effect to the element. If the blur value is not specified, then the
value 0 is used as a default value. The parameter in blur() property does not accept the
percentage values. A larger value of it creates more blur.

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>CSS filter property</title>

67
6. <style>
7. body{
8. text-align:center;
9. }
10. #img1 {
11. filter: blur(2px);
12. }
13. </style>
14. </head>
15. <body>
16. <img src = "tiger.png" > <h2>Original Image </h2>
17. <img src = "tiger.png" id = "img1"> <h2>blur(2px)</h2>
18. </body>
19.
20. </html>

invert()
It is used to invert the samples in the input image. Its 100% value represents completely
inverted, and 0% values leave the unchanged input. Negative values are not allowed in it.

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>CSS filter property</title>
6. <style>
7. body{
8. text-align:center;
9. }
10. #img1 {
11. filter: invert(60);
12. }

68
13. </style>
14. </head>
15. <body>
16. <img src = "tiger.png" > <h2>Original Image </h2>
17. <img src = "tiger.png" id = "img1"> <h2>invert(60)</h2>
18. </body>
19.
20. </html>

saturate()
It sets the saturation of an element. The 0% saturation represents the completely
unsaturated element, whereas the 100% saturation represents the original one. The values
greater than 100% are allowed that provides super-saturated results. We cannot use
negative values with this property.

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>CSS filter property</title>
6. <style>
7. body{
8. text-align:center;
9. }
10. #img1 {
11. filter: saturate(40);
12. }
13. </style>
14. </head>
15. <body>
16. <img src = "tiger.png" > <h2>Original Image </h2>
17. <img src = "tiger.png" id = "img1"> <h2>saturate(40)</h2>
18. </body>

69
19.
20. </html>

drop-shadow()
It applies the drop-shadow effect to the input image. The values it accepts are h-shadow,
v-shadow, blur, spread, and color.

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>CSS filter property</title>
6. <style>
7. body{
8. text-align:center;
9. }
10. #img1 {
11. filter: drop-shadow(10px 20px 30px yellow);
12. }
13. </style>
14. </head>
15. <body>
16. <img src = "tiger.png" > <h2>Original Image </h2>
17. <img src = "tiger.png" id = "img1"> <h2> drop-
shadow(10px 20px 30px yellow);</h2>
18. </body>
19.
20. </html>

contrast()

70
It adjusts the contrast of the input. Its 0% value will create a completely black image,
whereas the 100% values leave the unchanged input, i.e., represents the original one.
Values greater than 100% are allowed that provides results with less contrast.

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>CSS filter property</title>
6. <style>
7. body{
8. text-align:center;
9. }
10. #img1 {
11. filter: contrast(50%);
12. }
13. </style>
14. </head>
15. <body>
16. <img src = "tiger.png" > <h2>Original Image </h2>
17. <img src = "tiger.png" id = "img1"> <h2> contrast(50%)</h2>
18. </body>
19.
20. </html>

opacity()
It is used to apply transparency to the input image. Its 0% value indicates completely
transparent, whereas the 100% value represents the original image, i.e., fully opaque.

Let's understand it by an illustration.

Example

1. <!DOCTYPE html>

71
2. <html>
3.
4. <head>
5. <title>CSS filter property</title>
6. <style>
7. body{
8. text-align:center;
9. }
10. #img1 {
11. filter: opacity(40%);
12. }
13. </style>
14. </head>
15. <body>
16. <img src = "tiger.png" > <h2>Original Image </h2>
17. <img src = "tiger.png" id = "img1"> <h2> opacity(40%)</h2>
18. </body>
19.
20. </html>

72

You might also like