Part 5 - The CSS Box Model – web typography, ‘color’ and graphics Flashcards
describe the
margin
of the box model
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
border
of the box model
in regards to the box model:
this lets you place a border around the content which can then be styled
these are described by a rectangle known as the
box model
how is every
**html element **
described
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
give 2 factors that contribute to bad typography
what is the
“flow”
of a html document
this describes how an element will be positioned given no positioning style
why is it important to define font and style choices early in development
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
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
describe 3 features of css
margin callapse
what are the 4 common graphic formats found on the web
these include:
1. Joint Photographic Experts Group (JPEG)
2. Graphics Interchange Format (GIF)
3. Portable Network Graphics (PNG)
4. Scalable Vector Graphics Format (SVG)
this can be accomplished using:
1. colour name
2. hexadecimal value
3. RGB value
4. HSL value
what 4 ways can we define a colour in css
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 do we define a colour in css using a HSL value
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
give 4 characteristics of
Portable Network Graphics (PNG)
this describes how an element will be positioned given no positioning style
what is the
“flow”
of a html document
what are 4 font and style choices that should be known early in development
these include:
1.Font types
2.Font sizes
3.Heading and sub heading sizes
4.Paragraph spacing
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.
to avoid
“corruption” or “control” of the styling of your page
what are 3 good design choice
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
in 3 points describe an
inline element
give two points regarding
text as graphics
- in genarl this should be avoided
- where it cannot be avoided such as in a logo then alt text must be supplied
give 3 characteristics of
Graphics Interchange Format (GIF)
these include:
1. Uses lossy compression (image must use same colour palette)
2. 8-bit images meaning 256 colours
3. Supports transparency
these include:
1. Uses lossy compression (image must use same colour palette)
2. 8-bit images meaning 256 colours
3. Supports transparency
give 3 characteristics of
Graphics Interchange Format (GIF)
describe 3 features of css
margin callapse
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 do we define a colour in css using a HSL value
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%)
Give a hexadecimal value of a colour
Color: #ff0000
how do we define a colour in css using a hexadecimal value
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>
describe in 4 points a
block level element
in 3 points describe an
inline element
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
these are are compressed opentype or truetype fonts and have additional xml metadata
what is the
web open font format (WOFF)
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
what css property can be used to style a border
to accomplish this the css property border can be used
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)
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
the syntax for this is:
border: border-width border-style(required) border-color
what is the syntax for the css border property
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
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
describe what the css property
box-sizing
this css property defines how the width and height of an element are calculated
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
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
how is every
**html element **
described
these are described by a rectangle known as the
box model
in regards to the box model:
this is where the actual content is placed
describe the
content
of the box model
this is always a value between 0 (transparent) and 1 (opaque)
what are valid values for the css alpha channel
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
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
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)
what is the
web open font format (WOFF)
these are are compressed opentype or truetype fonts and have additional xml metadata
this is determined on whether the element is a block or inline element
what determines the
flow of a html elements
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
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>
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
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
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
to accomplish this the css property border can be used
what css property can be used to style a border
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
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
how do we define a colour in css using a colour name
Simply state the name of a colour
Color: red;
what are the 4 parts of the
box model
this is made up of:
1. content
2. padding
3. border
4. margin
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
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
how do we define a colour in css using a hexadecimal value
Give a hexadecimal value of a colour
Color: #ff0000
what are valid values for the css alpha channel
this is always a value between 0 (transparent) and 1 (opaque)
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)
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
Simply state the name of a colour
Color: red;
how do we define a colour in css using a colour name
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
what is the syntax for the css border property
the syntax for this is:
border: border-width border-style(required) border-color
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
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
what is css
margin callapse
this is where two margins of elements merge together instead of stacking
describe the
content
of the box model
in regards to the box model:
this is where the actual content is placed
this is where two margins of elements merge together instead of stacking
what is css
margin callapse
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
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
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)
what is the syntax for the css property
box-sizing
the syntax for this is:
box-sizing: content-box | border-box | initial | inherit;
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.
this is made up of:
1. content
2. padding
3. border
4. margin
what are the 4 parts of the
box model
what determines the
flow of a html elements
this is determined on whether the element is a block or inline element
the syntax for this is:
box-sizing: content-box | border-box | initial | inherit;
what is the syntax for the css property
box-sizing
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
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
- in genarl this should be avoided
- where it cannot be avoided such as in a logo then alt text must be supplied
give two points regarding
text as graphics
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
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
this css property defines how the width and height of an element are calculated
describe what the css property
box-sizing
