Brainscape's Knowledge GenomeTM

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


See full index

TT284: block 1 - Basic Web Technologies > Part 5 - The CSS Box Model – web typography, ‘color’ and graphics > Flashcards

Part 5 - The CSS Box Model – web typography, ‘color’ and graphics Flashcards

1
Q

describe the
margin
of the box model

A

in regards to the box model:
this lets you add a margin around the border

(NOTE: margins placed vertically next to each other can merge this is known as a callapsed margin)

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

describe the
border
of the box model

A

in regards to the box model:
this lets you place a border around the content which can then be styled

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

these are described by a rectangle known as the
box model

A

how is every
**html element **
described

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

these include:
1.Lack of pattern leading the user to become confused as to how content is structured
2.Dense and crammed text lack of whitespace

A

give 2 factors that contribute to bad typography

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

what is the
“flow”
of a html document

A

this describes how an element will be positioned given no positioning style

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

why is it important to define font and style choices early in development

A

this is important so that the site and all of its pages can have a consistent look, this gives less risk of customers leaving due to the site looking confusing and clumsy

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

features of this are:
1. only occurs on block elements
2. only occurs on the top and bottom margins (vertically)
3. when this occurs the largest margin of the two margins is used as the gap between there borders

A

describe 3 features of css
margin callapse

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

what are the 4 common graphic formats found on the web

A

these include:
1. Joint Photographic Experts Group (JPEG)
2. Graphics Interchange Format (GIF)
3. Portable Network Graphics (PNG)
4. Scalable Vector Graphics Format (SVG)

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

this can be accomplished using:
1. colour name
2. hexadecimal value
3. RGB value
4. HSL value

A

what 4 ways can we define a colour in css

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

State the hue saturation and lightness of a colour
May also use hsla where a is the alpha or transparency
Color: hsl(0, 100%, 50%)

A

how do we define a colour in css using a HSL value

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

these include:
1.Designed for the web
2.Supports transparency
3.Does not compress as well as jpg
4.Not recommended for photograph distribution across a network

A

give 4 characteristics of
Portable Network Graphics (PNG)

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

this describes how an element will be positioned given no positioning style

A

what is the
“flow”
of a html document

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

what are 4 font and style choices that should be known early in development

A

these include:
1.Font types
2.Font sizes
3.Heading and sub heading sizes
4.Paragraph spacing

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

to avoid this good design choices would be:
* choose a few select fonts and sizes
* limit your font choices to those that are readily available on users devices
* design for legibility and for usability purposes you should always try to avoid using text as graphics.

A

to avoid
“corruption” or “control” of the styling of your page
what are 3 good design choice

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

properties of this include:
* An inline element does not start on a new line.
* An inline element only takes up as much width as necessary.
* <.span> is an example of a inline element

A

in 3 points describe an
inline element

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

give two points regarding
text as graphics

A
  1. in genarl this should be avoided
  2. where it cannot be avoided such as in a logo then alt text must be supplied
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

give 3 characteristics of
Graphics Interchange Format (GIF)

A

these include:
1. Uses lossy compression (image must use same colour palette)
2. 8-bit images meaning 256 colours
3. Supports transparency

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

these include:
1. Uses lossy compression (image must use same colour palette)
2. 8-bit images meaning 256 colours
3. Supports transparency

A

give 3 characteristics of
Graphics Interchange Format (GIF)

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

describe 3 features of css
margin callapse

A

features of this are:
1. only occurs on block elements
2. only occurs on the top and bottom margins (vertically)
3. when this occurs the largest margin of the two margins is used as the gap between there borders

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

how do we define a colour in css using a HSL value

A

State the hue saturation and lightness of a colour
May also use hsla where a is the alpha or transparency
Color: hsl(0, 100%, 50%)

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

Give a hexadecimal value of a colour
Color: #ff0000

A

how do we define a colour in css using a hexadecimal value

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

properties of this include:
* A block-level element always starts on a new line
* the browsers automatically add some space (a margin) before and after the element.
* A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
* Common block elements include <.div> and <.p>

A

describe in 4 points a
block level element

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

in 3 points describe an
inline element

A

properties of this include:
* An inline element does not start on a new line.
* An inline element only takes up as much width as necessary.
* <.span> is an example of a inline element

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

these are are compressed opentype or truetype fonts and have additional xml metadata

A

what is the
web open font format (WOFF)

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

State the rgb values of a colour
May also use RGBA a is alpha or transparency
Color: rgb(255, 0, 0)

A

how do we define a colour in css using a RGB value

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

what css property can be used to style a border

A

to accomplish this the css property border can be used

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

how do we define a colour in css using a RGB value

A

State the rgb values of a colour
May also use RGBA a is alpha or transparency
Color: rgb(255, 0, 0)

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

give 4 notes regarding typography

A

some notes on this include:

1.Some fonts work better on screen than they do printed and vice versa
2.Fonts used should be tested on all media that you expect users to consume the information
3.The box model will play an important role with how your white space is determined
4.Desired fonts may not be available on all users systems so make a fallback list begginning with the desired font and finishing with a CSS web safe font

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

the syntax for this is:
border: border-width border-style(required) border-color

A

what is the syntax for the css border property

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

this is important so that the site and all of its pages can have a consistent look, this gives less risk of customers leaving due to the site looking confusing and clumsy

A

why is it important to define font and style choices early in development

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

this is a rule that can be set within css and allows content font and styles to be dynamic depending on the device (laptop/phone) or media(screen/printed paper) it is intended for

A

what is the css
media rule

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

describe what the css property
box-sizing

A

this css property defines how the width and height of an element are calculated

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

give 4 factors that contribute to good typography

A

these include:
1.visual contrast between one font and another
2.Visual contrast among text blocks, headlines, and the surrounding white space
3.Using font styles such as bold sparingly
4.Good pattern and structure of text. It is this that the user will first see before reading anything. Seeing a wall of black text will likely lead to them leaving

34
Q

describe the value
border-box
from the css box-sizing property

A

selecting this value for the css content-box means that:

The width and height properties (and min/max properties) includes content, padding and border. In this case the border will be the width and height and the content will be re calculated

35
Q

how is every
**html element **
described

A

these are described by a rectangle known as the
box model

36
Q

in regards to the box model:
this is where the actual content is placed

A

describe the
content
of the box model

37
Q

this is always a value between 0 (transparent) and 1 (opaque)

A

what are valid values for the css alpha channel

38
Q

give 4 characteristics of
Portable Network Graphics (PNG)

A

these include:
1.Designed for the web
2.Supports transparency
3.Does not compress as well as jpg
4.Not recommended for photograph distribution across a network

39
Q

these include:
1.visual contrast between one font and another
2.Visual contrast among text blocks, headlines, and the surrounding white space
3.Using font styles such as bold sparingly
4.Good pattern and structure of text. It is this that the user will first see before reading anything. Seeing a wall of black text will likely lead to them leaving

A

give 4 factors that contribute to good typography

40
Q

these include:
1.Up to 24-bit containing millions of colours
2.Uses lossy compression
3.Typically used for photographs

A

give 3 characteristics of
Joint Photographic Experts Group (JPEG)

41
Q

what is the
web open font format (WOFF)

A

these are are compressed opentype or truetype fonts and have additional xml metadata

42
Q

this is determined on whether the element is a block or inline element

A

what determines the
flow of a html elements

43
Q

in regards to the box model:
this lets you place a border around the content which can then be styled

A

describe the
border
of the box model

44
Q

describe in 4 points a
block level element

A

properties of this include:
* A block-level element always starts on a new line
* the browsers automatically add some space (a margin) before and after the element.
* A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
* Common block elements include <.div> and <.p>

45
Q

give 2 factors that contribute to bad typography

A

these include:
1.Lack of pattern leading the user to become confused as to how content is structured
2.Dense and crammed text lack of whitespace

46
Q

some notes on this include:

1.Some fonts work better on screen than they do printed and vice versa
2.Fonts used should be tested on all media that you expect users to consume the information
3.The box model will play an important role with how your white space is determined
4.Desired fonts may not be available on all users systems so make a fallback list begginning with the desired font and finishing with a CSS web safe font

A

give 4 notes regarding typography

47
Q

in regards to the box model:
this lets you add a margin around the border

(NOTE: margins placed vertically next to each other can merge this is known as a callapsed margin)

A

describe the
margin
of the box model

48
Q

to accomplish this the css property border can be used

A

what css property can be used to style a border

49
Q

selecting this value for the css content-box means that:

The width and height properties (and min/max properties) includes content, padding and border. In this case the border will be the width and height and the content will be re calculated

A

describe the value
border-box
from the css box-sizing property

50
Q

in regards to the box model:
this allows you to define space between the content and the border

NOTE:(when using a border you will almost always need padding to allow room between content and border)

A

describe the
padding
of the box model

51
Q

how do we define a colour in css using a colour name

A

Simply state the name of a colour
Color: red;

52
Q

what are the 4 parts of the
box model

A

this is made up of:
1. content
2. padding
3. border
4. margin

53
Q

what is the css
media rule

A

this is a rule that can be set within css and allows content font and styles to be dynamic depending on the device (laptop/phone) or media(screen/printed paper) it is intended for

54
Q

what 4 ways can we define a colour in css

A

this can be accomplished using:
1. colour name
2. hexadecimal value
3. RGB value
4. HSL value

55
Q

how do we define a colour in css using a hexadecimal value

A

Give a hexadecimal value of a colour
Color: #ff0000

56
Q

what are valid values for the css alpha channel

A

this is always a value between 0 (transparent) and 1 (opaque)

57
Q

describe the
padding
of the box model

A

in regards to the box model:
this allows you to define space between the content and the border

NOTE:(when using a border you will almost always need padding to allow room between content and border)

58
Q

these can be used by developers to open up design possibilities

when using these if a user does not have the desired font then it can be quickly downloaded using this file format

A

what are
web open font format (WOFF)
used for

59
Q

Simply state the name of a colour
Color: red;

A

how do we define a colour in css using a colour name

60
Q

describe the term
typography

A

this is how text is styled and plays an important role in how content is displayed (usability) but should also match the business requirement

61
Q

what is the syntax for the css border property

A

the syntax for this is:
border: border-width border-style(required) border-color

62
Q

this is how text is styled and plays an important role in how content is displayed (usability) but should also match the business requirement

A

describe the term
typography

63
Q

what are
web open font format (WOFF)
used for

A

these can be used by developers to open up design possibilities

when using these if a user does not have the desired font then it can be quickly downloaded using this file format

64
Q

what is css
margin callapse

A

this is where two margins of elements merge together instead of stacking

65
Q

describe the
content
of the box model

A

in regards to the box model:
this is where the actual content is placed

66
Q

this is where two margins of elements merge together instead of stacking

A

what is css
margin callapse

67
Q

describe the value
content-box
from the css box-sizing property

A

selecting this value for the css content-box means that:

The width and height properties (and min/max properties) includes only the content. Border and padding are not included and so if used will increase the overall element size

NOTE: this is the default value that elements hold

68
Q

these include:
1.Font types
2.Font sizes
3.Heading and sub heading sizes
4.Paragraph spacing

A

what are 4 font and style choices that should be known early in development

69
Q

these include:
1.Is graphics that are described using xml
2.Can draw lines images and text
3.Does not rely on pixel information so can scale in size without quality loss

A

give 3 characteristics of
Scalable Vector Graphics Format (SVG)

70
Q

what is the syntax for the css property
box-sizing

A

the syntax for this is:
box-sizing: content-box | border-box | initial | inherit;

71
Q

to avoid
“corruption” or “control” of the styling of your page
what are 3 good design choice

A

to avoid this good design choices would be:
* choose a few select fonts and sizes
* limit your font choices to those that are readily available on users devices
* design for legibility and for usability purposes you should always try to avoid using text as graphics.

72
Q

this is made up of:
1. content
2. padding
3. border
4. margin

A

what are the 4 parts of the
box model

73
Q

what determines the
flow of a html elements

A

this is determined on whether the element is a block or inline element

74
Q

the syntax for this is:
box-sizing: content-box | border-box | initial | inherit;

A

what is the syntax for the css property
box-sizing

75
Q

these include:
1. Joint Photographic Experts Group (JPEG)
2. Graphics Interchange Format (GIF)
3. Portable Network Graphics (PNG)
4. Scalable Vector Graphics Format (SVG)

A

what are the 4 common graphic formats found on the web

76
Q

give 3 characteristics of
Scalable Vector Graphics Format (SVG)

A

these include:
1.Is graphics that are described using xml
2.Can draw lines images and text
3.Does not rely on pixel information so can scale in size without quality loss

77
Q
  1. in genarl this should be avoided
  2. where it cannot be avoided such as in a logo then alt text must be supplied
A

give two points regarding
text as graphics

78
Q

selecting this value for the css content-box means that:

The width and height properties (and min/max properties) includes only the content. Border and padding are not included and so if used will increase the overall element size

NOTE: this is the default value that elements hold

A

describe the value
content-box
from the css box-sizing property

79
Q

give 3 characteristics of
Joint Photographic Experts Group (JPEG)

A

these include:
1.Up to 24-bit containing millions of colours
2.Uses lossy compression
3.Typically used for photographs

80
Q

this css property defines how the width and height of an element are calculated

A

describe what the css property
box-sizing

TT284: block 1 - Basic Web Technologies (7 decks)

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