CSS Notes

mobiprep (6).png

Tables and Lists

mobiprep (6).png

CSS Layout

mobiprep (6).png

Pseudo-class

mobiprep (6).png

CSS

mobiprep (6).png

Selectors and Declarations

mobiprep (6).png

Box Model

mobiprep (6).png

Text and Image Formatting

mobiprep (6).png

Icons, lists and Links

mobiprep (6).png

Colors

Heading

Q

1

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

LRM_EXPORT_207556595493866_20190724_1939

Ans

Colors in CSS are specified using predefined color names:
RGB
HEX
HSL
RGBS
HSLA values.

LRM_EXPORT_207556595493866_20190724_1939

Q

2

Explain RGB Colors in CSS.

LRM_EXPORT_207556595493866_20190724_1939

Ans

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.

LRM_EXPORT_207556595493866_20190724_1939

Q

3

Explain HEX Colors in CSS.

LRM_EXPORT_207556595493866_20190724_1939

Ans

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.

LRM_EXPORT_207556595493866_20190724_1939

Q

5

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

LRM_EXPORT_207556595493866_20190724_1939

Ans

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.

LRM_EXPORT_207556595493866_20190724_1939

Q

6

Explain the different CSS Background properties.

LRM_EXPORT_207556595493866_20190724_1939

Ans

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.

LRM_EXPORT_207556595493866_20190724_1939

Q

7

Explain different Border Properties and Styles in CSS.

LRM_EXPORT_207556595493866_20190724_1939

Ans

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

LRM_EXPORT_207556595493866_20190724_1939

Q

8

Define Gradients and Its Types in CSS.

LRM_EXPORT_207556595493866_20190724_1939

Ans

CSS Gradients allows to display a smooth transition between two or more specified colors. CSS defines two types of gradients:
1. Linear Gradients.
2. Radial 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…)

LRM_EXPORT_207556595493866_20190724_1939