Day 10: CSS - Background Images - 1

 p1{

background-color; blue;

opacity: 0.5;

}

p2{

background-color: rgb(40,40,40)

}

p3{

background-color: rgba(40[red],40[green],40[blue],0.5[opacity]);

}

--------------------------------------------------------------------------------------------------------

1. Height and width properties in CSS:

  • The height and width of an element are set using the height and width attributes.   
  • Height and width can be set using length (pixels, cm) or in percentage (%) format.

Example : 

Output :

Code :

2. RGB Value :

  • A color can be expressed in CSS as an RGB value (red, green, blue).   
  • Red, green, and blue parameters each control the color's intensity, which ranges from 0 to 255.     
  • For instance, the color green is displayed when the RGB values are set to 255 for green and 0 for the remaining colors.(red and blue)     
  • Set all color settings to 0 to display black, as shown here: rgb (0, 0, 0).     
  • Set all color settings to 255 to display white, as shown here: rgb (255, 255, 255).       
  • Example:
     

Code: 

Output :

3. RGBA Value

  • RGBA is an extension of the RGB color, with an additional alpha channel, which describes the opacity of a color.     
  • The syntax for RGBA color value is: rgba (red, green, blue, alpha), where alpha defines the opacity of the color.     
  • The value of the alpha parameter ranges from 0.0 (complete transparency) to 1.0. (not transparent at all).     
  • Example: 

Code:

Output :

4. HEX Value :

  • Using a hexadecimal value a color can be defined in CSS, using the following format,:#rrggbb       
  • Where the colors red, green, and blue are represented by hexadecimal numbers between 00 and ff (same as decimal 0-255).   
  • Red, for instance, is set to its greatest value (ff), while the others are set to their lowest value(00), so #ff0000 is displayed as red.     
  • Set all values to 00, as in #000000, to display black.       
  • Set all values to ff, as in #ffffff, to display white. 

Converting decimal number to hexadecimal steps :

Step 1: To begin, convert the decimal number to an integer by dividing it by 16.

Step 2: Set the rest aside.

Step 3: Repeat step 3 until the quotient value equals zero and divide the quotient by 16 once more.

Step 4: To get the hexadecimal numbers, take the values of the remaining remainders and sort them backwards.

Keep in mind that all integers from 0 to 9 will be treated equally when using the decimal system. However, from 10 to 15, they are written in alphabetical order, starting with A and going through F. (So in hexadecimal 10 = A, 11 = B, 12=C, 13=D, 14=E, 15=F).

To better comprehend the following instructions for converting decimal to hex, let's use an example.

Follow the instructions below to convert 255 to hexadecimal :

Step 1: Divide 255 by 16

255/16 = 15 , leaving 15 as the remainder.

Step 2:  Again divide 15/16

15/16= 0, leaving a remainder of 15. 

Step 3: By placing the equal hexadecimal value in place of the remaining items and sorting them in reverse order, we obtain,  15→f and 15→f

This means that 255 equals to ff in hexadecimal format.

Example:

Code :

Output:

 

Comments

Post a Comment

Popular posts from this blog

else-if condition in if-else statements: Concatenation in JavaScript :

Image
  else-if condition in if-else statements: While specifying conditions for if-else statements, there may arise a need to include more than just two scenarios. For example, suppose we have a variable ‘n’ and we have to check if it is positive or negative. JS code for this problem would look like this: Quite simple, right? However, suppose we twist this problem a bit. If we have to check if the value of ‘n’ is positive, negative, OR zero. Can we do it using only if-else?  No, right? Here comes the scenario where we have to check more than two conditions and give output for each. This is where else-if comes into the game.  Structure of if else-if else looks something like this: If (condition 1)  { statements } else if (condition 2) { statements } else  { statements }   Working for the above code is explained as follows: Condition 1 is checked first. If it is true, statements inside the first block are executed and the remaining conditions are not checked. If t...
Read more

Day 9: CSS - Font Formate

Image
p1{  font style: italic, } p2{ font-variant: small-caps; } p3{ font-weight: 400px: } p4{ font-size: 12pt } p5{ font-family:  } ----------------------------------------------------------------------------------------------------------------------- The CSS font-family Property : The font-family property in CSS is used to specify the typeface of a text.      If the font name has more than one word, such as "Times New Roman," quotation marks must be used.        Example: The following code applies a font family to a paragraph using class ids:I        Code :   Output :     The CSS font-size Property : The font-size attribute controls a font's size.      It has an impact on the text size of an element. Every element can use it, and its default value is medium. This attribute has values like xx-small, small, x-small, etc.      Font-size can also be specified in pixels (which sets the f...
Read more

Day 28: CSS Animation, CSS Transition Animation Box size

Image
------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->   <title>Your Webpage Title</title> </head> <body>   <div class="grad"></div> <!-- Your HTML element with the "grad" class --> </body> </html> @keyframes example {   0% { background-color: red; left: 0px; top: 0px; }   25% { background-color: yellow; left: 200px; top: 0px; }   50% { background-color: blue; left: 200px; top: 200px; }   75% { background-color: green; left: 0px; top: 200px; }   100% { background-color: red; left: 0px; top: 0px; } } .grad {   width: 100px;   heigh...
Read more