Borders & Backgrounds

CSS Borders:

The CSS border properties allow you to specify a border of HTML element.

border-width: This css property is used to set the width of border, we can set the size in px, pt, em, cm, inch etc.

border-style: This property specifies what kind of border to display. We can use these values to set border style dotted, dashed, solid, double etc.

border-color: This property is used to set the color of the four borders. We can set color by using name, HEX, RGB etc.

border-width:5px;
border-style: solid;
border-color: red;
                

or

border:5px solid red;
                

Note: Both ways can be used to define the border of a HTML element.

border-radius: This property is used to add rounded borders to an element.

p {
border: 5px solid green;
border-radius: 5px;
    }
                

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

These are the properties to set background in css:

background-color: This property specifies the background color of an element.

div {
background-color: lightblue;
    }
                

background-image: The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

 p {
background-image: url(“image_url");
    }
                

background-repeat: By default, the background-image property repeats an image both horizontally and vertically.

To repeat an image horizontally and vertically, use this css properties

background-repeat: repeat-x;
background-repeat: repeat-y;
                

Showing the background image only once is also specified by the background-repeat property.

background-repeat: no-repeat;
                

background-position: This property is used to specify the position of the background image.

body {
background-image: url(“image_Url");
background-repeat: no-repeat;
background-position: left top;
    }
                

background-attachment: This property specifies whether the background image should scroll or be fixed.

background-attachment: fixed;
background-attachment: scroll;
                

body {
background-image: url(" image_Url ");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
    }
                

Styling <a> tag

The <a> tag with its ‘href’ attributes is used to create a hyperlink, which is used for navigate to other web page or web resources.

We can style a link or <a> anchor tag, by using many css property. (e.g. color, font-family, background, etc).

Example:

a {
    color: hotpink;
    }
                

HTML links have many different states, we can style a link based on their states.

Example:

/*Normal Link */
a {
    color: blue;
    }
/* Hover */
a:hover {
    color: pink;
    font-size: 20px;
        }
/* Active */
a:active {
     background: purple;
    }
/*Focus*/
a:focus {
    background:yellow;
    }
/* Visited*/
a:visited {
     color: green;
    }