Topic B1 Flashcards

(58 cards)

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
Text characters are based on _____ that define the style and appearance of each character in the alphabet.
fonts. Use font-family: fonts; in CSS
26
What is a specific font?
A font identified by name and based on a font definition file stored in a user's computer
27
What is a generic font?
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
Fonts sized with _______ _____ are fixed in size regardless of the output device and are used only with printed media.
absolute units
29
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.
relative units
30
What are three different relative measurements used to provide scalability?
Percentage, em unit, and root em unit
31
How is a viewport unit defined?
It as a unit of length defined as a percentage of the width and height of the browser window
32
What are the 4 viewport units that were introduced in CSS3.
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
The _______ measures the amount of space between characters while the ________ measures the amount of space between words.
kerning(letter-spacing: value;), tracking(word-spacing: value;)
34
What does the leading measure?
The leading measures the amount of space between lines of text (line-height: size;)
35
How can the indentation of the first line of a block of text be changed?
text-indent: size;
36
To specify the font style or font weight, use...
font-style: type; and font-weight: weight;
37
Some other fucking font and text styles
- text-decoration: type; (underlines, overlines, line-throughs...) - text-transform: type; - font-variant: type; - text-align: alignment; - vertical-align: alignment;
38
The text and font styles can be combined using what shorthand font property?
font: style variant weight size/height family;
39
The ___ ______ is the default browser style symbol displayed before each list item in both unordered and ordered lists.
list marker. To change, use list)style_type: type;
40
Is the list marker placed within the list item block or outside?
Outside
41
Block-level elements follow the structure of the ___ model.
box
42
Contents in a box model are enclosed by...
The content itself and the padding, which extends from the element's content to a border
43
The _______ surrounds the content, the ______ surrounds the padding, and the ______ surrounds the border until the next page element
padding, border, margin
44
How do you change the padding, margin, and border spaces?
padding/margin/border-width: size; or margin/border-width: top right bottom left; (like a clockwise motion starting from 12)
45
What is a pseudo-class?
A class of elements based on its current status, position or use in the document
46
What is a structural pseudo-class?
A class of elements based on its location within the structure of the HTML document
47
What is a dynamic pseudo-class?
A class of elements in which the class can change depending on the actions of a user
48
What is a pseudo-element?
An object that exists only in the rendered page
49
New content can be added either before or after an element using the ______ and _____ pseudo-elements.
before, after | ex element::before/after {content: text;} where text can be a counter, open-quote, none, etc.
50
What elements are used for quoted material?
blockquotes and q elements
51
The _____ and ______ properties are used to set the size of the elements, using either absolute or relative values.
width, height
52
Block elements can be centered horizontally by applying ____ to both margin left and right.
auto
53
How would you vertically align an element?
display: table-cell; | vertical-align: middle;
54
What does floating do?
Floating takes an element out of it's position and places it along the left or right side of it's parent element
55
In a content box-sizing model, the width property refers to the...
width of an element content only
56
In a border box-sizing model, the width property refers to the...
sum of the content, padding, and border spaces
57
State and describe the five different positioning styles.
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
How does visible, hidden, scroll, and auto handle overflow differently?
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