Scribd
Upload
36 views9 pages

Color, Margins, Padding & Border Properties

The document discusses various CSS properties related to color, width, height, margins, padding and borders. It provides examples of how to use these properties and defines terms like color, background-color, border-color, width, height, margin, padding, border-style, border-width and border-radius.

Uploaded by

Rajneesh raj
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
36 views9 pages

Color, Margins, Padding & Border Properties

The document discusses various CSS properties related to color, width, height, margins, padding and borders. It provides examples of how to use these properties and defines terms like color, background-color, border-color, width, height, margin, padding, border-style, border-width and border-radius.

Uploaded by

Rajneesh raj
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/ 9

venkatesh.mansani@yahoo.

com Naresh i Technologies

Color, Width, hEiGht, marGin,


paddinG & bordEr propErtiEs
Color Properties:
1) color => It is used to set the text color.
Values can be used as follows:
i) red (or) green (or) blue (or) ......
ii) rgb(255, 0, 0) (or) rgb(0, 255, 0) (or) rgb(........)
iii) #ff0000 (or) #00ff00 (or) #.......
2) background-color => It is used to set the background color.
3) border-color => It is used to set the border color.
Note: border-color attribute requires border-style attribute.

Example:
<html>
<head>
<style>
h1
{
color: #0000ff;
background-color: cyan;
border-style: solid;
border-color: rgb(255,0,0);

Java By Venkatesh Mansani [email protected]


[email protected] Naresh i Technologies

}
</style>
</head>
<body>
<h1>Hyper Text Markup Language</h1>
</body>
</html>

Width & Height Properties:


1) width => It is used to specify the element width.
2) height => It is used to specify the element height.

Margins:
The space between screen & border is called as margin.

Margin Properties:
1) margin-top => It is used to specify the top margin.
2) margin-right => It is used to specify the right margin.
3) margin-bottom => It is used to specify the bottom margin.
4) margin-left => It is used to specify the left margin.
5) margin => It is used to specify margin at all sides.

Padding:
The space between content & border is called as padding.

Java By Venkatesh Mansani [email protected]


[email protected] Naresh i Technologies

Padding Properties:
1) padding-top => It is used to specify the top padding.
2) padding-right => It is used to specify the right padding.
3) padding-bottom => It is used to specify the bottom padding.
4) padding-left => It is used to specify the left padding.
5) padding => It is used to specify the padding at all sides.

Border Properties:
1) border-style => It is used to specify the style of the border.
The following values can be used.
1) solid 2) dashed 3) dotted 4) double 5) none
2) border-width => It is used to specify the border thickness.
3) border-color => It is used to specify the border color.

Example:
<html>
<head>
<style>
body
{
background-color: cyan;
}
div
{

Java By Venkatesh Mansani [email protected]


[email protected] Naresh i Technologies

color: blue;
background-color: yellow;
border-style: dotted;
border-color: red;
width: 430px;
height: 250px;
margin-left: 100px;
margin-top: 100px;
padding-top: 50px;
padding-left: 100px;
padding-right: 100px;
border-width: 15px;
}
</style>
</head>
<body>
<div>
<h1>Hyper Text Markup Language</h1>
<h1>Cascading Style Sheets</h1>
<h1>Java Script</h1>
</div>
</body></html>

Java By Venkatesh Mansani [email protected]


[email protected] Naresh i Technologies

Border Properties:
1) border-style => solid (or) dashed (or) dotted (or) double (or) none
2) border-width => 5px (or) 10px (or) .....
3) border-color => red (or) green (or) blue (or) ......
4) border-radius => It is used to display rounded borders.
5) border-top-style
6) border-right-style
7) border-bottom-style
8) border-left-style
9) border-top-width
10) border-right-width
11) border-bottom-width
12) border-left-width
13) border-top-color
14) border-right-color
15) border-bottom-color
16) border-left-color
17) border-top-left-radius
18) border-top-right-radius
19) border-bottom-left-radius
20) border-bottom-right-radius
21) border-top

Java By Venkatesh Mansani [email protected]


[email protected] Naresh i Technologies

22) border-right
23) border-bottom
24) border-left
25) border

Example:
<html><head><style>
body
{
background-color: yellow;
}
div
{
color: blue;
border-style: solid;
border-color: red;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
width: 250px;
height: 250px;
padding-top: 50px;
padding-left: 50px;
margin-top: 50px;

Java By Venkatesh Mansani [email protected]


[email protected] Naresh i Technologies

margin-left: 50px;
background-color: cyan;
}
</style></head><body>
<div>
<h1>HTML</h1>
<h1>CSS</h1>
<h1>Java Script</h1>
</div>
</body></html>

Image Borders Example:


<html><head><style>
body
{
background-color: cyan;
}
div
{
border-style: double;
border-color: red;
width: 475px;
background-color: yellow;

Java By Venkatesh Mansani [email protected]


[email protected] Naresh i Technologies

border-width: 10px;
}
img
{
width: 150px;
height: 150px;
}
#one
{
border-style: solid;
border-width: 3px;
border-color: red;
border-radius: 100px;
}
#two
{
border-style: dashed;
border-width: 3px;
border-color: green;
border-radius: 40px;
}
#three

Java By Venkatesh Mansani [email protected]


[email protected] Naresh i Technologies

{
border-style: dotted;
border-width: 3px;
border-color: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<div>
<img id="one" src="C:/flowers.jfif">
<img id="two" src="E:/pinkroses.jpeg">
<img id="three" src="E:/roses.jpg">
</div>
</body>
</html>

By

Mr. Venkatesh Mansani


Naresh i Technologies

Java By Venkatesh Mansani [email protected]

You might also like