HTML & CSS Flashcards
Where do you put non-visible content about the HTML document?
Within the head element
Where do you put visible content about the HTML document?
Within the body element
Where do the <head> and <body> tags go in a valid HTML document?
Within the html element starting with head and followed by body
What is the purpose of a <!DOCTYPE> declaration?
To let the browser know how to interpret the code and what version of HTML we are using
Give five examples of HTML element types.
Html, head, title, body, p, div, span, ul, ol, li
What is the purpose of HTML attributes?
Provides additional details to the element such as the style for the given element, assisting with screen reading, sources, etc
Give an example of an HTML entity (escape character).
<, >, &, “, ‘, /, x
How do block-level elements affect the document flow?
They designate an entire line for the element. By default, the width will match the width of the parent element and the height takes up the size of the content. Both width and height can be customized, if desired.
How do inline elements affect the document flow?
They minimize white space and only use the amount of space that is required
What are the default width and height of a block-level element?
The entire width of its parent element and height of its contents
What are the default width and height of an inline element?
The width and height of its contents
What is the difference between an ordered list and an unordered list in HTML?
Ordered lists will number each listed item. Unordered lists will have each listed item on a bullet point.
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
anchor tag
What is an absolute URL?
The full pathway to a site on the internet
What is a relative URL?
The pathway to a site within the folder/directory the user is currently in, or in other words, the same domain.
How do you indicate the relative link to a parent directory?
../
How do you indicate the relative link to a child directory?
folder/file name
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
File name only
What is the purpose of an HTML form element?
To collect information from users or to help them search
Give five examples of form control elements.
select, text, textarea, checkbox, submit, input, button
Give three examples of type attribute values for HTML <input></input> elements.
radio, text, textarea, checkbox, password, email, submit
Is an HTML <input></input> element a block element or an inline element?
Inline element
What are the six primary HTML elements for creating tables?
table, thead, th, tr, tbody, td
What purpose do the thead and tbody elements serve?
Semantic elements used to separate different sections of the table
Give two examples of data that would lend itself well to being displayed in a table.
Train times, flight status, hotel bookings, etc.
What are the names of the individual pieces of a CSS rule?
selector, property, values
In CSS, how do you select elements by their class attribute?
.class
In CSS, how do you select elements by their tag name?
element name
In CSS, how do you select an element by its id attribute?
#id
Name three different types of values you can use to specify colors in CSS.
rgba, hexcode, color name, hsl, hue, brightness, saturation, opacity
What types of CSS properties can you set colors on?
Background, border, color (which sets both text and border)
What CSS properties make up the box model?
Border, margin, padding, content
Which CSS property pushes boxes away from each other?
Margin
Which CSS property add space between a box’s content and its border?
Padding
What is a pseudo-class?
A keyword added to a selector that specifies a special state of the selected element
What are CSS pseudo-classes useful for?
Classes that allow you to change the appearance of elements when users interact with them
Name two types of units that can be used to adjust font-size in CSS.
px, rem, em, %
What CSS property controls the font used for the text inside an element?
Font-family
What is the default flex-direction of a flex container?
Row
What is the default flex-wrap of a flex container?
No wrap/nowrap
Why do two div elements “vertically stack” on one another by default?
Div elements are block elements, which mean they will take up the entire width of the parent container
What is the default flex-direction of an element with display: flex?
Row, horizontal, x-axis
What are the three primary components of a page layout? (Which helper classes do you need?)
Container, row, column
What is the minimum number of columns that you should put in a row?
One
What is the purpose of a container?
To create a section of the page that you can control
What is the default value for the position property of HTML elements?
position: static
How does setting position: relative on an element affect document flow?
The targeted element shifts in the specified direction. Other elements will remain where they would be with normal flow.
How does setting position: relative on an element affect where it appears on the page?
Positions the element in relation to where it would have been with normal flow.
How does setting position: absolute on an element affect document flow?
The targeted element will be taken out of the document flow. Surrounding elements will act as though the absolute positioned element is not there.
How does setting position: absolute on an element affect where it appears on the page?
It will position the element to the top of the page or in relation to the nearest relative/non-static containing element.
How do you constrain an absolutely positioned element to a containing block?
Set the containing block to position: relative
What are the four box offset properties?
top, bottom, right, left
What are the four components of “the Cascade”?
Source order, inheritance, specificity & !important
What does the term “source order” mean with respect to CSS?
The vertical order of which rulesets appear on the CSS file
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance
List the three selector types in order of increasing specificity.
Type, class, ID
Why is using !important considered bad practice?
Creates likelihood for code being missed in updates, or extra manual steps to do so
What does the transform property do?
Allows you to manipulate elements
Give four examples of CSS transform functions.
Rotate, translate, scale, skew
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, transition-delay
What is a breakpoint in responsive Web design?
A point at which the media query triggers
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?
It will always be in relation to the current size or view
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 will make the bottom rule set the priority
