Scribd
Upload
15 views

CSS Notes-1

CSS, or Cascading Style Sheets, is a style sheet language used to define the presentation of HTML documents. It allows web designers to apply styles to HTML elements, improving the design and layout of web pages while saving time and effort through external style sheets. The document provides an overview of CSS syntax, selectors, methods of adding CSS, and various properties such as background and border styles.

Uploaded by

harshita Ujjinwal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

CSS Notes-1

CSS, or Cascading Style Sheets, is a style sheet language used to define the presentation of HTML documents. It allows web designers to apply styles to HTML elements, improving the design and layout of web pages while saving time and effort through external style sheets. The document provides an overview of CSS syntax, selectors, methods of adding CSS, and various properties such as background and border styles.

Uploaded by

harshita Ujjinwal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 69

CSS

 CSS stands for Cascading Style Sheet.


 CSS is used to design HTML tags.
 CSS is a widely used language on the web.
 HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply
style on HTML tags.

CSS Example with CSS Editor


In this tutorial, you will get a lot of CSS examples, you can edit and run these examples with our
online CSS editor tool.

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

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.
What does CSS do
 You can add new looks to your old HTML documents.
 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.

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.

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.

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue; }
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body> </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.

Lets take an example with the id "para1".

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</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".

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.

<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</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.

h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p{
text-align: center;
color: blue;
}

As you can see, you need to define CSS properties for all the elements. It can be grouped in
following ways:
h1,h2,p {
text-align: center;
color: blue;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>

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:

<style>
p{color:blue}
</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">

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.

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>

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:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
</body>
</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:

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

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.

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 /*............*/ .

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>This statement is styled with CSS.</p>
<p>CSS comments are ignored by the browsers and not shown in the output.</p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello Javatpoint. This is an example of CSS background-color.</p>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</html>

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;

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</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
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 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

 border-style
 border-color
 border-width
 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.

There are some border style values which are used with border-style property to define a border.

Value Description
none It doesn't define any border.
dotted It is used to define a dotted border.
dashed It is used to define a dashed border.
solid It is used to define a solid border.
double It defines two borders wIth the same border-width value.
groove It defines a 3d grooved border. effect is generated according to border-color value.
ridge It defines a 3d ridged border. effect is generated according to border-color value.
inset It defines a 3d inset border. effect is generated according to border-color value.
outset It defines a 3d outset border. effect is generated according to border-color value.
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</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.

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
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>

3) CSS border-color
There are three methods to set the color of the border.

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p.one {
 border-style: solid;
 border-color: red;
 }
 p.two {
 border-style: solid;
 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>

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.

<!DOCTYPE html>
<html>

<head>
<title> CSS border-radius </title>
<style>
div {
padding: 50px;
margin: 20px;
border: 6px ridge red;
width: 300px;
float: left;
height: 150px;
}
p{
font-size: 25px;
}
#one {
border-radius: 90px;
background: lightgreen;
}
#two {
border-radius: 25% 10%;
background: orange;
}
#three {
border-radius: 35px 10em 10%;
background: cyan;
}
#four {
border-radius: 50px 50% 50cm 50em;
background: lightblue;
}

</style>
</head>

<body>
<div id = "one">
<h2> Welcome to the javaTpoint.com </h2>
<p> border-radius: 90px; </p>
</div>
<div id = "two">
<h2> Welcome to the javaTpoint.com </h2>
<p> border-radius: 25% 10%; </p>
</div>
<div id = "three">
<h2> Welcome to the javaTpoint.com </h2>
<p> border-radius: 35px 10em 10%; </p>
</div>
<div id = "four">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-radius: 50px 50% 50cm 50em;</p>
</div>
</body>
</html>
border-top-left-radius

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

<!DOCTYPE html>
<html>

<head>
<title> CSS border-radius </title>
<style>
#left {
border-top-left-radius: 250px;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>

<body>
<center>
<div id = "left">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-top-left-radius: 250px;</p>
</div>
</center>
</body>
</html>
border-top-right-radius

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

 <!DOCTYPE html>

{
-top-right-radius: 50%;
lightgreen;
50px;
6px ridge red;
300px;
200px;
-size: 25px;

/style>

id = "left">
to the javaTpoint.com</h2>
-top-right-radius: 50%;</p>

border-bottom-right-radius

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

<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-bottom-right-radius: 50%;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>

<body>
<center>
<div id = "left">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-bottom-right-radius: 50%;</p>
</div>
</center>
</body>
</html>
border-bottom-left-radius

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

<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-bottom-left-radius: 50%;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>

<body>
<center>
<div id = "left">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-bottom-left-radius: 50%;</p>
</div>
</center>
</body>
</html>
CSS border-collapse property
This CSS property is used to set the border of the table cells and specifies whether the table cells
share the separate or common border.

This property has two main values that are separate and collapse. When it is set to the value
separate, the distance between the cells can be defined using the border-spacing property. When
the border-collapse is set to the value collapse, then the inset value of border-style property
behaves like groove, and the outset value behaves like ridge.

Using collapse property

The border-spacing and border-radius properties cannot be used with this value.

<!DOCTYPE html>
<html>

<head>
<title> border-collapse property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#t1{
border-collapse: collapse;
}
</style>
</head>

<body>

<h1> The border-collapse Property </h1>


<h2> border-collapse: collapse; </h2>
<table id = "t1">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> James </td>
<td> Gosling </td>
<td> Maths </td>
<td> 92 </td>
</tr>
<tr>
<td> Alan </td>
<td> Rickman </td>
<td> Maths </td>
<td> 89 </td>
</tr>
<tr>
<td> Sam </td>
<td> Mendes </td>
<td> Maths </td>
<td> 82 </td>
</tr>
</table>
</body>
</html>

CSS border-spacing property


This CSS property is used to set the distance between the borders of the adjacent cells in the table. It
applies only when the border-collapse property is set to separate. There will not be any space
between the borders if the border-collapse is set to collapse.

It can be defined as one or two values for determining the vertical and horizontal spacing.

 When only one value is specified, then it sets both horizontal and vertical spacing.
 When we use the two-value syntax, then the first one is used to set the horizontal spacing (i.e., the
space between the adjacent columns), and the second value sets the vertical spacing (i.e., the
space between the adjacent rows).

<!DOCTYPE html>
<html>

<head>
<title> border-spacing property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#space{
border-collapse: separate;
border-spacing: 45px;
}
</style>
</head>

<body>

<h1> The border-spacing Property </h1>


<h2> border-spacing: 45px; </h2>
<table id = "space">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> James </td>
<td> Gosling </td>
<td> Maths </td>
<td> 92 </td>
</tr>
<tr>
<td> Alan </td>
<td> Rickman </td>
<td> Maths </td>
<td> 89 </td>
</tr>
<tr>
<td> Sam </td>
<td> Mendes </td>
<td> Maths </td>
<td> 82 </td>
</tr>
</table>
</body>

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

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


default value inline
Inherited no
animation supporting no
Version css1
javascript syntax object.style.display="none"

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:

<span>
<a>
<em>
<b> etc.
Let's see an example of CSS display inline.

<!DOCTYPE html>
<html>
<head>
<style>
p{
display: inline;
}
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
<style>
p{
display: inline-block;
}
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</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.

<!DOCTYPE html>
<html>
<head>
<style>
p{
display: block;
}
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>

4) CSS display run-in


This property doesn't work in Mozilla Firefox. These elements don't produce a specific box by
themselves.

 If the run-in box contains a bock box, it will be same as block.


 If the block box follows the run-in box, the run-in box becomes the first inline box of the block box.
 If the inline box follows the run-in box, the run-in box becomes a block box.

<!DOCTYPE html>
<html>
<head>
<style>
p{
display: run-in;
}
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>
5) CSS display none
The "none" value totally removes the element from the page. It will not take any space.

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This heading is visible.</h1>
<h1 class="hidden">This is not visible.</h1>
<p>You can see that the hidden heading does not contain any space.</p>
</body>
</html>

CSS Cursor
It is used to define the type of mouse cursor when the mouse pointer is on the element. It allows us
to specify the cursor type, which will be displayed to the user. When a user hovers on the link, then
by default, the cursor transforms into the hand from a pointer.

Let's understand the property values of the cursor.

Values Usage
Alias It is used to display the indication of the cursor of something that is to be created.
Auto It is the default property in which the browser sets the cursor.
all-scroll It indicates the scrolling.
col-resize Using it, the cursor will represent that the column can be horizontally resized.
Cell The cursor will represent that a cell or the collection of cells is selected.
context- It indicates the availability of the context menu.
menu
default It indicates an arrow, which is the default cursor.
Copy It is used to indicate that something is copied.
crosshair In it, the cursor changes to the crosshair or the plus sign.
e-resize It represents the east direction and indicates that the edge of the box is to be shifted
towards right.
ew-resize It represents the east/west direction and indicates a bidirectional resize cursor.
n-resize It represents the north direction that indicates that the edge of the box is to be shifted to
up.
ne-resize It represents the north/east direction and indicates that the edge of the box is to be shifted
towards up and right.
Move It indicates that something is to be shifted.
Help It is in the form of a question mark or ballon, which represents that help is available.
None It is used to indicate that no cursor is rendered for the element.
No-drop It is used to represent that the dragged item cannot be dropped here.
s-resize It indicates an edge box is to be moved down. It indicates the south direction.
Row-resize It is used to indicate that the row can be vertically resized.
Se-resize It represents the south/east direction, which indicates that an edge box is to be moved
down and right.
Sw-resize It represents south/west direction and indicates that an edge of the box is to be shifted
towards down and left.
Wait It represents an hourglass.
<url> It indicates the source of the cursor image file.
w-resize It indicates the west direction and represents that the edge of the box is to be shifted left.
Zoom-in It is used to indicate that something can be zoomed in.
Zoom-out It is used to indicate that something can be zoomed out.

The illustration of using the above values of cursor property is given below:

 <html>
<head>
</head>
<style>
body{
background-color: lightblue;
color:green;
text-align: center;
font-size: 20px;
}

</style>

<body>
<p>Move your mouse over the below words for the cursor change.</p>
<div style = "cursor:alias">alias Value</div>
<div style = "cursor:auto">auto Value</div>
<div style = "cursor:all-scroll">all-scroll value</div>
<div style = "cursor:col-resize">col-resize value</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default value</div>
<div style = "cursor:copy">copy value</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ew-resize">ew-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
<div style = "cursor:progress">Progress</div>
<div style = "cursor:no-drop">no-drop</div>
<div style = "cursor:not-allowed">not-allowed</div>
<div style = "cursor:vertical-text">vertical-text</div>
<div style = "cursor:zoom-in">Zoom-in</div>
<div style = "cursor:zoom-out">Zoom-out</div>
</body>

CSS Buttons
In HTML, we use the button tag to create a button, but by using CSS properties, we can style the
buttons. Buttons help us to create user interaction and event processing. They are one of the widely
used elements of web pages.

During the form submission, to view or to get some information, we generally use buttons.

Let's see the basic styling in buttons.

Basic styling in Buttons


There are multiple properties available that are used to style the button element. Let's discuss them
one by one.

background-color
As we have discussed earlier, this property is used for setting the background color of the button
element.

Syntax

1. element {
2. // background-color style
3. }

Example

<!DOCTYPE html>
<html>

<head>
<title>
button background Color
</title>

<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
}
.b2 {
background-color: blue;
}
.b3 {
background-color: violet;
}
</style>
</head>

<body>
<h1>The background-color property.</h1>
<button class="b1">Red color button</button>
<button class="b2">Blue color button</button>
<button class="b3">Violet color button</button>
</body>
</html>

border
It is used to set the border of the button. It is the shorthand property for border-width, border-
color, and border-style.

Syntax

1. element {
2. // border style
3. }

Example

<!DOCTYPE html>
<html>

<head>
<title>
button background Color
</title>

<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border:none;
}
.b2 {
background-color: blue;
border:5px brown solid;
}
.b3 {
background-color: yellow;
color:black;
border:5px red groove;
}
.b4{
background-color:orange;
border: 5px red dashed;
}
.b5{
background-color: gray;
border: 5px black dotted;
}
.b6{
background-color: lightblue;
border:5px blue double;
}
</style>
</head>

<body>
<h1>The border property</h1>
<button class="b1">none</button>
<button class="b2">solid</button>
<button class="b3">groove</button>
<button class="b4">dashed</button>
<button class="b5">dotted</button>
<button class="b6">double</button>

</body>
</html>

border-radius
It is used to make the rounded corners of the button. It sets the border radius of the button.

<!DOCTYPE html>
<html>

<head>
<title>
button background Color
</title>

<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border:none;
}
.b2 {
background-color: blue;
border:5px brown solid;
border-radius: 7px;
}
.b3 {
background-color: yellow;
color:black;
border:5px red groove;
border-radius: 10px;
}
.b4{
background-color:orange;
border: 5px red dashed;
border-radius: 20px;
}
.b5{
background-color: gray;
border: 5px black dotted;
border-radius: 30px;
}
.b6{
background-color: lightblue;
border:5px blue double;
border-radius: 25px;
}
</style>
</head>

<body>
<h1>The border-radius property</h1>
<h2>Below there is the border name and border-radius</h2>
<button class="b1">none</button>
<button class="b2">solid 7px</button>
<button class="b3">groove 10px</button>
<button class="b4">dashed 20px</button>
<button class="b5">dotted 30px</button>
<button class="b6">double 25px</button>

</body>
</html>

box-shadow
As its name implies, it is used to create the shadow of the button box. It is used to add the shadow to
the button. We can also create a shadow during the hover on the button.

Syntax

1. box-shadow: [horizontal offset] [vertical offset] [blur radius]


2. [optional spread radius] [color];

Example

<!DOCTYPE html>
<html>

<head>
<title>
button background Color
</title>

<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1{
background-color: lightblue;
border:5px red double;
border-radius: 25px;
color:black;
box-shadow : 0 8px 16px 0 black,
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.b2{
background-color: lightblue;
border:5px red dotted;
color:black;
border-radius: 25px;
}
.b2:hover{
box-shadow : 0 8px 16px 0 black,
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>

<body>
<button class="b1">Shadow on button</button>
<button class="b2">Box-shadow on hover</button>
</body>
</html>

padding
It is used to set the button padding.

<!DOCTYPE html>
<html>

<head>
<title>
button background Color
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border:none;
padding: 16px;
}
.b2 {
background-color: blue;
border:5px brown solid;
padding:15px 30px 25px 40px;
}
.b3 {
background-color: yellow;
color:black;
border:5px red groove;
padding-top:30px;
}
.b4{
background-color:orange;
border: 5px red dashed;
padding-bottom:40px;
}
.b5{
background-color: gray;
border: 5px black dotted;
padding-left: 40px;
}
.b6{
background-color: lightblue;
border:5px blue double;
padding-right: 40px;;
}
</style>
</head>

<body>
<h1>The padding property</h1>
<button class="b1">none</button>
<button class="b2">solid</button>
<button class="b3">groove</button>
<button class="b4">dashed</button>
<button class="b5">dotted</button>
<button class="b6">double</button>

</body>
</html>

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.

CSS Float Property Example


Let's see a simple example to understand the CSS float property.

<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<img src="good-morning.jpg" alt="Good Morning Friends"/>
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. 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. 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.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

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.

here are three different formats to define a color:

 By a color name
 By hexadecimal value
 By RGB

In the above example, we have defined all these formats.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>

2) CSS Font Family


CSS font family can be divided in two types:

 Generic family: It includes Serif, Sans-serif, and Monospace.


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

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>

3) CSS Font Size


CSS font size property is used to change the size of the font.

These are the possible values that can be used to set the font size:

Font Size Value Description

xx-small used to display the extremely small text size.

x-small used to display the extra small text size.

Small used to display small text size.

Medium used to display medium text size.

Large used to display large text size.

x-large used to display extra large text size.

xx-large used to display extremely large text size.

Smaller used to display comparatively smaller text size.

Larger used to display comparatively larger text size.

size in pixels or % used to set value in percentage or in pixels.

<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>

4) CSS Font Style


CSS Font style property defines what type of font you want to display. It may be italic, oblique, or
normal.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>

5) CSS Font Variant


CSS font variant property specifies how to set font variant of an element. It may be normal and
small-caps.

 !DOCTYPE html>

{ font-variant: small-caps; }
{ font-variant: normal; }

heading is shown in normal font.</h3>


paragraph is shown in small font.</p>

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

<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>

CSS Font-size
The font-size property in CSS is used to specify the height and size of the font. It affects the size of
the text of an element. Its default value is medium and can be applied to every element. The values
of this property include xx-small, small, x-small, etc.

Font-size with pixels


When we set the size of text with pixels, then it provides us the full control over the size of the text.

Example
<!DOCTYPE html>
<html>
<head>
<style>

#first {
font-size: 40px;
}
#second {
font-size: 20px;
}
</style>
</head>
<body>

<p id="first">This is a paragraph having size 40px.</p>


<p id="second">This is another paragraph having size 20px.</p>

</body>
</html>

Font-size with em
It is used to resize the text. Most of the developers prefer em instead of pixels. It is recommended
by the world wide web consortium (W3C). As stated above, the default text size in browsers is
16px. So, we can say that the default size of 1em is 16px.

The formula for calculating the size from pixels to em is em = pixels/16.

Example
<!DOCTYPE html>
<html>
<head>
<style>
#first {
font-size: 2.5em; /* 40px/16=2.5em */
}

#second {
font-size: 1.875em; /* 30px/116=1.875em */
}

#third {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>

<p id='first'>First paragraph.</p>


<p id='second'>Second paragraph</p>
<p id='third'>Third Paragraph.</p>
</body>
</html>

Responsive font size


We can set the size of the text by using a vw unit, which stands for the 'viewport width'. The
viewport is the size of the browser window.

1vw = 1% of viewport width.

If the width of the viewport is 50cm, then the 1vw is equal to 0.5 cm.

Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<p style="font-size:5vw;">First paragraph having the width of 5vw.</p>


<p style="font-size:10vw;">Second paragraph having the width of 10vw.</p>

</body>
</html>

CSS font-family
This CSS property is used to provide a comma-separated list of font families. It sets the font-face
for the text content of an element. This property can hold multiple font names as a fallback system,
i.e., if one font is unsupported in the browser, then others can be used. The different font-family is
used for making attractive web pages.

There are two types of font-family names in CSS, which are defined below:

 family-name: It is the name of the font-family such as "Courier", "Arial", "Times", etc.
 generic-family: It is the name of the generic family that includes five categories, which are "serif",
"sans-serif", "cursive", "fantasy", and "monospace". It should be placed at last in the list of the font
family names.

Let's define the generic-family categories.

serif: It is mainly used when we are writing the text for printing, such as books, magazines,
newspapers, etc. It includes the font-family such as Georgia, Garamond, Times New Roman,
Minion, and many more.

xample

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
h1.a {
font-family: "Times New Roman", Times, serif;
color:Red;
}

h2.b {
font-family: Arial, Helvetica, sans-serif;
color:blue;
}
</style>
</head>
<body>
<h1>The font-family Property</h1>

<h1 class="a">Hello World :) :)</h1>

<h2 class="b">Welcome to the javaTpoint.com</h2>

</body>
</html>

CSS font-weight
This property is used for setting the thickness and boldness of the font. It is used to define the
weight of the text. The available weight depends on the font-family, which is used by the browser.

Syntax

1. font-weight: normal | lighter | bolder | bold | number | inherit |initial | unset;

ighter: It considers the existing font-weight of the font-family and makes the font-weight lighter
compare to the parent element.

bolder: It considers the existing font-weight of the font-family and makes the font-weight heavier
compare to the parent element.

bold: As its name implies, it is used to define the bold font-weight, and its numeric value is 700.

number: It is used to set the font-weight based on the specified number. Its range can be between 1
to 1000.

initial: It is used to set the font-weight to its default value.

Let's see an example of this property.

Example

<!DOCTYPE html>

<html>
<head>
<title> font-weight property </title>

<style>
body{
font-family: sans-serif;
}
p.one{
font-weight: normal;
}
p.two{
font-weight: lighter;
}

p.three{
font-weight: bolder;
}

p.four{
font-weight: bold;
}

p.five{
font-weight: 1000;
}

p.six{
font-weight: initial;
}
p.seven{
font-weight: inherit;
}
p.eight{
font-weight: unset;
}

</style>
</head>

<body>
<p class="one">
normal property value
</p>

<p class="two">
lighter property value
</p>

<p class="three">
bolder property value
</p>
<p class="four">
bold property value
</p>
<p class="five">
number property value
</p>

<p class="six">
initial property value
</p>
<p class="seven">
inherit property value
</p>
<p class="eight">
unset property value
</p>
</body>
</html>

CSS Colors
The color property in CSS is used to set the color of HTML elements. Typically, this property is
used to set the background color or the font color of an element.

In CSS, we use color values for specifying the color. We can also use this property for the border-
color and other decorative effects.

We can define the color of an element by using the following ways:

 RGB format.
 RGBA format.
 Hexadecimal notation.
 HSL.
 HSLA.
 Built-in color.

Let's understand the syntax and description of the above ways in detail.

Let's see the list of built-in colors along with their decimal and hexadecimal values.

S.no. Color name Hexadecimal Value Decimal Value or rgb() value

1. Red #FF0000 rgb(255,0,0)

2. Orange #FFA500 rgb(255,165,0)

3. Yellow #FFFF00 rgb(255,255,0)

4. Pink #FFC0CB rgb(255,192,203)


5. Green #008000 rgb(0,128,0)

6. Violet #EE82EE rgb(238,130,238)

7. Blue #0000FF rgb(0,0,255)

8. Aqua #00FFFF rgb(0,255,255)

9. Brown #A52A2A rgb(165,42,42)

10. White #FFFFFF rgb(255,255,255)

11. Gray #808080 rgb(128,128,128)

12. Black #000000 rgb(0,0,0)

The illustration of CSS colors, which includes the above properties, is given below.

Example
<html>
<head>
<title>CSS hsl color property</title>
<style>
h1{
text-align:center;
}
#rgb{
color:rgb(255,0,0);
}
#rgba{
color:rgba(255,0,0,0.5);
}
#hex{
color:#EE82EE;
}
#short{
color: #E8E;
}
#hsl{
color:hsl(0,50%,50%);
}
#hsla{
color:hsla(0,50%,50%,0.5);
}
#built{
color:green;
}
</style>
</head>
<body>
<h1 id="rgb">
Hello World. This is RGB format.
</h1>
<h1 id="rgba">
Hello World. This is RGBA format.
</h1>
<h1 id="hex">
Hello World. This is Hexadecimal format.
</h1>
<h1 id="short">
Hello World. This is Short-hexadecimal format.
</h1>
<h1 id="hsl">
Hello World. This is HSL format.
</h1>
<h1 id="hsla">
Hello World. This is HSLA format.
</h1>
<h1 id="built">
Hello World. This is Built-in color format.
</h1>
</body>
</html>

CSS hover
The :hover selector is for selecting the elements when we move the mouse on them. It is not only
limited to the links. We can use it on almost every HTML element. To style the link to unvisited
pages, we can use the :link selector. To style the link for visited pages, we can use the :visited
selector and to style the active links we can use the :active selector.

It is introduced in CSS1. The hover can be used to highlight the web pages as per the preference of
users in an effective web-designing program.

Changing the link color on hover by using CSS

Let's see how the color of the link gets changed when we place the cursor on it. It will create a
stylish effect, and its implementation is easy when we are using CSS.

<html>
<head>

<style>
body{
text-align:center;
}
a
{
color: red;
}
a:hover
{
color: green;
}
a:active
{
color: cyan;
}
</style>
</head>
<body>
<h1>Move your mouse on the below link to see the hover effect.</h1>
<a class = "link" href = https://www.javatpoint.com/css-grid>CSS Grid</a>
</body>
</html>
Apply hover on paragraph, heading and link
<html>
<head>
<style>
body{
text-align:center;
}
p:hover, h1:hover, a:hover{
background-color: yellow;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to the javaTpoint.</p>
<a href='https://www.javatpoint.com/css-grid'>CSS Grid</a>
</body>
</html>

Example 3- Text overlay on image hover

This CSS code displays the text on the image during mouse hover. Let's see the image overlay
effect during mouse hover.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
text-align:center;
}
* {box-sizing: border-box;}

.container {
position: relative;
width: 50%;
max-width: 300px;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
width: 100%;
opacity:0;
transition: .9s ease;
font-size: 25px;
padding: 20px;
}

.container:hover .overlay {
opacity: 1.5;
}
</style>
</head>
<body>

<h1>Image Overlay Title Effect</h1>


<h2>Move your mouse over the image to see the effect.</h2>

<center>
<div class="container">
<img src="jtp.png" class="image">
<div class="overlay">Welcome to javaTpoint.com</div>
</div> </center>

</body>
</html>

CSS Background-color
This property is used to set the background color of an element. The background of an element
covers the total size, including the padding and border and excluding margin. It can be applied to all
HTML elements.

Example
<!DOCTYPE html>
<html>
<head>
<title>background-color property</title>
<style>
body {
text-align:center;
background-color: lightblue;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1>Hello World.</h1>
<h1>Welcome to the javaTpoint.com</h1>
</body>
</html>

CSS background-attachment property


The background-attachment property is used to specify that the background image is fixed or scroll
with the rest of the page in the browser window.

This property has three values scroll, fixed, and local. Its default value is scroll, which causes the
element to not scroll with its content. The local value of this property causes the element to scroll
with the content. If we set the value to fixed, the background image will not move during scrolling
in the browser.

This CSS property can support multiple background images. We can specify a different value of the
background-attachment property for each background-image, separated by commas. Every image
will match with the corresponding value of this property.

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: scroll;
}

</style>
</head>

<body>
<h1> background-attachment: scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </
p>
<div id="example">
<p>
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
related technologies easily. The javaTpoint.com is always providing an easy and in-
depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But
we can try to be better.
</p>
</div>

</body>
</html>
Using fixed value

In this example, we are using the fixed value of the background-attachment property. This value
fixed the background image, and the image will not move even the rest of the document scrolls.

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: fixed;
}

</style>
</head>

<body>
<h1> background-attachment: fixed;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </
p>
<div id="example">
<p>
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
related technologies easily. The javaTpoint.com is always providing an easy and in-
depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But
we can try to be better.
</p>
</div>

</body>
</html>
Using local value

In this example, we are using the local value of the background-attachment property. Here, the
background-image will scroll with the scrolling of the element's content.

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: local;
}

</style>
</head>

<body>
<h1> background-attachment: local;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </
p>
<div id="example">
<p>
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
related technologies easily. The javaTpoint.com is always providing an easy and in-
depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But
we can try to be better.
</p>
</div>

</body>
</html>

CSS background-size property


The background-size CSS property is used to set the size of a background image of an element.
The background image can be stretched or constrained to fit into the existing space. It allows us to
control the scaling of the background image.

This property can be defined using length, percentage, or keyword values. It has two possible
keyword values that are contain and cover. Its single-value syntax defines the width of the image
(in this case, the height sets to auto), whereas the double values define the value of both height and
width in which the first value sets the width and second sets the height.

Example

In this example, there are three div elements with a width of 300px and a height of 200px. Every
div element has a background-image on which we are applying the background-size property.

Here we are using the length and percentage values to set the background-size of div element. The
background-size of first div element set to auto, second div element is set to 150px 150px, and the
background-size of third div element is set to 30%.
<!DOCTYPE html>
<html>
<head>
<title>
background-size property
</title>
<style>
div {
width: 300px;
height: 200px;
border: 2px solid red;
}
#div1{
background-image: url('lion.png');
background-size: auto;
}
#div2{
background-image: url('lion.png');
background-size: 150px 150px;
}
#div3{
background-image: url('lion.png');
background-size: 30%;
}
</style>
</head>

<body>
<h2> background-size: auto; </h2>
<div id = "div1"></div>
<h2> background-size: 150px 150px; </h2>
<div id = "div2"></div>
<h2> background-size: 30%; </h2>
<div id = "div3"></div>
</body>
</html>
Example - Combining multiple images

We can also combine the values of this property and can apply them to multiple images. It can be
done by comma-separated syntax.

In this example, there are three div elements, each having two background-images. Now, we are
applying the background-size property on both images.

<!DOCTYPE html>
<html>
<head>
<title>
background-size property
</title>
<style>
div {
width: 250px;
height: 250px;
border: 2px solid red;
background-repeat: no-repeat;
background-position: center;
}
#div1{
background-image: url('lion.png'), url('forest.jpg');
background-size: 300px 150px, cover;
}
#div2{
background-image: url('lion.png'), url('forest.jpg');
background-size: 200px 150px, 300px 200px;
}
#div3{
background-image: url('lion.png'), url('forest.jpg');
background-size: 150px 175px, contain;
}
</style>
</head>

<body>
<h2> background-size: 300px 150px, cover; </h2>
<div id = "div1"></div>
<h2> background-size: 200px 150px, 300px 200px; </h2>
<div id = "div2"></div>
<h2> background-size: 150px 175px, contain; </h2>
<div id = "div3"></div>

</body>
</html>

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


<!DOCTYPE html>
<html>
<head>
<style>
h3.small {
line-height: 70%;
}
h3.big {
line-height: 200%;
}
</style>
</head>
<body>
<h3>
This is a heading with a standard line-height.<br>
This is a heading with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</h3>
<h3 class="small">
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
</h3>
<h3 class="big">
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
</h3>
</body>
</html>

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.

CSS margin Example


You can define different margin for different sides for an element.

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>

CSS margin Example


You can define different margin for different sides for an element.

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>

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;


top margin value is 50px

right margin value is 100px

bottom margin value is 150px

left margin value is 200px

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: pink;
}
p.ex {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>

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

 <!DOCTYPE html>
<html>

{
background-color: pink;

{
margin: 50px 100px 150px;

paragraph is not displayed with specified margin. </p>


p class="ex">This paragraph is displayed with specified margin.</p>

3) margin: 50px 100px;


It identifies that:

top and bottom margin values are 50px

left and right margin values are 100px

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: pink;
}
p.ex {
margin: 50px 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>

4) margin: 50px;
It identifies that:

top right bottom and left margin values are 50px

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: pink;
}
p.ex {
margin: 50px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
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.

 <!DOCTYPE html>

{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */

Image</p>
src="rose.jpg" alt="normal rose">
Image</p>
class="trans" src="rose.jpg" alt="transparent rose">

SS 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();

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.

Example

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: brightness(130%);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>brightness(130%)</h2>
</body>

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

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: blur(2px);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>blur(2px)</h2>
</body>

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

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: invert(60);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>invert(60)</h2>
</body>

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

xample

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: saturate(40);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>saturate(40)</h2>
</body>

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

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: drop-shadow(10px 20px 30px yellow);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> drop-shadow(10px 20px 30px yellow);</h2>
</body>

</html>

contrast()
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.

 <!DOCTYPE html>

<title>CSS filter property</title>


<style>
body{
text-align:center;
}
#img1 {
filter: contrast(50%);
}
</style>

<img src = "tiger.png" > <h2>Original Image </h2>


<img src = "tiger.png" id = "img1"> <h2> contrast(50%)</h2>

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

 <!DOCTYPE html>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: opacity(40%);
}
</style>

<img src = "tiger.png" > <h2>Original Image </h2>


<img src = "tiger.png" id = "img1"> <h2> opacity(40%)</h2>

hue-rotate()
It applies a hue-rotation on the input image. Its perimeter value defines the number of degrees
around the color circle; the image will be adjusted. Its default value is 0 degree, which represents
the original image. Its maximum value is 360 degrees.

Example

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: hue-rotate(240deg);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> hue-rotate(240deg)</h2>
</body>
</html>

sepia()
It is used to transform the image into a sepia image. 0% value represents the original image,
whereas the 100% value indicates the completely sepia.

Example

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: sepia(90%);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> sepia(90%)</h2>
</body>

</html>

CSS Images
Images are an important part of any web application. Including a lot of images in a web application
is generally not recommended, but it is important to use the images wherever they required. CSS
helps us to control the display of images in web applications.

The styling of an image in CSS is similar to the styling of an element by using the borders and
margins. There are multiple CSS properties such as border property, height property, width
property, etc. that helps us to style an image.

Let's discuss the styling of images in CSS by using some illustrations.

Thumbnail Image
Example

<!DOCTYPE html>
<html>
<head>
<style>
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
}
h2{
color:red;
}
</style>
</head>

<body>
<h1>Thumbnail Image</h1>
<img src="jtp.png"></img>
<h2>Welcome to javaTpoint</h2>
</body>
</html>

Transparent image
To make an image transparent, we have to use the opacity property. The value of this property lies
between 0.0 to 1.0, respectively.

Example

<!DOCTYPE html>
<html>
<head>
<style>
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
opacity:0.3;
}
h2{
color:red;
}
</style>
</head>

<body>
<h1>Transparent Image</h1>
<img src="jtp.png"></img>
<h2>Welcome to javaTpoint</h2>
</body>
</html>

Rounded image
The border-radius property sets the radius of the bordered image. It is used to create the rounded
images. The possible values for the rounded corners are given as follows:

 border-radius: It sets all of the four border-radius property.


 border-top-right-radius: It sets the border of the top-right corner.
 border-top-left-radius: It sets the border of the top-left corner.
 border-bottom-right-radius: It sets the border of the bottom-right corner.
 border-bottom-left-radius: It sets the border of the bottom-left corner.

Example

<!DOCTYPE html>
<html>
<head>
<style>
#img1{
border: 2px solid green;
border-radius:10px;
padding:5px;
}
#img2{
border: 2px solid green;
border-radius:50%;
padding:5px;
}

h2{
color:red;
}
</style>
</head>

<body>
<h1>Rounded Image</h1>
<img src="jtp.png" id="img1"></img>
<h2>Welcome to javaTpoint</h2>

<h1>Circle Image</h1>
<img src="jtp.png" id="img2"></img>
<h2>Welcome to javaTpoint</h2>
</body>
</html>
Responsive Image
It automatically adjusts to fit on the screen size. It is used to adjust the image to the specified box
automatically.

Example

<!DOCTYPE html>
<html>
<head>
<style>
#img1{
max-width:100%;
height:auto;
}
h2{
color:red;
}
</style>
</head>

<body>
<h1>Responsive image</h1>
<h2>You can resize the browser to see the effect</h2>
<img src="jtp.png" id="img1" width="1000" height="300"></img>
<h2>Welcome to javaTpoint</h2>
</body>
</html>

Center an Image
We can center an image by using the left-margin and right-margin property. We have to set these
properties to auto in order to make a block element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
#img1{
margin-left:auto;
margin-right:auto;
display:block;
}
h1,h2{
text-align:center;
}
</style>
</head>

<body>
<h1>Center image</h1>
<img src="jtp.png" id="img1"></img>
<h2>Welcome to javaTpoint</h2>
</body>
</html>

You might also like