HTML/CSS Crash Course Flashcards
What is hypertext
text with links
What does markup language mean
text that is marked up so you know what it is supposed to do. Like this <h1>Title Page</h1>
What are the different attributes for input?
text, password, checkbox, radio, submit, button, email, number, date, file, hidden, search, url, tel.
What are the common semantic html tags
<semantic>
article, section, header, main, nav, aside, footer
</semantic>
How do you know you’re using semantic html correctly?
There is a clear understanding of the structure of the page without needing visuals from the browser.
What does the <pre> tag do?
The preformatted text tag. This tag preserves whitespace, which can be useful when indentation and newlines need to be preserved.
What are <tr> and <td>?
tr is a single row in the table, td is a single piece of data in the table
What would one use to group the table head and table body
<thead> and <tbody>
</tbody></thead>
What is the scope attribute used for?
It tells someone using a screen reader if the table heading is for the row or column. <th scope='col'>Budget</th>
What is <th>?
The heading of the data. This tells you what the data you’re looking at is. ie budget, spending, etc
How would you make a title for the table?
<caption>
</caption>
What is the name attribute used for in an input
It is used for form submission, the name is the key in the key value pair sent to the server.
It is also used when grouping inputs for a radio button.
Also form data retrieval with JavaScript, ie document.forms[“myForm”][“username”].value. where username is the name value.
What is the for attribute used for in the label tag?
It is used to associate that label with an input with that id.
for=”username” in the label for id=”username” in the input.
What is an attribute selector?
[type=”submit”] would select all elements with the type attribute set to “submit”. [type] on it’s own would select all elements with a type regardless of the value.
What is the special syntax that can be used with attribute selectors?
[href*=”blahblah”] would select and href with “blahblah” at any location.
[href^=”blahblah”] would select and href with “blahblah” at the beginning.
[href$=”blahblah”] would select and href with “blahblah” at the end.
What is a descendent combinator?
selector1 selector2 {
this selects all elements that match selector2 that
are descendents of selector1
}
What is a child combinator?
selector1 > selector2 {
this selects all elements that match selector2 that
are a direct child of selector1
}
What is a sibling combinator?
selector1 ~ selector2 {
this selects all elements that match selector2
and are a sibling of an element matching selector1
}
What is an adjacent sibling combinator?
selector1 + selector2 {
this selects all elements that match selector2
and have an element matching selector1 directly before
them in the dom.
}
Pseudo-classes in CSS
Pseudo-classes are used in CSS to define special states of an element. They allow you to apply styles based on user interaction, an element’s position, or other conditions. Pseudo-classes are prefixed with a single colon (:).
button:hover {
color: blue;
}
Pseudo-elements in CSS
Pseudo-elements are used in CSS to style specific parts of an element or to insert virtual elements for styling purposes. They allow you to target and style sub-parts of an element, such as the first line or before and after its content. Pseudo-elements are prefixed with a double colon (::), though a single colon (:) can be used for backward compatibility with older browsers.
p::first-line {
font-weight: bold;
}
p::before {
content: “Something before the paragraph”
}
p::after {
content: “Something after the paragraph”
}
::marker {
color: blue;
}
What are the weighted specificity of selectors in CSS?
Inline styles: 1000
IDs: 100
Classes: 10
Pseudo-Classes: 10
Attributes: 10
Elements: 1
Pseudo-Elements: 1
What is the difference between setting font-size in em or rem?
em is relative to the parent’s font size and rem is relative to the root font size. If not set the default root is 16px. You can change this by setting the font size of html or setting :root { font-size: ??px }
What is %, vw, and vh?
You can set a % with is the percentage relative to the parent container. vw is a percentage of the viewport, so 50vw would be 50% of the viewport. vh is the same, but viewport height.
What is ch used for?
It’s specifically best to set the paragraph length. A ch of 60 would set the max characters on a line of a paragraph to 60. Keeping this between 50 - 70 is best.
CSS Display Values: inline, block, and inline-block
inline: Elements flow within the current line, without starting a new line. Width and height properties do not apply. Examples: <span>, <a>.</a></span>
block: Elements take up the full width available, starting on a new line and forcing following content to a new line. Width and height properties apply. Examples: <div>, <p>, <h1>-<h6>.
inline-block: A hybrid of inline and block. Elements flow within the current line, like inline, but can have width and height set, like block.
When do the margins collapse and take the larger of the two margins instead of adding the margins of elements together?
When it’s top or bottom margins. Adjacent horizontal margins are added together.
What does this do in your CSS?
- { box-sizing: border-box; }
Child elements are not able to overflow their parents. If the parent is 100px and the child is set to 110px, it will not expand outside the parents 100px.
CSS Position: static
The default position value. Elements are positioned according to the normal flow of the document.
CSS Position: relative
Elements are positioned relative to their normal position. Offsetting properties (top, right, bottom, left) will move the element from its normal position.
CSS Position: absolute
Elements are positioned relative to the nearest positioned ancestor (not static). If no positioned ancestors, it’s positioned relative to the viewport. Offsetting properties determine its final position.
CSS Position: fixed
Elements are positioned relative to the viewport, meaning they stay in the same place even if the page is scrolled. Offsetting properties determine its final position.
CSS Position: sticky
A hybrid of relative and fixed. Elements are positioned based on the user’s scroll position. They “stick” in place within a container until a certain scroll point.
You must also specify at least one of top, bottom, left, or right fit sticky positioning to work.
Flexbox
A layout model known as the Flexible Box Layout Module. Useful for building responsive designs with row or column layouts. Elements can be made a flex container with display: flex, and its direct children become flex items.
Flex Container: flex-direction
Determines the main-axis direction. Values:
row
column
row-reverse
column-reverse
Flex Container: justify-content
Positions elements along the main-axis. Values:
flex-start
flex-end
center
space-around
space-between
space-evenly
Flex Container: align-items
Positions elements along the cross-axis. Values:
flex-start
flex-end
center
baseline
stretch
Flex Container: flex-wrap
Determines if items wrap to new lines. Values:
wrap
nowrap
wrap-reverse
Flex Container: align-content
Positions lines along the cross-axis when items wrap. Values:
flex-start
flex-end
center
space-around
space-between
stretch
Flex Container: flex-flow
A shorthand for flex-direction and flex-wrap.
Flex Container: gap
Space between flex items. Can use row-gap and column-gap for specific directions
Flex Item: align-self
Overrides the align-items value of the flex container.
Flex Item: flex-basis
Initial size of the item along the main-axis.
flex-basis is useful when you want flex items to start from a certain size, but still want them to grow or shrink in relation to other items in the flex container.
Flex Item: flex-grow
Determines if the item grows into extra space. Larger values take more space proportionally.
Flex Item: flex-shrink
Determines if an item shrinks when items are too large for the container.
Determined the “share” of shrinking each item. If item1 has 1 and item2 has 3, the proportion of shrinking would be 25% vs 75%. So if it needed to shrink 100px the first world shrink 25px and the second item would shrink 75px.
Flex Item: flex
Shorthand for flex-grow, flex-shrink, and flex-basis.
Flex Item: order
Changes the order of the flex item amongst others. Default is 0.
