CSS Basics Flashcards
(131 cards)
1
Q
What describes how input elements should look?
A
Ruleset
2
Q
Which is the element or elements that will be targeted by the declarations that follow?
A
Selector
3
Q
What does the declaration block follow?
A
The Selector
4
Q
In CSS, what is a set of declarations contained in curly brackets {}
A
A Declaration Block
5
Q
What consists of a property and the value it is to be set to?
A CSS rule-set consists of a selector and ________
A
A Declaration
6
Q
Write CSS code to Target a set of elements named “sidebar” to have a width of 100 pixels.
A
.sidebar { width: 100px; }
7
Q
In CSS, the property name is followed by a ?
A
Colon
8
Q
In CSS, the value (after the property) is followed by a?
A
A semicolon.
9
Q
In CSS, what is the method of adding coments to your code not to be shown or the temporarily disable “comment out” a block of code?
A
/* text here or code here */
10
Q
When you’re writing a ruleset, try to keep your _______ as non-specific as possible.
A
Selectors
11
Q
When you’re writing a ruleset, try to keep your selectors as 1)specific or 2)non-specific as possible.
A
2) Non specific.
12
Q
In CSS what is used to specify (to target) a special state of the element?
A
Pseudo-class
13
Q
In CSS what is used to style (target) specified parts of an element?
A
Pseudo-element
14
Q
In CSS write a short ruleset to target the first letter of every paragraph. Also define this situation as either 1)pseudo-class or 2)pseudo-element
A
2) pseudo-element
p: :first-letter
15
Q
In CSS write a short ruleset to generate hover behaviour over a container box named “foo”. Also define this situation as either 1)pseudo-class or 2)pseudo-element
A
1) Pseudo-Class
div. foo:hover {…}
16
Q
To utilize CSS, we link to one or more _______________ that contain style rules which are applied to the linking HTML page.
A
External Stylesheets
17
Q
Write HTML code including the opening and closing header section to link a stylesheet to the HTML page. (ignore answer ,,,)
A
,,<,,head,,>
,,<,,link rel=”stylesheet” type,,=”text/css” href=”./css/main.css”,,,>
,,<,,link rel=”stylesheet” type,,=”text/css” href=”./css/nav-bar.css”>
,,<,,/,,head,,>
18
Q
Is “inline styling” to be avoided?
A
Yes. Engineers refer to this as maintaining the separation of concerns between HTML and CSS.
19
Q
write HTML code (inline styling) to set the paragraph style to have a color of blue and a font of Arial. (in answer ignore ,,,)
A
,,<,,p style=”color: blue; font-family: Arial”,,>text text,,<,,/p>
20
Q
What encodes information about how an element should look directly into the HTML (bypassing CSS)?
A
Inline Styles
21
Q
Inline styles encode information about how an element should look directly into the HTML. Are you able to reuse these styles on other elements?
A
No
22
Q
Are classes possible with inline styles?
A
No
23
Q
What is DOM ?
A
Document Object Model
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree
24
Q
If you include <style> and <link></link> elements in your document, they will be applied to the DOM \_\_\_\_\_\_\_\_\_ they are included in the document.</p>
</style>
A
In the order
25
If you include
Cascade Issues
26
You just learned that a given HTML element's appearance can be determined by numerous CSS rulesets...in real web pages — especially for bigger sites with more contributors — you often end up with style rules from multiple places targeting a specific element. If there are conflicts for a given property, the browser will choose the rule with the \_\_\_\_\_\_\_\_
Higher Specificity
27
In the CSS coding below which has more specificity:
1) div.foo p {color: green;}
2) .foo p {color: red;}
1) is more specific and will be chosen
28
Write CSS code to target all paragraphs in an element with the "foo" class to be red.
.foo p { color: red; }
29
CSS allows you to supply the keyword _______ in order to make a rule that might otherwise be lower in the cascade to override others.
!important
30
Write CSS using the word !important to apply the color red to the paragraph.
p { color: red !important; }
31
In CSS should the !important comand be avoided?
Yes, there are rare occasions when it's the right move.
32
The Box Model: Name the total space taken up by an element using 5 constituent parts
Width, Height, Padding, Border, and Margin
33
What is the manner of calculating the total width of an element?
Add Width, plus 2x padding, plus 2x border, plus 2x margin.
34
To have the box model respect the widths we explicitly set, we can use the _______ CSS property.
The "box-sizing" CSS property.
35
Write the ruleset in CSS to make border-box the default for all elements
\* { box-sizing: border box; }
36
To have the box model respect the widths we explicitly set, we can use the box-sizing CSS property. We set its value to \_\_\_\_\_\_\_\_
border-box.
37
write the ruleset in your CSS to make border-box the default for all elements.
\* {
box-sizing: border-box;
}
38
What are the two common solutions to guarantee cross-browser consistency for default styles?
1) Meyer reset
2) Normalize.css
39
What is a CSS library that normalizes a subset of browser elements to be consistent between browsers?
normalize.css
40
To use any font beyond web safe fonts, you have to use ?
Webfonts.
41
Fonts that you load in the browser using HTML and then can reference in your CSS. Google provides a set for free.
Webfonts.
42
within ,\<,,head\> section is line
,\<,,link href="https://fonts.googleapis.com/css?family=Anton&display=swap"
for the following ,,\<,,div class,,=,,"a",,\>,,
add in CSS instructions to assign to this class the font above with "sans-serif", along with size of 30px and bold and color green.
div.a {
font-family: 'Anton', sans-serif;
font-size: 30px;
font-weight: bold;
color: green;
}
43
in CSS target h1 and give font of 40px
h1 {
font-size: 40px;
}
44
In CSS target all elements that have BOTH the .foo and .bar classes:
.foo.bar { }
45
In CSS target only paragraphs that have BOTH .foo and .bar
p.foo.bar { }
46
In CSS, if an element is part of the target, put it \_\_\_\_\_\_.
First. Then chain together the classes you want to target.
47
In CSS, target elements that have either .foo or .bar, or BOTH .bizz and .bang.
.foo, .bar, .bizz.bang { }
48
In CSS, target all paragraphs that appear with ASIDE elements
aside p { }
49
In CSS, what targets children of the parent element whether they're immediate children or further down the hierarchy?
Descendant selectors
50
In CSS, target only elements that are the DIRECT children of an element. Using p as the element.
aside \> p { }
51
The ::before and ::after are what?
Pseudo-elements that allow you to render content just before or after your element.
52
In CSS, write code to add an quotation mark before the blockquote.
blockquote: :before {
content: open-quote;
}
53
In CSS, write an ANCHOR PSEUDO-CLASS for an unvisited link
a: link { }
54
In CSS, write an ANCHOR PSEUDO-CLASS for a visited link.
a: visited { }
55
In CSS, write an ANCHOR PSEUDO-CLASS for a 'mouse over link'
a:hover { }
56
In CSS, write an ANCHOR PSEUDO-CLASS for a selected link [clicked but not released on the link]
a: active { }
57
in CSS, what does the following represent:
element[attribute=value]
Targets elements by attribute value and this is an EXACT match.
58
In CSS, what does the following represent:
element[attribute\*=value]
Targets elements by attribute value and this is an match ANYWHERE in the value.
59
In CSS, what does the following represent:
element[attribute^=value]
Targets elements by attribute value and this is a match at the BEGINNING of the value.
60
In CSS, what does the following represent?
element[attribute$=value]
Targets elements by attribute value and this is a match at the end of the value.
61
— you often end up with style rules from multiple places targeting a specific element. If there are conflicts for a given property, the browser will choose the rule with \_\_\_\_\_\_\_\_\_\_.
higher specificity.
62
To determine which property-value pairs to apply to a particular element, the browser: in order
) Takes all rulesets that have same origin and importance and sorts them by selector specificity
) Takes all the relevant rulesets and sorts them according to their origin (for instance, inline styles vs. external stylesheets — inline styles win over external) and importance (more on importance in a moment)
) Determines which rules apply to the element
) If there are still conflicting values for rulesets with the same importance, origin, and specificity, applies the ruleset that was declared last.
3214
63
To determine which property-value pairs to apply to a particular element, the browser: IN ORDER
) Takes all the relevant rulesets and sorts them according to their origin (for instance, inline styles vs. external stylesheets — inline styles win over external) and importance (more on importance in a moment)
) Determines which rules apply to the element
) Takes all rulesets that have same origin and importance and sorts them by selector specificity
) If there are still conflicting values for rulesets with the same importance, origin, and specificity, applies the ruleset that was declared last.
2134
64
To determine which property-value pairs to apply to a particular element, the browser: IN ORDER
) If there are still conflicting values for rulesets with the same importance, origin, and specificity, applies the ruleset that was declared last.
) Takes all the relevant rulesets and sorts them according to their origin (for instance, inline styles vs. external stylesheets — inline styles win over external) and importance (more on importance in a moment)
) Takes all rulesets that have same origin and importance and sorts them by selector specificity
) Determines which rules apply to the element
4231
65
To determine which property-value pairs to apply to a particular element, the browser: IN ORDER
) If there are still conflicting values for rulesets with the same importance, origin, and specificity, applies the ruleset that was declared last.
) Takes all rulesets that have same origin and importance and sorts them by selector specificity
) Takes all the relevant rulesets and sorts them according to their origin (for instance, inline styles vs. external stylesheets — inline styles win over external) and importance (more on importance in a moment)
) Determines which rules apply to the element
4321
66
To determine which property-value pairs to apply to a particular element, the browser:
) Determines which rules apply to the element
) If there are still conflicting values for rulesets with the same importance, origin, and specificity, applies the ruleset that was declared last.
) Takes all the relevant rulesets and sorts them according to their origin (for instance, inline styles vs. external stylesheets — inline styles win over external) and importance (more on importance in a moment)
) Takes all rulesets that have same origin and importance and sorts them by selector specificity
1423
67
CSS allows you to supply the keyword _________ in order to make a rule that might otherwise be lower in the cascade override others. Try to avoid using it only rare occasions; it's a sign that there are problems with the application of your style rules.
!important
! important
68
To calculate the measurements for an element, we add width, plus 2x \_\_\_\_\_, plus 2x \_\_\_\_\_\_, plus 2x \_\_\_\_\_\_\_\_.
padding
border
margin
Example ...would have a total width of 200 (width) + 20 (padding left and padding right, each 10) + 2 (left and right border) + 60 (left and right margin) = 282px.
69
use a CSS reset, the most popular of which is the \_\_\_\_\_\_\_\_\_. By linking to this file in your HTML (above your other style sheets, so it sets a base that they add to), you can guarantee cross-browser consistency for default styles.
Meyer reset
https://meyerweb.com/eric/tools/css/reset/reset.css
70
Write CSS code that target only paragraphs that have both .foo and .bar
p.foo.bar {
}
71
The HTML
## Footnote
> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation
>
> In CSS write code to add opening and closing quotations just before and after the blockquote element.
blockquote: :before {
content: open-quote;
}
blockquote: :after {
content: close-quote;
}
72
Web accessibility (commonly shortened to \_\_\_\_\_\_\_) is the practice of making web pages accessible to both able-bodied and disabled users. That can mean taking into account the needs of users with movement impairments (such as paralysis or cerebral palsy), users with cognitive impairments like dyslexia, or visually impaired users (like nearsighted, blind, or colorblind people), and also the assistive technologies (often shortened as "ATs") they use. This reading will focus on visually impaired users because they are the ones most impacted by good or bad HTML.
## Footnote
**a11y**
73
\_\_\_\_\_\_\_\_ & ACRONYM\_\_\_is the process of increasing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine.
Search engine optimization (SEO)
74
If you mainly use a mouse and monitor to navigate the contents of a web page, you’re a "\_\_\_\_\_\_" (and most likely not visually impaired). On the other hand, if you mainly use a keyboard (along with keyboard shortcuts for moving between links, tabs, etc), you’re a "\_\_\_\_\_\_".
mouse user
keyboard user
75
Write the HTML code to set the language of the page to English.
76
What are "a, strong, em, or span" examples of?
Inline Elements.
77
You can't explicitly set the width, height, margin, or padding of an _______ ; its dimensions are determined by how much space its contents require. However, the text in an ________ can be set to a large or smaller font-size or different color, and it will be different than the text around it.
inline element
78
The ______ is displayed inline with the rest of the text of the paragraph (which is its parent). The ______ does not appear on a new line.
span
79
A _________ element gets displayed on a new line (and takes up the whole available line), may contain additional _______ or inline elements, and its height and width can be explicitly set.
block-level
block-level
80
By default, block-level elements will take up the entire width of whatever element they appear inside of, but we can override this by explicitly setting the _______ or __________ property on an element.
width
max-width
81
An ________ element displays _______ like a span or a element, but you can give it an explicit width, height, margin, and padding.
This can be a good approach when you need to create elements with a set width, but you also need them to display side-by-side.
inline-block
inline
82
Write CSS code for the .inner lines below to appear on the same line. They all should have 100px height.
See answer
83
is a valuable recipe that you should memorize. Whenever you need to horizontally center a block-level content within some parent element, this technique is your friend. By setting __________ to auto, it ensures that the element will remain centered, even if its parent element changes in size or moves.
margin-left: auto
margin-right: auto
84
margin-left: auto; margin-right: auto is a valuable recipe that you should memorize. Whenever you need to horizontally center a block-level content within some ______ element, this technique is your friend. By setting left and right margins to auto, it ensures that the element will remain centered, even if its ______ element changes in size or moves.
parent
parent
85
When you need to horizontally center inline elements within a \_\_\_\_\_\_\_, text-align: center does the trick.
block element
86
When you need to horizontally center ________ within a block element, text-align: center does the trick.
inline elements
87
\_\_\_\_\_\_\_ are individual components that a user interacts with - typically corresponding to a single data point. HTML provides numerous ______ types (text, email, number, password, etc.), and _____ types differ in how they are rendered. _______ also vary in how they are validated.
Inputs
input
input
Inputs
88
\_\_\_\_\_ are containers that hold a set of inputs.
Forms
89
The _____ element wraps all our inputs and labels.
,,\<,,form,,\>,,
90
The ,,\<,,form,,\> element wraps all our inputs and labels. To progressively support all users you'll want to set the ______ and _____ attributes. This will ensure user input can be submitted even if JavaScript is disabled or breaks.
action
method
91
The ______ attribute is the URL of the server endpoint that submitted form data should be sent to.
action
92
In dealing with Forms in HTML, the _______ attribute is the request ______ that the browser should use when sending the data to the server.
method
method
93
The method attribute is the request method that the browser should use when sending the data to the server. Usually you'll want \_\_\_\_\_\_\_, but ________ is also possible. We won't go into details of ________ for now, but know that the server will expect to receive data via one of these two methods, and you'll need to adjust your form's method accordingly.
method="post"
method="get"
get vs. post
94
The _______ element is used to group together related inputs and labels. In the example above, we use a\_\_\_\_\_\_\_ to group together the contact info related inputs and their labels, as well as the radios and labels that ask the user about how they feel. In the CSS for this repl.it, we've overridden some default styling for our \_\_\_\_\_\_\_. The main reason to use _______ is that they help web crawlers and screen readers understand how inputs are grouped together (even if this is not revealed visually to sighted users)
fieldset
fieldset
fieldsets
fieldsets
95
The _______ element is like a title for the fieldset.
legend
96
\_\_\_\_\_\_\_\_tell human users, web crawlers, and screen readers what an input is for — using the _for_ attribute
Labels
97
The _for_ attribute goes on a label, and its value should be set to the ID of the input it's for. Although you're generally discouraged from using IDs as CSS selectors, you must use IDs for ______ association to work. This association is what makes inputs take focus when you click on their \_\_\_\_\_\_
label
labels
98
While the label element requires opening and closing tags, ______ do not.
inputs
99
Write up HTML code for 1) a label that is the first name
2) give same label on another line the input id and type and name.
100
\_\_\_\_\_\_\_\_is used to set text that initially displays before the user has input any data. Typically, _________ are used for example entries, and usually, they're styled to be lighter than user input text. Because they are meant to offer examples of desired input, they should not be used in place of labels.
placeholder
placeholders
101
\_\_\_\_\_\_\_\_\_ is used to indicate that an input must be filled out.
required
102
The ______ attribute is used to supply regular expression patterns that the user's input must match in order to be valid. In the example above, we use this to require that the phone number entry consists of only numbers, and optionally dashes.
pattern
103
This attribute determines how the element looks and how its validation works. For instance, an _____ with type='email' will be valid if the user _____ text that has an @ with text before and after. ____ types also provide some accessibility by dictating the kind of keyboard a smartphone will display for a user: number _____ will show only the number pad; email _____ will show a keyboard with the @ symbol in a prominent place.
input
inputs
Input
inputs
inputs
104
The _______ element is used to let users choose from a list of options.
select
105
..\<..select..\> tags wrap a set of one or more \_\_\_\_\_\_\_\_\_, and you can pre-select an individual ..\<..\_\_\_\_..\> by adding the selected attribute.
options
option
106
..\<..\_\_\_\_\_\_\_..\> elements to allow users to submit and reset the form. This is done by setting the type attribute.
button
107
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities
Accessible Rich Internet Applications (ARIA)
108
The ______________________ is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The ____ represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. ___ methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.
Document Object Model (DOM)
DOM
DOM
109
\_\_\_\_\_\_\_\_\_\_refers to the default way browsers render content. Under \_\_\_\_\_\_\_\_, block-level elements get rendered in the same order that they appear in the HTML markup, one on top of another, starting from the top left corner of the document, and inline elements stretch as wide as their inside content (usually text).
Normal flow
normal flow
110
Any HTML element with the _position: static_ (which is also to say, any element that you don't explicitly set position to a different value on) will have what is called \_\_\_\_\_\_\_\_\_\_\_\_.
normal flow
111
position: _____ – or rather, not setting any value for position on an element – is often the behavior we want. Unless you have a specific reason to choose one of the other possible values discussed below, then don't explicitly set position.
static
112
When an element's position is set to \_\_\_\_\_, it will stay in place even when the user scrolls. _____ elements are _taken out of the normal flow_, and other elements will position themselves as if the fixed element does not exist. For navbars or footers that you want to remain stuck to the top or bottom of the screen, this is often the best approach.
fixed
Fixed
113
In CSS, write code to give the .foo a fixed position (versus static).
.foo {
width: 100px;
height: 100px;
position: fixed;
}
114
CSS gives us four offset properties: left, right, top, bottom. These properties can be used on elements whose position is set to fixed, relative, and absolute, but not \_\_\_\_\_\_\_.
static
115
CSS gives us four offset properties: ___ , ____ , ____ , \_\_\_\_. These properties can be used on elements whose position is set to fixed, relative, and absolute, but not static.
left, right, top, bottom
116
This is because fixed elements are fixed in relation to the \_\_\_\_\_\_\_\_\_\_\_\_\_
viewport (aka, the browser window).
117
Write CSS code to anchors the .foo div to the top left corner of the window...and what is this called?
.foo {
left: 0;
top: 0;
}
\*\*called offset properties vs. Static or fixed.
118
When an element's position property is set to \_\_\_\_\_\_\_\_\_\_\_\_, it is still in the normal flow (in other words, relatively positioned elements are rendered in the order they appear in HTML), but unlike with static elements, we can use offset properties (left, right, top, bottom)
relative
119
Note that any offsets on a relative element are in relation to where they would be in the normal flow, not the \_\_\_\_\_\_\_\_\_\_\_\_.
viewport (screen)
120
Note that any offsets on a ________ element are in relation to where they would be in the normal flow, not the viewport.
relative
121
Like fixed elements, ________ elements are outside the normal flow and can be offset, but unlike fixed elements, they are offset in relation to the first parent container with a non-static position.
absolute
122
A common use case for ______ positioning is when you have a navbar where you want to align a logo to the left and a set of links to the right.
absolute
123
Our advice for you at this point in your learning is to use floats only when you need to wrap ____ around an element.
text
124
To use Flexbox, simply define a flex container using the CSS property ____ \_\_\_\_. A container can be any element on an HTML page including the ..\<..body..\> element. All direct children of the container are called items. Items are the elements that will be arranged by Flexbox.
display: flex
125
To use Flexbox, simply define a flex container using the CSS property display: flex. A container can be any element on an HTML page including the ..\<..body..\> element. All direct children of the container are called \_\_\_\_...and they are the elements that will be arranged by Flexbox.
items
126
The Flexbox model is managed by specifying either the behaviour of the flex ______ or the behaviour of the flex \_\_\_\_\_.
container
items
127
The flex container (at the container level) \*\*NOT AT THE ITEM LEVEL\*\* is controlled by three main properties:
flex-direction
justify-content
align-items
128
flex-direction describes the main ____ of the container, that is, whether items are laid out horizontally in a row or vertically in a column.
In either case, there is a start and end of the flex container. By default, items are added to the container from the start of the container towards the end of the container.
axis
129
flex-direction accepts 4 possible values: \_\_, \_\_, \_\_, \_\_.
row - this is the default, items are laid out from left to right
row-reverse - items are laid out from right to left
column - items are laid out from top to bottom
column-reverse - items are laid out from bottom to top
130
In CSS, setup the container to have a flex display with a direction on the row, meaning left to right.
#container {
display: flex;
flex-direction: row;
}
131
