Top CSS Properties for Web Design
Day 8 : 60 Days Of Full Stack Web Development Challenge
CSS Background Property:
CSS background property is used to define the background effects on element. There are 5 CSS background properties that affects the HTML elements:
background-color
background-image
background-repeat
background-attachment
background-position
1) CSS background-color
The background-color property is used to specify the background color of the element.
Example :
<style>
h2,p{
background-color: #b0d4de;
}
</style>
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.
Example:
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
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.
Example:
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
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:
center
top
bottom
left
right
Example:
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
CSS Border Property :
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. |
Example:
<!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>
Output:
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.
Example:
<!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>
Output:
3) CSS border-color :
There are three methods to set the color of the border.
Name: It specifies the color name. For example: "red".
RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
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.
Example:
<!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>
Output:
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.
This CSS property includes the properties that are tabulated as follows:
| 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 |
If the bottom-left value is omitted, then it will be same as the top-right. If the value of bottom-right is eliminated, then it will be same as the top-left. Similarly, if top-right is eliminated, then it will be the same as top-left.
Let's see what happens when we provide a single value, two values, three values, and four values to this property.
If we provide a single value (such as border-radius: 30px;) to this property, it will set all corners to the same value.
When we specify two values (such as border-radius: 20% 10% ;), then the first value will be used for the top-left and bottom-right corners, and the second value will be used for the top-right and bottom-left corners.
When we use three values (such as border-radius: 10% 30% 20%;) then the first value will be used for the top-left corner, the second value will be applied on top-right, and bottom-left corners and the third value will be applied to the bottom-right corner.
Similarly, when this property has four values (border-radius: 10% 30% 20% 40%;) then the first value will be the radius of top-left, the second value will be used for the top-right, the third value will be applied on bottom-right, and the fourth value is used for bottom-left.
Example:
<!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;
}
</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>
</body>
</html>
Output:
