CSS Tutorial || CSS Properties || Colors & Background

author
January 27, 2024
CSS Properties



A Property is a type of attribute of HTML element. It could be color, border etc.


1.CSS Colors

The color property in CSS is used to set the color of HTML elements. Typically, this property is used to set the background color or the font color of an element.

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values


  • RGB short form of 'RED GREEN and BLUE'

           Syntax: color: rgb(R, G, B);
                       

  • HEX Hexadecimal notation six-digit color representation. This notation starts with the # symbol followed by six characters ranges from 0 to F. In hexadecimal notation, the first two digits represent the red (RR) color value, the next two digits represent the green (GG) color value, and the last two digits represent the blue (BB) color value

          Syntax: color: #(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);


  • HSL short form of Hue, Saturation, and Lightness.

           Syntax: color: hsl(H, S, L); 


  • RGBA similar to RGB format except that RGBA contains A (Alpha) that specifies the element's transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 is for fully transparent, and 1.0 is for not transparent.

           Syntax: color: rgba(R, G, B, A); 


  • HSLA similar to HSL property, except that it contains A (alpha) that specifies the element's transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 indicates fully transparent, and 1.0 indicates not transparent.

         Syntax: color:hsla(H, S, L, A);  

CSS Background Color You can set the background color for HTML elements
<p style="background-color:Red;">hello world!</p>
CSS Text Color You can set the color of text
<h1 style="color:Red;">Hello World</h1>
CSS Border Color You can set the color of borders
<h1 style="border:1px solid Red;">Hello World</h1>


2.CSS Background

CSS background property is used to define the background effects on element


  1. background-color
  2. background-image
  3. background-position
  4. background-repeat
  5. background-attachment

  1. background-color
It used to specify the background color of the element.




<!DOCTYPE html>
<html>
<head>
  <style> h1,p{ background-color: #e20f22; } </style>
</head>
<body>

<h1>heading</h1>
<p>paragraph1.</p>

</body>
</html>

Output:

heading                                          

paragraph1                                                                    

2.background-image

 It is used to set an image as a background of an element


<!DOCTYPE html>
<html>
<head>
  <style>body { background-image: url("flower.gif"); margin-left:100px; } </style>
</head>
<body>

<h1>heading</h1>
<p>paragraph1.</p>

</body>
</html>


3.background-position

It 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.

  • center
  • top
  • bottom
  • left
  • right
4.CSS background-repeat

By default, the background-image property repeats the background image horizontally and vertically

  •  background-repeat: repeat-x; 
  •  background-repeat: repeat-y;  
5.CSS background-attachment

This property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. If you set fixed the background image then the image will not move during scrolling in the browser.


  • background-repeat: no-repeat;
  • background-attachment: fixed;


<!DOCTYPE html>
<html>
<head>
  <style>
 body{background: white url('flower.jpg'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center; }
 </style>
</head>
<body>

<h1>heading</h1>
<p>paragraph1.</p>

</body>
</html>