M2- Text and color in CSS

Question 1

What are the 5 ways to reference a colour in CSS?

Answer 1

From CSS Version 3, there are five main ways to reference a color.

• By RGB value,
• By RGBA value,
• By HSL value,
• By hex value and
• By predefined color names.

Question 2

What is RGB value?

Answer 2

RGB is a color model that adds the colors red (R), green (G) and blue (B) together to create colors.
Each value is defined as a number between 0 and 255, representing the intensity of that color.

Question 3

Example of RGB

Answer 3

For example, the color red would have the RGB value of 255,0,0 since the intensity of the red color would be 100% while blue and green would be 0%.

The color black then would be 0,0,0 and the color white 255,255,255.

Question 4

What is RGBA?

Answer 4

RGBA is an extension of RGB that add an alpha (A) channel. The alpha channel represents the opacity, or transparency, of the color.

EXAMPLE:
p {
color: rgba(255, 0, 0, 0.8);
}

Question 5

What is HSL?

Answer 5

HSL is a newer color model defined as Hue (H), Saturation (S) and Lightness (L).

EXAMPLE:
p {
color: hsl(0, 100%, 50%);
}

Question 6

How many digits are in hexadecimal?

Answer 6

Sixteen.
This is counted as 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

For example, the color red which is RGB 255,0,0 would be written as hexadecimal #FF0000.

Question 7

What are predefined colour names?

Answer 7

Modern web browsers support 140 predefined color names. These color names are for convenience purposes and can be mapped to equivalent hex/RGB/HSL values.

Question 8

Which property is used to change the font in CSS?

Answer 8

font-family

EXAMPLE:
p {
font-family: “Courier New”, monospace;
}

Question 9

What is recommended when using the font-family property?

Answer 9

Since computers vary in what fonts they have installed, it is recommended to include several fonts when using the font-family property. These are specified in a fallback order, meaning that if the first font is not available, it will check for the second font. If none of the fonts are available, it will use the browser’s default font.

Question 10

What are the most common values for text-transform property?

Answer 10

The most commonly used values for the text-transform property are: uppercase, lowercase, capitalize and none. The default value used is none, which means the text displays as it was written in the HTML document.

Question 11

What is the text-decoration property?

Answer 11

The text-decoration property is useful to apply additional decoration to text such as underlining and line-through (strikethrough).

Question 12

Most common text-decoration-line values used:

Answer 12

• Underline
• Overline
• Line-through
• none

Question 13

Values for text-decoration-style property:

Answer 13

• solid
• double
• dotted
• dashed
• wavy