background&border.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bg.css">
</head>
<body>
<h1>Akatsuki</h1>
<ul>
<li>Tobi</li>
<li>Sasori</li>
<li>hidan</li>
<li>Kakuzu</li>
<li>Itachi</li>
<li>Pain</li>
<li>kisame</li>
<li>zetsu</li>
<li>Konan</li>
<li>Nagato</li>
<li>Kabuto</li>
<li>Orochimaru</li>
<li>Juzo Biwa</li>
<li>Sasuke Uchiha</li>
</ul>
</body>
</html>
bg.css
h1{
background:rgb(255, 80, 80);
border: 5px solid black;
/* The above code is written in short including the values for the width, style, color of the border accoridingly */
}
body{
background: url(https://wallpapers.com/images/featured/underwater-background-oepaymjqd9zy7i7v.jpg);
/* fetching the image for the cover from a google page */
background-size: cover;
}
ul{
color: aliceblue;
}
Output:
Background Properties
background:- Shorthand property for setting all background properties in one declaration.
background-color:- Sets the background color of an element.
background-image:- Sets the background image of an element.
background-repeat:- Sets how background images are repeated.
- Values:
repeat,repeat-x,repeat-y,no-repeat,space,round.
- Values:
background-attachment:- Sets whether a background image is fixed or scrolls with the rest of the page.
- Values:
scroll,fixed,local.
- Values:
background-position:- Sets the starting position of a background image.
- Values: can be defined in length units (px, em, etc.), percentages, or keywords (
top,right,bottom,left,center).
- Values: can be defined in length units (px, em, etc.), percentages, or keywords (
background-size:- Specifies the size of the background image.
- Values:
auto,cover,contain, length units, percentages.
- Values:
background-clip:- Specifies the painting area of the background.
- Values:
border-box,padding-box,content-box,text.
- Values:
background-origin:- Specifies the positioning area of the background images.
- Values:
border-box,padding-box,content-box.
- Values:
background-blend-mode:- Specifies the blending mode for each background layer.
- Values:
normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity.
- Values:
Border Properties
border:- Shorthand property for setting the border-width, border-style, and border-color.
border-width:- Sets the width of the border.
- Values:
thin,medium,thick, length units.
- Values:
border-style:- Sets the style of the border.
- Values:
none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset.
- Values:
border-color:- Sets the color of the border.
border-top:- Shorthand property for setting the width, style, and color of the top border.
border-right:- Shorthand property for setting the width, style, and color of the right border.
border-bottom:- Shorthand property for setting the width, style, and color of the bottom border.
border-left:- Shorthand property for setting the width, style, and color of the left border.
border-radius:- Sets the radius of the element's corners.
border-top-left-radius:- Sets the border-radius for the top-left corner.
border-top-right-radius:- Sets the border-radius for the top-right corner.
border-bottom-left-radius:- Sets the border-radius for the bottom-left corner.
border-bottom-right-radius:- Sets the border-radius for the bottom-right corner.
border-image:- Shorthand property for setting all the border-image-* properties.
border-image-source:- Specifies the path to the image to be used as a border.
border-image-slice:- Specifies how to slice the border image.
border-image-width:- Specifies the width of the border image.
border-image-outset:- Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat:- Specifies whether the border image should be repeated, rounded, or stretched.
border-collapse:- Specifies whether table borders should collapse into a single border or be separated.
border-spacing:- Specifies the distance between the borders of adjacent cells.
HTML Tags Related to Backgrounds and Borders
<style>: Used to define CSS within the HTML document.<div>: Commonly styled with backgrounds and borders.<span>: Commonly styled with backgrounds and borders.<table>,<th>,<tr>,<td>: Table elements can have borders.<img>: Images can have borders and backgrounds.<header>,<nav>,<section>,<article>,<aside>,<footer>: Semantic HTML5 elements often styled with backgrounds and borders.<form>,<input>,<textarea>,<button>,<select>: Form elements can have borders and backgrounds.
By mastering these properties, you can create rich, visually appealing web pages with sophisticated background and border designs.
No comments:
Post a Comment