Colors: CSS Class Notes

Updated: Aug 18

Mobiprep has created last-minute notes for all topics of Colors to help you with the revision of concepts for your university examinations. So let’s get started with the lecture notes on Colors.

  1. Table and Lists

  2. CSS Layout

  3. Pseudo - class

  4. CSS

  5. Selectors and Declarations

  6. Box Model

  7. Text and Image Formatting

  8. Icons, Lists and Links

  9. Colors

Our team has curated a list of the most important questions asked in universities such as DU, DTU, VIT, SRM, IP, Pune University, Manipal University, and many more. The questions are created from the previous year's question papers of colleges and universities.

  1. What are the different methods of specifying a color value in CSS?

  2. Explain RGB Colors in CSS.

  3. Explain HEX Colors in CSS.

  4. How can the color of the text or background of the webpage be changed?

  5. Explain the different CSS Background properties.

  6. Explain different Border Properties and Styles in CSS.

  7. Define Gradients and Its Types in CSS.

Colors


Question 1 - What are the different methods of specifying a color value in CSS?

Answer - Colors in CSS are specified using predefined color names:

  1. RGB

  2. HEX

  3. HSL

  4. RGBS

  5. HSLA values.

 

Question 2 - Explain RGB Colors in CSS.

Answer - RGB basically means Red, Blue, Green. In CSS we can specify a color as RGB by:

The intensity of color ranges 0-255. 255-highest intensity and is a value of red. Value of Black is- (0,0,0). Value of White is- (255,255,255).

There is an extension of RGB, called RGBA where A stands for alpha which means opacity and its value range from 0.0-1.0.

 

Question 3 - Explain HEX Colors in CSS.

Answer - Another way to specify colors in CSS using hexadecimal value in the form: #rrggbb. Here rr= red, gg= green, bb= blue are hexadecimal values ranging from 00-ff (same as 0-255 in RGB).

Red is set to highest value of #ff0000 because red is set to highest value of ff and the rest are set to lowest value of 0. #000000 is the value for Black. And for white it is- #ffffff.

 

Question 4 - How can the color of the text or background of the webpage be changed?

Answer - CSS is known for styling text and background and more for a webpage. Text in CSS can be set as-

<h1 style="color: Red;">Hello World</h1>
<p style="color: Blue;">This is my third assignment. </p>
<p style="color: Orange";>By- Aastha Dwivedi </p>

The background color is set by using “background-color”.

Example-

body{
background-color: gray;
}

The rest of the color properties of Text are applicable in Background color.

 

Question 5 - Explain the different CSS Background properties.

Answer - Following are CSS Background Properties- background-color- as explained in above section.

  • Background-image- specifies an image to be used as background of page.

  • Background-repeat- By default, CSS repeats the image used for the entire page so they don’t look strange.

  • The repetition can be specified as: Horizontal: repeat-x ; Vertical: repeat-y

  • Background-attachment- Specifies whether the background image scrolls or stays fixed.

  • Background-position- Specifies the position of image in the background.

 

Question 6 - Explain different Border Properties and Styles in CSS.

Answer - CSS Border properties specifies the style, width and color of an element’s border. Border Styles specifies the kind of border to display.

It allows the following values-

  1. dotted - Defines a dotted border

  2. dashed - Defines a dashed border

  3. solid - Defines a solid border

  4. double - Defines a double border

  5. groove - Defines a 3D grooved border. The effect depends on the border-color value

  6. ridge - Defines a 3D ridged border. The effect depends on the border-color value

  7. inset - Defines a 3D inset border. The effect depends on the border-color value

  8. outset - Defines a 3D outset border. The effect depends on the border-color value

  9. none - Defines no border

  10. hidden - Defines a hidden border

 

Question 7 - Define Gradients and Its Types in CSS.

Answer - CSS Gradients allows to display a smooth transition between two or more specified colors. CSS defines two types of gradients:

  1. Linear Gradients

  2. Gradients.

Linear Gradients - The transition goes down/up/left/right/diagonally. To create this, two color stops must be defined.

Syntax for the same is- background-image: linear-gradient(color stop1, color stop2…);


Radial Gradients - This is defined by its centre.

Syntax for the same is- background-image: radial-gradient(shape size at position, color stop1, color stop 2…)



5 views0 comments

Recent Posts

See All