Part 4 - CSS

Question 1

What does CSS stand for?

Answer 1

Cascading Style Sheets

Question 2

What is the function of CSS?

Answer 2

CSS is a W3C standard for describing the appearance of HTML elements

Question 3

Give the general syntax of an inline style in HTML. Use two declarations.

Answer 3

style=”font-size: 24pt; font-weight:bold;”

Question 4

How would you indicate a class selector in CSS, and what is the benefit of using such a selector?

Answer 4

.example_class
This selector will target all HTML elements with the indicated class, irrespective of where these elements are located in the document

Question 5

Name the benefits of using CSS

Answer 5

• Improved control over formatting.
• Improved site maintainability.
• Improved accessibility.
• Improved page-download speed.
• Improved output flexibility (responsive design)

Question 6

What is contained in a CSS rule?

Answer 6

• A selector that indicates which HTML element should be altered
• Followed by a series of property:value (declaration) pairs
  Structure:
  selector { property: value; property2: value2; }

Question 7

How would you indicate the use of an external stylesheet in HTML?

Question 8

How is an id selector indicated in CSS?

Answer 8

example_id

Question 9

Show the 6 types of CSS attribute selectors, and indicate the function of each one

Answer 9

[] - A specific attribute.
[=] - A specific attribute with a specific value.
[~=] - A specific attribute whose value matches
at least one of the words in a space delimited
list of words.
[^=] - A specific attribute whose value begins with a specified value.
[*=] - A specific attribute whose value contains a substring.
[$=] - A specific attribute whose value ends with a specified value.

Question 10

What is a pseudo-element selector?

Answer 10

A way to select something that does not exist explicitly as an element in the HTML document tree but which is still a recognizable selectable object

Question 11

What is a pseudo-class selector?

Answer 11

A selector that does apply to an HTML element, but targets a particular state

Question 12

What is the difference between relative and absolute measure units in CSS? Which one is preferred and why?

Answer 12

• The absolute units always indicate a fixed length, while with the relative units the length is always calculated in relation to other elements.
• Relative units preferred in order to help the website to adjust correctly across different devices and window sizes.

Question 13

What is a web font stack and why necessary?

Answer 13

List of fonts in the CSS font family declaration.

Necessary to control the look of the website even if the initial font indicated is not installed on the client computer

Question 14

List the cascade principles in CSS responsible for dealing with conflicts, in order of override

Answer 14

• Location
• Specificity
• Inheritance

Question 15

What is responsive design?

Answer 15

• The page responds to changes in the (height, width, etc)

- Makes webpage accessible from different devices

Question 16

How is responsive design achieved?

Answer 16

1. Liquid layouts (using relative units in CSS)
2. Scaling images to viewport size
3. Setting viewports via the tag
4. Customising the CSS for different viewports using media queries

Question 17

Arrange the following CSS selectors in descending order of specificity:

• div #example
• # example
• div
• .example

Answer 17

• div #example
• # example
• .example
• div