Topic B1 Flashcards

1
Q

What is the latest version of CSS?

A

CSS3

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

What are modules?

A

CSS3 is composed of modules, where each module focuses on a different design topic

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

What are browser/user agent styles?

A

Styles built into the browser

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

What are user-defined styles?

A

Styles defined by a user based on the settings of the user’s browser

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

What are external styles?

A

Styles created by a website author, placed into a CSS file, and linked to the page

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

What are embedded styles?

A

Styles added to the head of an HTML document

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

What are inline styles?

A

Styles added as element attributes within and HTML document and applied only to that specific element

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

What is the general syntax of a CSS style rule?

A
selector{
     property1: value1;
     propert2: value2;
     ...
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

_____ _____ are an extended library of style properties in the browser.

A

Browser extensions

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

Vendor prefix indicates what?

A

Vendor prefix indicates the browser vendor that created and supports the style property

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

How does one embed different style rules directly in an HTML file.

A

Use the tag within the document head

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

Which type of style rule has precedence over each other?

A

The more specific style rule has higher precedence than a general rule

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

Which style rule has precedence of two rules have the same specificity?

A

The rule that was defined last

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

_____ _________ is the process in which properties are passed from a parent element to its children.

A

Style inheritance

ex. article {color: blue}
p {…}
would leave p blue as well

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

what does @import do?

A

@import is a CSS at-rule used to import the content of another style sheet file
ex @import url(url)

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

What does an RGB triplet do?

A

Creates a colour corresponding to the intensity of the primary colours red, green, and blue

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

How does HSL represent colours?

A

With hue (the tint of the colour), saturation (the intensity of the colour), and lightness (the brightness of a color).

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

_____ is also another descriptor which can be added to RGB colours or HSL colours.

A

Opacity (how solid a colour is)

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

How does CSS define the text and background colour for each element on a web page?

A

color: color and background-color: color

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

What does a contextual slider do?

A

A contextual slider specifies the context under which a particular page element is matched

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

What is context based on?

A

Context is based on the hierarchical structure of a document. eg parents, children, ancestors, and siblings

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

__ identifies specific elements within the document.

A

id

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

_____ identifies a group of elements with similar characteristics or properties.

A

class

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

What is typography?

A

Typography is the art of designing the appearance of characters and letter on a page such as color and font

25
Q

Text characters are based on _____ that define the style and appearance of each character in the alphabet.

A

fonts. Use font-family: fonts; in CSS

26
Q

What is a specific font?

A

A font identified by name and based on a font definition file stored in a user’s computer

27
Q

What is a generic font?

A

A generic font describes the general appearance of the characters in the text, but does not specify any particular font definition file. eg serif, sans-serif, monospace, etc.

28
Q

Fonts sized with _______ _____ are fixed in size regardless of the output device and are used only with printed media.

A

absolute units

29
Q

Fonts sized with ______ ______ are expressed relative to the size of other objects within the web page or to the display properties of the device itself.

A

relative units

30
Q

What are three different relative measurements used to provide scalability?

A

Percentage, em unit, and root em unit

31
Q

How is a viewport unit defined?

A

It as a unit of length defined as a percentage of the width and height of the browser window

32
Q

What are the 4 viewport units that were introduced in CSS3.

A

1 vw = 1% of the browser window width
1 vh = 1% of the browser window height
1 vmin = 1 vw or 1 vh (whichever is smaller)
1 vmax = 1 vw or 1 vh (whichever is larger)

33
Q

The _______ measures the amount of space between characters while the ________ measures the amount of space between words.

A

kerning(letter-spacing: value;), tracking(word-spacing: value;)

34
Q

What does the leading measure?

A

The leading measures the amount of space between lines of text (line-height: size;)

35
Q

How can the indentation of the first line of a block of text be changed?

A

text-indent: size;

36
Q

To specify the font style or font weight, use…

A

font-style: type; and font-weight: weight;

37
Q

Some other fucking font and text styles

A
  • text-decoration: type; (underlines, overlines, line-throughs…)
  • text-transform: type;
  • font-variant: type;
  • text-align: alignment;
  • vertical-align: alignment;
38
Q

The text and font styles can be combined using what shorthand font property?

A

font: style variant weight size/height family;

39
Q

The ___ ______ is the default browser style symbol displayed before each list item in both unordered and ordered lists.

A

list marker. To change, use list)style_type: type;

40
Q

Is the list marker placed within the list item block or outside?

A

Outside

41
Q

Block-level elements follow the structure of the ___ model.

A

box

42
Q

Contents in a box model are enclosed by…

A

The content itself and the padding, which extends from the element’s content to a border

43
Q

The _______ surrounds the content, the ______ surrounds the padding, and the ______ surrounds the border until the next page element

A

padding, border, margin

44
Q

How do you change the padding, margin, and border spaces?

A

padding/margin/border-width: size; or margin/border-width: top right bottom left; (like a clockwise motion starting from 12)

45
Q

What is a pseudo-class?

A

A class of elements based on its current status, position or use in the document

46
Q

What is a structural pseudo-class?

A

A class of elements based on its location within the structure of the HTML document

47
Q

What is a dynamic pseudo-class?

A

A class of elements in which the class can change depending on the actions of a user

48
Q

What is a pseudo-element?

A

An object that exists only in the rendered page

49
Q

New content can be added either before or after an element using the ______ and _____ pseudo-elements.

A

before, after

ex element::before/after {content: text;} where text can be a counter, open-quote, none, etc.

50
Q

What elements are used for quoted material?

A

blockquotes and q elements

51
Q

The _____ and ______ properties are used to set the size of the elements, using either absolute or relative values.

A

width, height

52
Q

Block elements can be centered horizontally by applying ____ to both margin left and right.

A

auto

53
Q

How would you vertically align an element?

A

display: table-cell;

vertical-align: middle;

54
Q

What does floating do?

A

Floating takes an element out of it’s position and places it along the left or right side of it’s parent element

55
Q

In a content box-sizing model, the width property refers to the…

A

width of an element content only

56
Q

In a border box-sizing model, the width property refers to the…

A

sum of the content, padding, and border spaces

57
Q

State and describe the five different positioning styles.

A

Static positioning - The element is placed where it would have fallen naturally within the flow of the document

Relative positioning - The element is moved out of its normal position in the document flow

Absolute positioning - The element is placed at specific coordinates within containers

Fixed positioning - Fixes an object within a browser window to avoids its movement

Inherited positioning - Allows an element to inherit the position value of its parent element

58
Q

How does visible, hidden, scroll, and auto handle overflow differently?

A

visible – Instructs browsers to increase the height of an element to fit overflow contents

hidden – Keeps an element at the specified height and width, but cuts off excess content

scroll – Keeps an element at the specified dimensions, but adds horizontal and vertical scroll bars

auto – Keeps an element at the specified size, adding scroll bars when they are needed