Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

C820 Web Dev > HTML/CSS Quiz > Flashcards

HTML/CSS Quiz Flashcards

1
Q

Where do you put non-visible content about the HTML document?

A

between opening and closing tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Where do you put visible content about the HTML document?

A

between opening and closing tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Where do the and tags go in a valid HTML document?

A

between opening and closing tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the purpose of a declaration?

A

letting browser know that we’re using most recent version of the HTML

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Give five examples of HTML element tags.

A

img, heading(h1, h2, ..), anchor, form, table

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the purpose of HTML attributes?

A

Attributes provide additional information

about the contents of an element. They are made of two parts: attribute name and attribute value.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Give an example of an HTML entity (escape character).

A

© “copyright”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the difference between an ordered list and an unordered list in HTML?

A

ordered list is in order using numbers or alphabets, unordered list uses symbols like bullet points.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What three HTML elements do you use to build a description list?

A

<dl> description list
<dt> description title
</dt><dd> description definition</dd></dl>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Name three different types of values you can use to specify colors in CSS.

A

RGB, RGBA, HEX, Named Colors

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is source order? (in CSS)

A

The order that CSS rules are written in stylesheet.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What purpose does the CSS Cascade serve?

A

To determine what styling should ultimately be applied to an element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

In what situations might you need to apply styling to a single element multiple times in one stylesheet?

A

as an example, when working with media queries for mobile responsiveness we may apply more than one styling to specific elements based on the size of the device.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is inheritance?

A

Inheritance is the process by which certain CSS properties on a child HTML element can receive value from a parent element, if no CSS for that property is directly declared on the child element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Why might CSS include this feature?

A

it will results in simpler style sheets

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Is inheritance a good tool to use for styling? If so, on what occasions?

A

It saves you from having to apply
these properties to as many
elements (and results in simpler
style sheets). for example when styling added to a parent and all child elements inheritance.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is the purpose of !important?

A

Adding !important increases the specificity of a style applied to an element takes that immediate styling and doesn’t allow further style change, it also by pass any inline styling!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

When is !important a good tool to use?

A

To override styles that are declared somewhere else or prevent any further styling on all elements of the kind interfering with one specific element!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is specificity?

A

Is how browser decides which CSS property values are the most relevant to an element, therefore will be applied.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How is specificity calculated?

A

Based on which CSS selector is being used to target an element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Why might CSS include this (specificity) feature?

A

To have ability to target and apply styling to an specific element easier.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?

A
  1. Type selectors (directly targeted elements, e.g., h1) and pseudo-elements (e.g., ::before).
  2. Class selectors (e.g., .example), attributes selectors (e.g., [type=”radio”]) and pseudo-classes (e.g., :hover).
  3. ID selectors (e.g., #example).
  4. Universal selector and

then:
Cascade and inheritance
and in-line styling.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is the CSS Cascade?

A

combination of the source order, inheritance, specificity, which defines which styling should be applied to an element

24
Q

What are CSS pseudo-classes useful for?

A

Changing the appearance of elements based on user interaction or a specific state of the element.

25
Q

What are 3 examples of what can be done with CSS transitions?

A

[transition-property] [transition-duration] [transition-timing-function] [transition-delay]

  1. Change background color over time
  2. Move an element
  3. Rotate an element
26
Q

Why might transitions be a helpful effect for styling?

A

To define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

27
Q

Are all properties able to be transitioned?

A

No, font style

28
Q

What does the transform property do?

A

It allows you to visually manipulate an element by skewing, rotating, translating, or scaling

29
Q

What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?

A

The first element of the kind selected or last one under the same parent

30
Q

How do block-level elements affect the document flow?

A

A block-level element always starts on a new line and takes up the full width available, and push all elements blow it one line down.

31
Q

How do inline elements affect the document flow?

A

They continue on the

same line as their neighboring elements and only takes up as much width as necessary.

32
Q

What are the default width and height of a block-level element?

A

Same height as element and full width available.

33
Q

What are the default width and height of an inline element?

A

Same height and width as element.

34
Q

What accessibility considerations must be considered when choosing HTML elements?

A

Using semantic elements and tags.

35
Q

What is the initial display property of <div>s?</div>

A

Block

36
Q

What is the difference between display: none and visibility: hidden

A

display: none will remove the element from the flow but visiblity:hidden will hide and still takes the same amount space

37
Q

What is the difference between the block, inline block, and inline display properties?

A

block takes full width, inline takes only necessary space, inline-block is same as inline but can be resized.

38
Q

Why are CSS resets helpful for cross browser compatibility?

A

creating a more standardized base between browsers by getting rid of browser default styling and apply the same expected styling.

39
Q

Why is it important to be mindful of what you reset with your CSS resets?

A

Resetting styles where is unnecessary, like default padding of an input

40
Q

What is the default value for the position property of HTML elements?

A

Static

41
Q

How does setting position relative on an element affect document flow and where the element appears on the page?

A

By setting position relative and offset we can position an element in relation to where it would be in normal flow and make it overlap other elements

42
Q

How does setting position absolute on an element affect document flow and where the element appears on the page?

A

By setting position absolute and offset we can position an element in relation to it’s container and the element will be traded as it doesn’t exist as part of the normal flow.

43
Q

How does setting position absolute on an element affect document flow and where the element appears on the page?

A

By setting position absolute and offset we can position an element in relation to its container and the element will be traded as it doesn’t exist as part of the normal flow.

44
Q

What were floats originally designed for?

A

To wrap text around image.

45
Q

What is the default flex-direction of a flex container?

A

The default flex-direction of a flex container is row

46
Q

What is the default flex-wrap of a flex container?

A

noWrap

47
Q

What are the three core parts of a grid system?

A

container, rows, columns

48
Q

Why is it important to use a grid system for CSS layouts?

A

easier adjustments

49
Q

Why is it a good idea to use percentages for grid column widths?

A

responsiveness

50
Q

How do you think building this layout would be different without a grid system?

A

Difficult

51
Q

What advantages do you see with using a grid system?

A

well more organized

52
Q

Why are media queries crucial to responsive grid designs?

A

easier to make adjustments based on screen size

53
Q

What is a modal?

A

a graphical control element subordinate to an application’s main window. It creates a mode that disables the main window but keeps it visible

54
Q

What are some use cases for modals?

A

sign-up form

55
Q

Why does a modal usually need to occupy the entire height and width of the viewport?

A

to disable the access to the main window

56
Q

Give two examples of media features that you can query in an @media rule.

A

display-mode, color-index

57
Q

Which HTML meta tag is used in mobile-responsive web pages?

A

viewport

C820 Web Dev (5 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions