Latest Post:
Loading...

CSS Comments || Colors || CSS Background

byedutechkhem -
4

 CSS Comments

u CSS comments is used to write explanatory remarks in the web page for documenting the web page. It will not displayed in the web browser,

u A CSS comment is placed inside the <style> element. It starts with /* and ends with */:

<style>

/* This is a single-line comment */

/*        This is
                        a multi-line
                        comment */

p {

  color: red;

}

</style>

CSS colors

CSS colors is used to make attractive and eye-catching text/background in HTML. CSS uses different color values for to specify a color. CSS color can be used for foreground and background purposes. 

CSS colors also affect the color of borders and other decorative effects.

CSS Colors - Hex Codes

Video link: 

 CSS video Tutorials.

In CSS, a color can be specified using a hexadecimal value in the form:                        #rrggbb




CSS Colors - RGB Values

In CSS, a color can be specified by the use of RGB value,  It can be used by the given formula:

rgb(red, green, blue)

CSS HSL Colors

In CSS, HSL Value indicates for  hue, saturation, and lightness (HSL).

hsl(hue, saturation, lightness)

Hue specifies the degree on the color wheel ranges from 0 to 360. Here, 0 is red, 120 is green, and 240 is blue.

Saturation specifies percentage value. 0% means a shade of gray, and 100% is the full color.

Lightness is also specifying a percentage. 0% is black, 50% is neither light or dark, 100% is white

CSS Backgrounds

The CSS background properties specifies the background effects for HTML elements.

Different Background styles are as:

CSS background-color

The background-color property is used specifies the background color of an element.\

<!DOCTYPE html>

<html>

<head>

<style>

body {

  background-color: lightblue;

}

</style>

</head>

<body>

<h1>Hello Edutech Khem!</h1>

<p>This page has a light blue background color!</p>

</body>

</html> 


Output of the above program is 


CSS background-image

            The background-image property is used specifies an background image.

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

<!DOCTYPE html>

<html>

<head>

<style>

body {

  background-image: url("flower.jpg");

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>

</html>

OUTPUT:


background-repeat: no-repeat

It is used to show the background image only once. 

<!DOCTYPE html>

<html>

<head>

<style>

body {

  background-image: url("flower.jpg");

  background-repeat: no-repeat;

background-position: right left;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>

</html>

Output:


CSS background - Shorthand property

Shorthand property is used to shorten the code in CSS, it specifies all the background properties in one single property.

<!DOCTYPE html>

<html>

<head>

<style>

body {

  background: url("flower.jpg")

   no-repeat right left;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>

</html>

 


 


4 Comments