HTML & CSS Flashcards
Where do you put non-visible content about the HTML document?
head element
Where do you put visible content about the HTML document?
body element
Where do the <head> and <body> tags go in a valid HTML document?
<html> element
</html>
What is the purpose of a <!DOCTYPE> declaration?
To specific version of HTML used
Give five examples of HTML element types.
html, head, body, title, h1
What is the purpose of HTML attributes?
to give more detail/description for elements
Give an example of an HTML entity (escape character).
© for copyright symbol
How do block-level elements affect the document flow?
start on new line and next element start on new line
How do inline elements affect the document flow?
can appear on the same line next to another inline elements
What are the default width and height of a block-level element?
width = 100% of container
height = auto
What are the default width and height of an inline element?
width = auto (content)
height = auto
What is the difference between an ordered list and an unordered list in HTML?
by default one is number and one is bulleted
Is an HTML list a block element or an inline element?
block element
What HTML tag is used to link to another website?
anchor element <a></a>
What is an absolute URL?
link to external sources
What is a relative URL?
link to internal sources (jump between internal files or divider)
How do you indicate the relative link to a parent directory?
../ (forward slash)
How do you indicate the relative link to a child directory?
directory/file
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
./ or pointing to file
What is the purpose of an HTML form element?
to group form elements together (boundary)
Give five examples of form control elements.
<form>, <input></input>, <select>/<option>, <textarea>, <button>
</button></textarea></option></select></form>
Give three examples of type attribute values for HTML <input></input> elements.
text, radio, checkbox, submit, password
Is an HTML <input></input> element a block element or an inline element?
inline element
| , |
26
What purpose do the thead and tbody elements serve?
define set of rows into either head or body
27
Give two examples of data that would lend itself well to being displayed in a table.
sport statistic & stocks info
28
What are the names of the individual pieces of a CSS rule?
selector, declaration block, declaration, property, value, rule-set
29
In CSS, how do you select elements by their class attribute?
using . (dot/period)
30
In CSS, how do you select elements by their tag name?
using tag name
31
In CSS, how do you select an element by its id attribute?
using #
32
Name three different types of values you can use to specify colors in CSS.
rgb, hex#, hsl
33
What CSS properties make up the box model?
content (width x height), padding, border, margin
34
Which CSS property pushes boxes away from each other?
margin
35
Which CSS property add space between a box's content and its border?
padding
36
What is a pseudo-class?
keyword of special state for selector
37
What are CSS pseudo-classes useful for?
can pick up very specific element or state that can be interact with the users
38
Name two types of units that can be used to adjust font-size in CSS.
rem, px, %, em
39
What CSS property controls the font used for the text inside an element?
font-family
40
CSS property with 4 sides value, which side does the first, second, third and forth value represent
top, right, bottom, left (clockwise)
41
CSS property with multiple value is called?
shorthand property
42
CSS font-family require back up value called?
fallback value
43
text-align property can be applied to inline block, block or inline element?
inline block & block elements
44
What is the default flex-direction of a flex container?
row (left-right)
45
What is the default flex-wrap of a flex container?
no-wrap
46
what does flex-flow combined?
flex-direction & flex-wrap
47
Why do two div elements "vertically stack" on one another by default?
because div is a block element
48
What is the default flex-direction of an element with display: flex?
row
49
What are the three primary components of a page layout? (Which helper classes do you need?)
container, row, column
50
What is the minimum number of columns that you should put in a row?
1
51
What is the purpose of a container?
to confine a space (specify width) where the flex-items (row & column) are placed into
52
in layout classes, what is the purpose of class=row
to give a section out of container in a vertical direction
53
in layout classes, what is the purpose of class=column
to give a section out of row in a horizontal direction
54
What is the default value for the position property of HTML elements?
position: static
55
How does setting position: relative on an element affect document flow?
it doesn't
56
How does setting position: relative on an element affect where it appears on the page?
it will appear in relative to it's original/true position
57
How does setting position: absolute on an element affect document flow?
remove from document flow entirely, doesn't affect other elements at all
58
How does setting position: absolute on an element affect where it appears on the page?
it will go within the nearest ancestor element with position non-static, if there's no non-static element, then it will base of the viewport
59
How do you constrain an absolutely positioned element to a containing block?
set it within a parent element with relative position (or other non-static positions) defined
60
What are the four box offset properties?
top, bottom, left, right
61
what does fixed position property do to block element?
striped it of block properties
62
What are the four components of "the Cascade".
Inheritance, specificity, important, source order
63
What does the term "source order" mean with respect to CSS?
the vertical order within the code file, the rule beneath another rule will govern
64
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance properties can be passed down without additional CSS rule on the children
65
List the three selector types in order of increasing specificity.
universal <- element <- class <- ID <- inline style <- !important
66
Why is using !important considered bad practice?
can't be overridden (top of chain)
67
What does the transform property do?
let you rotate, scale, skew or translate by modify the coordinate space of the css
68
Give four examples of CSS transform functions.
translate, rotate, scale, skew
69
The transition property is shorthand for which four CSS properties?
property_name, duration, timing-function, delay
70
Give two examples of media features that you can query in an @media rule.
min-width, max-width
71
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
72
What is a breakpoint in responsive Web design?
area where styling would change to new set
73
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a "column" class in a responsive layout?
would not require more breakpoints during small transition
74
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will "win". Why is that?
source order (Cascade SS)
|
|---|
