Brainscape's Knowledge GenomeTM

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


See full index

Coding > CSS > Flashcards

CSS Flashcards

1
Q

What are the ‘methods’ for writing CSS called? / what is the word for any coding language’s ‘language’?

A

syntaxes

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

Give two types of syntaxes for CSS / two ways of writing and applying CSS

A

ruleset in CSS
and
inline style (used in HTML)

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

What do all CSS syntaxes use?

A

declarations

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

What do declarations do in CSS

A

apply style to the selected element

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

What is the extension for CSS files?

A

.css

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

How do you write CSS within an HTML file?

A

by enclosing the code in a style tag < style >

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

Define this Ruleset(.css) syntax term: selector

selector {

}

A

the beginning of the ruleset used to target the element that will be styled

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

Define this Ruleset syntax term: declaration block

A

the code in-between (and including) the curly braces { } that contains the CSS declaration(s).

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

Define this ruleset (.css) syntax term: declaration

A

the group name for a property and value pair that applies a style to the selected element

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

Define this Ruleset syntax term: property

A

The first part of the declaration that signifies what visual characteristic of the element is to be modified

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

Define this Ruleset syntax term: value

A

the second part of the declaration that signifies the value of the property

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

Define this Ruleset inline style term: opening tag

A

the start of an HTML element. This is the element that will be styled

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

Define this Ruleset inline style term: attribute

A

the style attribute is used to add CSS inline styles to an HTML element

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

Define this Ruleset inline style term: declaration

A

the group name for a property and value pair that applies a style to the selected element

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

Define this Ruleset inline style term: property

A

the first part of the declaration that signifies what visual characteristic of the element is to be modified

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

Define this Ruleset inline style term: value

A

the second part of the declaration that signifies the value of the property

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

How do you close off inline style attributes?

A

With a semicolon ;

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

Are inline styles the best way to style HTML?

A

no

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

What is the CSS code written/nested within the < style > element of HTML called?

A

internal stylesheet

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

Where must an internal stylesheet be placed?

A

Within the < head > element

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

Why is an external stylesheet useful?

A

because you don’t have to sacrifice the readability and maintainability of your HTML code

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

When using an external style sheet (.css file) what must you do?

A

Link the .css file to the .html file

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

How do you like a .css file to a .html file?

A

with the < link > element, which must be placed within the < head >

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

What two attributes does a < link > linking a .css file to a .html file need?

A

an href=”” which links to the .css file

a real attribute, which describes the relationship between the HTML file and the CSS file

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

What should the red attribute be set to when linking a .css file to an .html file?

A

rel = ‘stylesheet’

< link href=”insert link to .css file here” rel=’stylesheet’ >

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

What is the symbol for universal selector in CSS?

A

the asterisk *

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

How do you select an HTML element by its class?

A

a period ( . ) must be prepended to the class’s name ie .brand (with brand being class=’brand’ in HTML

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

How do you style a single element uniquely?

A

using the id=”” attribute in HTML

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

How many values does the class=’’ attribute accept?

A

Many

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

How many values does the id=”” attribute accept?

A

only one, and can be used only once per page

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

how do you select an element’s id in CSS?

A 
prepend id with # 
#id, #large-title
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

how can the attribute selector be used?

A

to target HTML elements that already contain attributes, and elements of the same type can be targeted differently by their attribute or attribute value

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

how do you select attributes in CSS?

A

with [ ] around the attribute
ie. [href] {
}

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

What are pseudo-class selectors?

A

selectors that change the appearance of elements after user interaction

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

give examples of pseudo-class selectors

A

:focus :visited :disabled :active

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

how is a pseudo-class attached to a selector

A

with a colon
ie: p:hover {
}

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

what is specificity?

A

the order in which the browser decides which CSS styles will be displayed

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

What is best practice with specificity?

A

to style elements with the lowest degree of specificity so that if an element needs a new style, it is easy to override

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

what is the most specific selector in CSS

A

the id selector

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

how do you select a class

A

. with a period

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

how can you make styles easier to edit?

A

style with a type selector

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

what is it called when we combine multiple selectors?

A

chaining

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

What does the font-weight property control in CSS?

A

how bold or thin the text appears

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

What properties can you use with text-align?

A

justify, left, right, center

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

what does foreground color apply to?

A

the element being styled with color - ie giving a header a color is giving it a foreground color

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

what does the css syntax for giving an element a background image look like?

A

.main-banner {
background - image: url( ‘https: insert link here ‘ );
}

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

what does the relative path for an image look like?

A

for image with file name mountains.jpg:

url(‘images/mountains.jpg’);

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

What can you use to override any style in css?

A

! important ;

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

how do you affect the transparency of an element?

A

with the opacity: property

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

What values can you give to the opacity property?

A

a number in the range 0.0 to 1.0
or
a percentage from 0% to 100%

h2 {
opacity: 0.50;
 or
opacity: 50%
  }
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

what is meant by the box model?

A

elements on the page being interpreted as “living” inside a box

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

What does the box model include?

A

a page’s content’s area size (width and height), and its padding, border, and margin

width, height, padding, border, mardin

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

how many dimensions does an element’s content have?

A

two: height and width

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

What are the dimensions of an HTML box set to by default?

A

by default it holds the raw contents of the box

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

what happens when an element’s dimensions are set in pixels (px)

A

the element will be the same size on all devices - something that fits a laptop screen will overflow a phone or tablet screen

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

What can you set to change a border?

A

width, style, and colour

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

how do you changer a border’s width?

A

in pixels, or with keywords: thin, medium, or thick

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

How many styles can web browsers render for borders?

A

10 - including: none; dotted; solid

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

What is the default border?

A

medium none color

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

how do you modify the corners of an element’s border box

A

with the border-radius property

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

how do you create a border that is a perfect circle?

A

by creating an element with the same width and height, then setting the radius to half the width of the box, which is 50%
border-radius: 50%;

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

when would border-radius: 100%; not give a perfect circle border?

A

when the height and width are not the same, ie you need a square element to create a circle border

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

What is the space between the contents of a box and the borders of a box called?

A

the padding

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

what is padding

A

the space between the borders of a box and the contents of a box
padding is like the space between a picture and the frame

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

how can you be more specific about padding?

A 
with more specific padding properties:
padding-right
padding-left
padding-top
padding-bottom
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
66
Q

What do you call a declaration that uses multiple properties as values?

A

shorthand property

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

how does padding shorthand work

A

in clockwise rotation

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

how do you use padding shorthand if the left and right padding are equal?

A

with 3 values, the first is padding-top, second value is padding left and right, and the last is padding-bottom

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

how do you use padding shorthand if padding top and bottom are equal, and padding left and right are equal?

A

with two values, the first sets padding top and bottom, and the second sets padding right and left

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

What does margin refer to?

A

the space directly outside of the box

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

How can you use margin to centre content?

A

with the instructions: margin: 0 auto;

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

how does margin: 0 auto; work?

A

the 0 sets the top and bottom margins to 0 pixels, and the auto instructs the browser to adjust left and right margins until the element is centred within the containing element

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

What needs to be set for an element to be centred?

A

the width

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

when is it not possible to centre an element?

A

when it takes up the full width of the page

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

padding is space added ____ an element’s border

A

inside

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

margin is space added ___ an element’s border

A

outside

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

what is the difference between vertical margins and horizontal margins?

A

vertical margins collapse, whereas horizontal margins do not collapse

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

how far apart would two side-by-side elements be?

A

as far apart as the sum of their adjacent margins

vertical margins do NOT do this

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

do horizontal margins collapse?

A

no

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

do vertical margins collapse?

A

yes

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

What can you do to prevent elements changing size too much on different devices?

A

with the min-width and max-width properties, as well as min and max height

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

what happens if an element’s max-height is set too low?

A

the content might spill out of the box, making the content illegible

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

how are the total dimensions of an element calculated?

A

by adding all of the vertical dimensions and all of horizontal dimensions together

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

how do you control overflow?

A

with the overflow property

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

what are some values you can use with the overflow property?

A

hidden (any content that overflows is hidden) scroll (any content that overflows can be made visible with a scrollbar) visible (overflow content is displayed outside of the containing element - this is the default value)

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

What is the default overflow value?

A

visible

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

Where is the overflow property set?

A

On a parent element, so that the browser is instructed properly on how to render child elements too

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

What is a browser’s default stylesheet called?

A

user agent stylesheet

user agent in this case is a technical term for the browser

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

When properties are set to 0, do they need a unit of measurement?

A

no

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

How do developers start with a clean slate for their CSS coding?

A 
with:
* {
margin: 0;
padding: 0;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
91
Q

how do you hide elements?

A

with the visibility propety

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

what can you use to set the visibility property?

A

hidden (hides an element - but still leaves space where the element was intended to be), visible (displays an element), collapse (collapses an element)

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

What’s the difference between display: none and visibility: hidden?

A

display: none will completely remove an element from a page
visibility: hidden will not be visible but the space reserved for the element will be visible

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

How do you change the spacing between individual letters in text?

A

with the letter-spacing property

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

What is the limitation of the box model?

A

everything added to the box, such as borders, padding, height and width, etc increases the box ‘size’, making it difficult to accurately size a box

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

What is the ‘formula’ for the actual rendered width of an element’s box when content-box is the value of the box-sizing property?

A

width + padding + border = actual rendered width

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

What property controls the type of box model the browser should be using?

A

the box-sizing property

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

What is the default value of the box-sizing property?

A

content-box

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

How do you ‘reset’ the box model?

A

by assigning the value border-box to the box-sizing property:

box-sizing: border-box;

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

What does the value border-box do the property box-sizing?

box-sizing: border-box;

A

height and width of the box remain fixed, and border thickness and padding will be included inside of the box - therefore the overall dimensions of the box don’t change

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

What is the universal selector?

A
  • {

}

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

All HTML elements are ____?

A

boxes

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

All HTML elements are boxes made up of _ components

A

4

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

What are the 4 components of HTML elements (box model)

A

content container, padding, border, margin

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

What is the order of the box model?

A 
CPBM 
Content
Padding
Border
Margin

CPBM!

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

How do you /does the browser calculate the width of the box of an HTML element?

A

the sum of: content width + padding left and padding right width + border left and border right width = total width of an HTML element’s box

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

How do you / does the browser calculate the total size of an HTML element’s height?

A

the sum of: content height + padding top and padding bottom height + border top and border bottom height = total height of an HTML element’s box

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

Why is margin not included in the calculations to find an HTML element’s box height/width size?

A

because margin adds space only around the outside of an HTML element’s box, so it doesn’t affect how big or small an HTML element box is (only affects how near or far other HTML elements can come to it)

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

What is the default position for block-level elements?

A

on the left side of the browser

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

How can you change the default position of an element?

A

by changing its position property

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

Give 5 values the position property can take as values

A

static (refers to default behaviour), relative, absolute, fixed, sticky

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

What needs to go with the declaration ‘position: relative’?

A

offset properties: top, bottom, right, left, which can be specified in pixels

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

What happens when you set ‘position’ to absolute?

A

other elements ignore that element and will act like it’s not present on the page, and scrolls outside of view of the user scrolls away

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

What happens when you set an element’s ‘position’ to fixed?

A

it is fixed in place and stays on the page when the user scrolls

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

What is ‘position: fixed;’ often used for?

A

Navigation bars or fixed headers at the top of pages

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

Which position declarations stay in the normal flow of a document?

A

static, relative, sticky

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

Which position declarations are removed from the normal flow of a document?

A

fixed and absolute

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

What property controls how far back or far forward an element should appear when elements on the page overlap?

A

the z-index property

can be thought of as the depth element, with deeper elements appearing behind shallower elements

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

What values does the z-index property accept?

A

integer values, which instruct the browser on the order elements should be layered on the page

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

What element property does z-index not work on?

A

static

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

give 3 values for the display property

A

inline, block, inline-block

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

Which elements have default display of ‘inline’?

A

< em >, < strong >, < a >

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

What does the display: inline; property do to elements?

A

Inline elements have a tight box around them, only taking up the necessary amount of space
and renders inline elements on the same line as other inline elements immediately before or after if there are any
inline elements can share lines with other elements

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

What can you not declare for elements that are display: inline by default?

A

height and width

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

What are elements called that are not displayed in the same line as the content around them?

A

block-level elements

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

What is the default width and height of block-level elements?

A

block-level elements fill the width of a page by default, and their height is the necessary size to accommodate their content

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

What are some elements that are block-level by default?

A

all headings ( < h1 > to < h6 > ), < p >, < div >, and < footer >

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

What is the float property useful for, and commonly used for?

A

moving an element as far left or as right as possible, and wrapping text around an image

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

What must float elements have specified?

A

the width

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

What property specifies how elements should behave when they bump into each other on a page?

A

the ‘clear’ property

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

What values can the clear property take?

A

left (left side of the element will not touch any other elements within the same containing element)
right (right side of the element will not touch any other elements within the same containing element)
both (neither side of the element will touch any other element within the same containing element)
none (the element can touch either side)

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

In terms of display, what is the difference between < div > and < span >

A

Div is a block element, which takes up the whole space of a line
Span is an inline element

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

What is the difference between inline and inline-block?

A

inline-block allows you to set width and height

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

What does the property ‘display’ do?

A

set an element’s behaviour to inline, inline-block, or block

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

Do inline-block elements start on a new line?

A

no

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

What are the 3 ways color can be described in CSS?

A

named colors: also known as keyword colors
RBG: numeric values that describe a mix of red green and blue
HSL: numeric values that describe a mix of hue, saturation, and lightness

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

How do you style foreground, and background color?

A

color:

background-color:

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

What is the syntax used for hex colors?

A

hexadecimal, beginning with #

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

How many characters are used in hexadecimal syntax?

A

3 or 6

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

How many digits does the hexadecimal system have?

A

16 ( 0 - 15 ), represented by the letters A - F

141
Q

What is the syntax for RGB?

A

color: rgb(x, x, x);

142
Q

What is the range of RGB values?

A

Each of the 3 values can have a number ranging from 0-255

143
Q

What is the total number of colors that RGB and HEX can represent?

A

16,777,216

144
Q

What does HSL stand for?

A

Hue, Saturation, Lightness

144
Q

What does HSL stand for?

A

Hue, Saturation, Lightness

145
Q

What is the numerical range of hue in HSL?

A

0 - 360 degrees of hue

146
Q

How are saturation and lightness represented in HSL?

A

with percentages

147
Q

What does hue actually refer to?

A

the angle on the color wheel: for example, red is 0, green is 120, blue is 240,

148
Q

Where is ‘normal’ lightness in HSL?

A

50%

149
Q

How do you change opacity using HSL?

A

add A to the end of HSL - HSLA (hue saturation lightness alpha)

150
Q

How is alpha (opacity) written in HSLA

A

as a decimal number from 0 to 1

151
Q

What happens if Alpha in HSLA is set to 0?

A

the colour would be completely transparent

152
Q

What happens if Alpha in HSLA is set to 1?

A

The colour would be completely opaque

153
Q

Can you add opacity to RGB?

A

yes, with alpha - RGBA

154
Q

How do you add opacity to HEX code?

A

With two extra values for a 6 number hex or 1 extra value for a 3 number hex

155
Q

What is the range of opacity in HEX?

A

00 ( transparent) to FF (opaque)

156
Q

What is the named colour keyword for zero opacity?

A

transparent

157
Q

How do you specify a typeface with multiple words?

A

put it in quotation marks - ‘Times New Roman’

158
Q

What are web safe fonts?

A

fonts that appear the same across all browsers and operating systems

159
Q

What is it called when you specify a group of / more than one font(s) in ‘font-family:’

A

font stack

used for having fallback fonts

160
Q

What is a fallback font?

A

a font at the end of a font stack that is used if the other fonts in the stack aren’t available

161
Q

What else can be added as a fallback in a font stack?

A

serif or sans-serif

162
Q

What does the font-weight property do?

A

controls how bold or thin text appears

163
Q

How do you specify the font-weight property?

A

with keyword values (bold, normal, lighter, bolder)

or numerical values

164
Q

What is the range of numerical values specified for font-weight?

A

1 (lightest) to 1000 (boldest)

165
Q

What is the numerical value for font-weight that is equal to font-weight: normal?

A

400

166
Q

What is the numerical value for font-weight that is equal to font-weight: bold?

A

700

167
Q

How do you italicise text?

A

with the font-style property

168
Q

What is the default value for font-style?

A

normal

169
Q

What is the property for styling text all uppercase or lowercase?

A

text-transform

170
Q

What property do you use for adjusting horizontal space between individual characters in an element?

A

letter-spacing

171
Q

What property do you use for adjusting horizontal space between words in an element?

A

word-spacing

172
Q

What value in units do the word-spacing and letter-spacing properties take?

A

pixels (px) or em

173
Q

What property do you use to control how tall each line of text is?

A

line-height

174
Q

What values can line-height take?

A

unitless numbers, or length values in pixels, percentages, or in em

175
Q

What is the preferred value for line-height and why?

A

a unitless number, because it is responsible based on the size of the text - chaining size of the font automatically readjusts the line height

176
Q

How do you connect your HTML document to font hosts?

A

with < link > in the < head > element in HTML

177
Q

What can you use as an alternative to < link > in the head of the HTML to source a font?

A

use the @font-face ruleset in the CSS stylesheet

178
Q

Give different font file formats

A

OTF - open type font
TTF - true type font
WOFF - web open font format
WOFF2 - web open font format 2

179
Q

What HTML can override all CSS style declarations?

A

in-line style in HTML

180
Q

How do you create a CSS variable?

A

give a name with two – in front

–penguin-skin:

181
Q

What is the CSS declaration for strikethrough?

A

text-decoration: line-through

182
Q

what is a flex container

A

an element on a page that contains flex items

183
Q

are children elements of a flex container flex items?

A

yes

184
Q

how do you designate an element as a flex container?

A

set the element’s display property to flex or inline-flex

185
Q

what elements can be flex containers?

A

any

186
Q

how do you position flex elements from left to right?

A

with the property justify-content:

187
Q

give 5 common values for the justify-content: property

A

flex-start; all items will be positioned in order starting from the left of the parent container, with no extra space between or before them

flex-end; all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them

center; all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.

space-around; items will be positioned with equal space before and after each item, resulting in double the space between elements.

space-between; items will be positioned with equal space between them, but no extra space before the first or after the last elements.

no extra space means: margins and borders will be respected, but no more space (than is specified in the style rule for the particular element) will be added between elements.

188
Q

how do you space elements vertically using flex?

A

with the align-items: property

189
Q

give 5 common values for the align-items property in flex

A

flex-start; all elements will be positioned at the top of the parent container

flex-end; all elements will be positioned at the bottom of the parent container

center; the center of all elements will be positioned halfway between the top and bottom of the parent container

baseline; the bottom of the content of all items will be aligned with each other

stretch; if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch)

190
Q

what does the flex-grow property do?

A

allows us to specify if items should grow to fill a container and which items should grow proportionally more or less than others

191
Q

what is the default value of flex-shrink?

A

1

192
Q

what is the default value of flex-grow?

A

0

193
Q

margins are ___ by flex-grow and flex-shrink

A

margins are unaffected by flex-grow and flex-shrink

194
Q

how can you set width and height with flex?

A

with the flex-basis property

195
Q

what does flex-basis do?

A

allows us to specify the width of an item before it stretches or shrinks

196
Q

what does the flex property allow you to code?

A

flex-grow, flex-shrink, and flex-basis;

197
Q

what is the order for declaring flex values within flex: ?

A

flex-grow, flex-shrink, flex-basis;

198
Q

what does flex-wrap do?

A

moves flex items to the next line when necessary

199
Q

what 3 values can flex-wrap accept?

A

wrap; child elements of a flex container that don’t fit into a row will move down to the next line

wrap-reverse; the same functionality as wrap, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from a wrap container will become the second in wrap-reverse and the second row from the wrap container will become the first in wrap-reverse)

nowrap; prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.

200
Q

what is the default value of flex-wrap?

A

nowrap

201
Q

the flex-wrap property is declared on ___ ?

A

the flex-wrap property is declared on flex containers

202
Q

align-items is for aligning elements within _ ___ __

A

align-items is for aligning elements within a single row

203
Q

how do you align the content of a flex-container that has multiple rows?

A

with the align-content property

204
Q

give some commonly used align-content values

A

flex-start; all rows of elements will be positioned at the top of the parent container with no extra space between

flex-end; all rows of elements will be positioned at the bottom of the parent container with no extra space between

center; all rows of elements will be positioned at the center of the parent element with no extra space between

space-between; all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last

space-around; all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element

stretch; if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value)

205
Q

flex containers have ___ axes

A

flex containers have 2 axes

206
Q

flex containers have 2 axes, a __ axis and a ___ axis

A

a main axis and a cross axis

207
Q

the ‘main’ axis for flex items is ___

A

the main axis is horizontal

208
Q

by default the cross axis is ___

A

the cross axis is vertical

209
Q

what properties are used with the main axis?

A

justify-content, flex-wrap, flex-grow, flex-shrink

210
Q

what properties are used to position items with the cross axis?

A

align-items, align-content

211
Q

are the main and cross axis interchangeable?

A

yes

212
Q

how can you switch the main and the cross axis to interchange them?

A

with the flex-direction property

flex-direction: column; orders flex items vertically, not horizontally

213
Q

what are the 4 values that flex-direction can accept?

A

row; elements will be positioned from left to right across the parent element starting from the top left corner (default)

row-reverse; elements will be positioned from right to left across the parent element starting from the top right corner

column; elements will be positioned from top to bottom of the parent element starting from the top left corner

column-reverse; elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner

214
Q

where is the flex-direction property declared?

A

on flex containers

215
Q

the shorthand flex-flow: property is used to declare what properties in one line?

A

flex-flow is used to declare both flex-wrap and flex-direction in one line

216
Q

the flex-flow property is declared on __

A

flex-flow property is declared on flex containers

217
Q

the first value in the flex-flow declaration is ____

the second value in the flex-flow declaration is ____

A

the first value is flex-direction

the second value is flex-wrap

218
Q

to set up a grid you need ____ and _____

A

a grid container and grid items

219
Q

to turn an HTML element into a grid container you must set the element’s ___ property to one of two values: ____ or ____

A

set the element’s display property to grid (for a block level grid) or inline-grid (for an inline grid)

220
Q

by default grids contain ____ column

A

by default grids contain 1 column

221
Q

how do you define columns of a grid?

A

with the css property grid-template-columns

222
Q

what 2 changes does the grid-template-columns create?

A

defines the number of columns in the grid
and
sets the width of each column

223
Q

what measurements can you use to set the size of a grid’s columns?

A

size in pixels, or as percentages of the total size of the grid

224
Q

what property do you use to set the number and size of rows in a grid?

A

grid-template-rows:

225
Q

rows are defined as a percentage of the grid’s ___

A

rows are defined as a percentage of the grid’s height

226
Q

columns are defined as a percentage of the grid’s ___

A

columns are defined as a percentage of the grid’s width

227
Q

what is the shorthand for grid-template-columns and grid-template-rows?

A

grid-template

228
Q

when using grid-template, the values before the slash / determine the size of each ___

A

when using grid-template, the values before the slash / determine the size of each row

229
Q

when using grid-template, the values after the slash / determine the size of each ___

A

when using grid-template, the values after the slash / determine the size of each column

230
Q

what is the new relative sizing unit you can use with css grid?

A

fr - fraction

231
Q

what function can you use with grid-template-columns:

A

repeat ( )

232
Q

what function can you use to resize the grid according to browser size?

A

minmax() function

233
Q

what properties put blank space between every row and column in the grid?

A

row-gap and column-gap

234
Q

what do grid gap properties not do?

A

they don’t add space at the beginning or end of the grid

235
Q

what is the shorthand for row-gap and column-gap?

A

gap

236
Q

how is the shorthand gap property different from other grid shorthand properties?

A

it does not need a slash / between values

237
Q

what properties can you use to make single grid items take up multiple rows?

A

grid-row-start and grid-row-end

238
Q

what values do grid-row-start and grid-row-end take?

A

grid lines (as numbers)

239
Q

row grid lines and column grid lines start at ___ and end at a value that is ____ than the number of rows or columns the grid has

A

row grid lines and column grid lines start at 1 and end at a value that is 1 greater than the number of rows or columns the grid has

240
Q

the value for grid-row-start should be the row at which you want the grid item to ___
the value for grid-row-end should be ___ than the row at which you want the grid item to end.

A

to begin

one greater

241
Q

what is the shorthand property for grid-row-start and grid-row-end?

A

grid-row:

242
Q

what is the shorthand for grid-column-start and grid-column-end?

A

grid-column:

243
Q

what can you use instead of giving the grid lines for grid-column?

A

span - to give how many columns the grid item spans

244
Q

why is using span with grid-row and grid-column useful?

A

it helps avoid errors in calculating

245
Q

what property refactors both the grid-column and the grid-row properties?

A

grid-area

246
Q

the grid-area property takes __ values

A

the grid-area property takes 4 values

247
Q

what is the order of the 4 grid-area properties?

A
  1. grid-row-start
  2. grid-column-start
  3. grid-row-end
  4. grid-column-end
248
Q

where is grid-template-areas property declared?

A

on grid containers

249
Q

what does the grid-template-areas property allow you to do?

A

it allows you to name sections of your webpage to use as values in the: grid-row-start, grid-row-end, grid-column-start, grid-column-end, and grid-area properties
ie:

grid-template-areas: “header header”
“nav nav”
“left right”

with each item taking up in the “ “ as many columns as it takes up in the grid

250
Q

what is generally the easiest property to use when overlapping elements?

A

the grid-area property with grid-row names

251
Q

where is the justify-items property declared?

A

it is declared on grid containers

252
Q

what are some of the more useful values that justify-items accepts?

A

start; aligns items to the left side of the grid area
end; aligns items to the right side of the grid area
center; aligns items to the centre of the grid area
stretch; stretches all items to fit the grid area

as well as:
space-around; gives an equal amount of space on either side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element

space-between; gives an equal amount of space between grid items and no space at either end

space-evenly; places an equal amount of space between grid items as well as at either end of the grid

253
Q

what is the difference between justify-content and align-items?

A

justify-content positions items across the horizontal axis

align-items positions items across the vertical axis

254
Q

justify-items specifies how grid items contained within a single container position themselves along the ___ axis

A

row

255
Q

align-items specifies how grid items contained within a single container position themselves along the ___ axis

A

column

256
Q

justify-self specifies how an ____ ____ should position itself with respect to the ____ axis

A

individual element

row axis

257
Q

align-self specifies how an ____ ____ should position itself with respect to the ____ axis

A

individual element

column axis

258
Q

what is the implicit grid?

A

an algorithm built into CSS that determines default behaviour for the placement of elements when there are more than fit into the grid specified by CSS

259
Q

what is the default behaviour of implicit grid?

A

items fill up rows first, adding new rows when necessary

new grid rows will only be tall enough to contain the content within them

260
Q

what properties specify the size of grid tracks added implicitly?

A

grid-auto-rows and grid-auto-columns

261
Q

where are the properties grid-auto-rows and grid-auto-columns declared?

A

on grid containers

262
Q

what are the explicit (as opposed to implicit) counterparts to grid-auto-rows and grid-auto-columns

A

grid-template-rows and grid-template-columns

263
Q

what values do the explicit grid-template-rows and grid-template-columns, and implicit grid-auto-columns and grid-auto-rows take?

A

pixels - px
fractions - fr
percentages - %
and the repeat function : repeat ( )

264
Q

how do you specify the order in which implicit rows/columns are rendered?

A

with the property grid-auto-flow

265
Q

what values does the grid-auto-flow property take?

A

grid-auto-flow: row; specifies new elements should fill rows from left to right and create new rows when there are too many elements (also the default)
grid-auto-flow: column; specifies new elements should fill columns from top to bottom and create new columns when there are too many elements
grid-auto-flow: dense; this invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added

266
Q

what aspects of a transition can be controlled with CSS?

A

which CSS property transitions
how long a transition lasts
how much time there is before a transition begins
how a transition accelerates

267
Q

to create a simple transition in CSS, what 2 aspects are needed?

A

the property that we want to transition

the duration of the transition

268
Q

what is the value for transition time?

A

in seconds or milliseconds

269
Q

what is the default time value for transitions / if there is no transition

A

0s

270
Q

what property describes the pace of a transition

A

transition-timing-function:

271
Q

what is the default value for transition-timing-function?

A

ease; which starts the transition slowly, speeds up in the middle, and slows down again at the end

272
Q

what values can transition-timing-function take?

A

ease: starts transition slowly, speeds up in the middle, and slows down at the end

ease-in; starts slow, accelerates quick, stops abruptly

ease-out; begins abruptly, slows down, and ends slowly

ease-in-out; starts slow, gets fast in the middle, and ends slowly

linear; constant speed throughout

273
Q

what property can you use to specify the amount of time before a transition starts?

A

transition-delay:

273
Q

what property can you use to specify the amount of time before a transition starts?

A

transition-delay:

274
Q

what is the default value of transition-delay?

A

0 - no transition delay

275
Q

how can you combine the four transition property declarations?

A

with the shorthand ‘transition:’

276
Q

what is the order that properties are specified in using the shorthand ‘transition’?

A
  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay
277
Q

what happens if you leave out one of the four properties in the refactored transition property? (excluding the exception)

A

it will assume the default value of the property with the missing value

278
Q

what is the exception for the refactored transition values - what property needs a value?

A

delay - you must set a duration if you want a delay

279
Q

what is the advantage of the shorthand transition as opposed to the 4 individual transition declarations?

A

you can describe transitions for multiple properties and combine them

280
Q

how do you combine transitions within the shorthand transition property?

A

using commas ,

281
Q

when you’re setting the same transition properties for many different elements, what value can you give to transition-property:

A

all

282
Q

what is the benefit of relative measurements?

A

they allow for the proportions of the webpage to remain intact regardless of screen size or layout

283
Q

what did the measurement em traditionally represent?

A

the width of a capital letter M in the typeface and size being used

284
Q

what does the measurement em represent now?

A

the font-size of the current element or default base font-size set by the browser if none is given

285
Q

what is normally the default size of text in a browser?

A

16 pixels

286
Q

what does the unit of measurement rem stand for?

A

root em

287
Q

how does the unit of measurement rem work?

A

it checks the root element’s size

the root element is the < html > tag

288
Q

what is the advantage of using the rem measurement?

A

all elements are compared to the same font size value which makes it easy to predict how big or small a font will appear, and it makes sizing elements consistently across a website easier

289
Q

when is em better than rem for measurement

A

if you want to size elements in comparison to elements nearby, as opposed to site wide

290
Q

how can you size elements relative to their parent elements?

A

using percentages

291
Q

when should sizing of 100% only be used?

A

when content doesn’t have padding, border, or margin (otherwise it can overflow its parent element box-model)

292
Q

when padding and margin are set with percentages, they are calculated based on only the ___ of the parent element

A

width

293
Q

When using relative sizing, ___ and ___ should be used to size text and dimensions on the page related to text size (i.e. padding around text).

A

ems and rems

294
Q

what is the default block state of images?

A

inline-block

295
Q

what value can you declare to background-size to make a background image cover the entire background and scale proportionally?

A

background-size: cover;

296
Q

what does CSS use to adapt a website’s content to different screen sizes?

A

media queries

297
Q

what is screen used for in a media query?

A

screen is the media type always used for displaying content, no matter the type of device

298
Q

what does DPI stand for

A

dots per inch

299
Q

what values do min-resolution and max-resolution accept?

A

dpi (dots per inch) or dpc (dots per centimetres)

300
Q

what do you use to separate media features in a media query if only one of the conditions needs to be met?

A

commas ,

301
Q

what are the points at which media queries are set called?

A

breakpoints

302
Q

what are breakpoints?

A

the screen size(s) at which your web page doesn’t appear properly

303
Q

instead of setting breakpoints based on all device screen sizes, what should you set breakpoints at?

A

to where your page naturally breaks based on its content in your browser

304
Q

what are CSS variables called?

A

Custom Properties

305
Q

what must CSS variables start with?

A

double hyphen: –

306
Q

are CSS variables case sensitive?

A

yes

307
Q

how do you use variables in CSS?

A

the variable’s name must be specified as an argument inside the var() function

308
Q

what is a scope in CSS?

A

the scope is what determines where a variable will work based on where it is declared

309
Q

what are the two types of scope a variable can have?

A

local and global

310
Q

a locally scoped CSS variable will only affect _____ along with ____

A

a locally scoped CSS variable will only affect the specific HTML element that it is declared in, along with any children that element may contain

311
Q

where are globally scoped variables declared?

A

in the :root pseudo-class

312
Q

in most cases, the root element is actually the ____ element

A

< html > element

313
Q

if a variable is not explicitly defined on a child element, the value of its ___ is used (if there is one)

A

the value of its parent variable is used

314
Q

what properties aren’t inherited by child elements?

A

width, margin, padding, and border

315
Q

how do you set fallback values for variables?

A

by giving fallback values as the second argument in a function, separated from the first argument by a comma

316
Q

how do you set a css variable as a fallback variable within a function?

A

it must be passed using another var() function

317
Q

what is the maximum number of arguments the var ( ) function accepts?

A

2

318
Q

how many arguments does the url ( ) function take?

A

just 1

319
Q

what does the calc() function do?

A

takes a mathematical expression as its argument and returns the calculated value

320
Q

the calc() function requires ___ between the operator and the numbers in the expression

A

requires whitespace

321
Q

what do the min() and max() functions do?

A

select the smallest or largest value from a range of value and set that as the associated property’s value

322
Q

the min() function defines the ___ the class can have

A

min function defines the maximum

323
Q

what does the clamp( ) function do?

A

the clamp function enables specified value to be kept within an upper and lower bound

324
Q

how many parameters does the clamp function take?

A

3

325
Q

what 3 parameters does the clamp function take?

A
  1. a minimum value, 2. a preferred value, 3. a maximum allowed value
326
Q

what are the main CSS color functions?

A

the rgb() function, the rgba() function, the hsl() function, and the hsla() function

327
Q

what kind of blur does the blur ( ) function apply?

A

a Gaussian blur

328
Q

what is the default value for the brightness ( ) function?

A

100% or 1.0

329
Q

what are the required arguments for the drop-shadow function?

A

offset-x and offset-y

330
Q

what does the scale ( ) function do?

A

scale resizes an element horizontally and vertically on the 2D plane

331
Q

what values can the scale ( ) function take?

A

1 value scales the same across both the x and y axes

2 values scale in the order of 1. scale on the x axis, 2. scale on the y axis

332
Q

what property is the scale ( ) function used with?

A

the transform: property

333
Q

what does the rotate ( ) function do?

A

rotates an element around a fixed point on a 2D plane

334
Q

what value must be given to the rotate ( ) function?

A

a number for degrees, specified with the deg (degrees) unit

335
Q

what is the recommended font size for smaller screens?

A

18 to 20px

336
Q

what is the default line-height property in most browsers?

A

1.2

337
Q

what do the Web Content Accessibility Standards recommend as a minimum line-height?

A

1.5

338
Q

what is the default property of letter-spacing?

A

normal

339
Q

how many characters are recommended per line in a paragraph?

A

45 - 85 characters per line

340
Q

what is 1ch equivalent to?

A

the width of the 0 character

341
Q

what is the difference between two colours on the colour wheel called?

A

contrast ratio

342
Q

what is the range for contrast ratio and what do the values mean?

A

1: 1 - both compared colours are the same
21: 1 black and white

343
Q

how do you set an element to be hidden from screen readers?

A

with the aria-hidden attribute within html, and setting it to ‘true’

aria-hidden=’true’

344
Q

what are browsers based on and what do these things do?

A

browsers are based on browser engines and these are the components responsible for rendering HTML, CSS, and JavaScript

345
Q

what are vendor prefixes?

A

prefixes for property names that were developed as a way of testing new CSS features or standards before browsers fully supported them

346
Q

what are polyfills?

A

JavaScript codes that allow older browsers to behave as though they understand more advanced features than they actually do

Coding (8 decks)

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