Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

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

(80 cards)

Start Studying
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
State the rgb values of a colour May also use RGBA a is alpha or transparency Color: rgb(255, 0, 0)
how do we define a colour in css using a RGB value
26
what css property can be used to style a border
to accomplish this the css property border can be used
27
how do we define a colour in css using a RGB value
State the rgb values of a colour May also use RGBA a is alpha or transparency Color: rgb(255, 0, 0)
28
give 4 notes regarding typography
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 
29
the syntax for this is: **border**: border-width border-style (required) border-color
what is the syntax for the css border property
30
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
why is it important to define font and style choices early in development
31
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
what is the css **media rule**
32
describe what the css property **box-sizing**
this css property defines how the width and height of an element are calculated
33
give 4 factors that contribute to good typography
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
describe the value **border-box** from the css box-sizing property
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
how is every **html element ** described
these are described by a rectangle known as the **box model**
36
in regards to the box model: this is where the actual content is placed
describe the **content** of the box model
37
this is always a value between 0 (transparent) and 1 (opaque)
what are valid values for the css alpha channel
38
give 4 characteristics of **Portable Network Graphics (PNG)**
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
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
give 4 factors that contribute to good typography
40
these include: 1.Up to 24-bit containing millions of colours 2.Uses lossy compression 3.Typically used for photographs
give 3 characteristics of **Joint Photographic Experts Group (JPEG)**
41
what is the **web open font format (WOFF)**
these are are compressed opentype or truetype fonts and have additional xml metadata
42
this is determined on whether the element is a block or inline element
what determines the **flow of a html elements**
43
in regards to the box model: this lets you place a border around the content which can then be styled
describe the **border** of the box model
44
describe in 4 points a **block level element**
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
give 2 factors that contribute to bad typography
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
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 
give 4 notes regarding typography
47
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)
describe the **margin** of the box model
48
to accomplish this the css property border can be used
what css property can be used to style a border
49
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
describe the value **border-box** from the css box-sizing property
50
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)
describe the **padding** of the box model
51
how do we define a colour in css using a colour name
Simply state the name of a colour Color: red;
52
what are the 4 parts of the **box model**
this is made up of: 1. content 2. padding 3. border 4. margin
53
what is the css **media rule**
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
what 4 ways can we define a colour in css
this can be accomplished using: 1. colour name 2. hexadecimal value 3. RGB value 4. HSL value
55
how do we define a colour in css using a hexadecimal value
Give a hexadecimal value of a colour Color: #ff0000
56
what are valid values for the css alpha channel
this is always a value between 0 (transparent) and 1 (opaque)
57
describe the **padding** of the box model
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
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
what are **web open font format (WOFF)** used for
59
Simply state the name of a colour Color: red;
how do we define a colour in css using a colour name
60
describe the term **typography**
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
what is the syntax for the css border property
the syntax for this is: **border**: border-width border-style (required) border-color
62
this is how text is styled and plays an important role in how content is displayed (usability) but should also match the business requirement
describe the term **typography**
63
what are **web open font format (WOFF)** used for
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
what is css **margin callapse**
this is where two margins of elements merge together instead of stacking
65
describe the **content** of the box model
in regards to the box model: this is where the actual content is placed
66
this is where two margins of elements merge together instead of stacking
what is css **margin callapse**
67
describe the value **content-box** from the css box-sizing property
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
these include: 1.Font types 2.Font sizes 3.Heading and sub heading sizes 4.Paragraph spacing
what are 4 font and style choices that should be known early in development
69
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
give 3 characteristics of **Scalable Vector Graphics Format (SVG)**
70
what is the syntax for the css property **box-sizing**
the syntax for this is: **box-sizing**: content-box | border-box | initial | inherit;
71
to avoid **"corruption" or "control" of the styling of your page** what are 3 good design choice
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
this is made up of: 1. content 2. padding 3. border 4. margin
what are the 4 parts of the **box model**
73
what determines the **flow of a html elements**
this is determined on whether the element is a block or inline element
74
the syntax for this is: **box-sizing**: content-box | border-box | initial | inherit;
what is the syntax for the css property **box-sizing**
75
these include: 1. Joint Photographic Experts Group (JPEG) 2. Graphics Interchange Format (GIF) 3. Portable Network Graphics (PNG) 4. Scalable Vector Graphics Format (SVG)
what are the 4 common graphic formats found on the web
76
give 3 characteristics of **Scalable Vector Graphics Format (SVG)**
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
1. in genarl this should be avoided 2. where it cannot be avoided such as in a logo then alt text must be supplied
give two points regarding **text as graphics**
78
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
describe the value **content-box** from the css box-sizing property
79
give 3 characteristics of **Joint Photographic Experts Group (JPEG)**
these include: 1.Up to 24-bit containing millions of colours 2.Uses lossy compression 3.Typically used for photographs
80
this css property defines how the width and height of an element are calculated
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.
© 2025 Bold Learning Solutions. Terms and Conditions