HTML/CSS Flashcards
Where do you put non-visible content about the HTML document?
the <head> element
Where do you put visible content about the HTML document?
the <body> element
Where do the <head> and <body> tags go in a valid HTML document?
in between the <html> tags
What is the purpose of a <!DOCTYPE> declaration?
To let the browser know what version of html you are running
Give five examples of HTML element types.
head, body, paragraph, header, footer
What is the purpose of HTML attributes?
to further define an element
Give an example of an HTML entity (escape character).
® (reserved trademark)
How do block-level elements affect the document flow?
they take up the full width of their container
How do inline elements affect the document flow?
they only take up as much space as they need within their container
What are the default width and height of a block-level element?
width: 100% height: auto (only takes up as much space as needed height-wise)
What are the default width and height of an inline element?
width: auto height: auto (only takes up as much space as needed on both ends there)
What is the difference between an ordered list and an unordered list in HTML?
ordered list is numbered while unordered isn’t
Is an HTML list a block element or an inline element?
block element, takes up the whole width
What HTML tag is used to link to another website?
anchor, <a></a>
What is an absolute URL?
a URL linking you to an external website, has to have https://
How do you indicate the relative link to a parent directory?
../
How do you indicate the relative link to a child directory?
directory(folder)/file
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
just link file (index.html)
What is the purpose of an HTML form element?
allows you to group together the form control elements, sets up the boundaries of the form
Give five examples of form control elements.
input, select, textarea, label, button
Give three examples of type attribute values for HTML <input></input> elements.
radio, checkbox, text,
Is an HTML <input></input> element a block element or an inline element?
in-line
What are the six primary HTML elements for creating tables?
<table>, thead, <tr> (table row), <th> (table heading), tbody,<td> (table data), tfoot
</td></th></tr></table>
What purpose do the thead and tbody elements serve?
thead holds the headers for the table. and tbody holds the data for the body - for the most part.
Give two examples of data that would lend itself well to being displayed in a table.
sports results, student grades
What are the names of the individual pieces of a CSS rule?
css selector, declaration block, properties, values
In CSS, how do you select elements by their class attribute?
put . before the class name
In CSS, how do you select elements by their tag name?
just type the tag as is before the declaration block
In CSS, how do you select an element by its id attribute?
put # before the ID name
Name three different types of values you can use to specify colors in CSS.
RGB values, hex codes, colornames
What CSS properties make up the box model?
border, margin, padding, content: (height & width)
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 class on the html element that gets applied under a specific state
What are CSS pseudo-classes useful for?
creating functionality events for elements being interacted with under a specific state
Name two types of units that can be used to adjust font-size in CSS.
pixels (px), or 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 (all lined up in 1 row)
What is the default flex-wrap of a flex container?
no wrap, (doesn’t move on to the next line)
Why do two div elements “vertically stack” on one another by default?
because they’re block
What is the default flex-direction of an element with display: flex?
row
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 confine all the content,
purpose of a row class
row class’s purpose is to take up a vertical chunk of the page.
purpose of a column class
is to take up a horizontal chunk
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
document flow is unaffected
How does setting position: relative on an element affect where it appears on the page?
shift relative to their original position, its also opposite. top pushes down, bottom pushes up.
How does setting position: absolute on an element affect document flow?
removed from the document entirely, so the documents don’t perceive it as existing at all.
How does setting position: absolute on an element affect where it appears on the page?
positions against the closest non-static container
How do you constrain an absolutely positioned element to a containing block?
By setting the containing block to relative, making it non-static
What are the four box offset properties?
top, right, bottom, left
What does the transform property do?
lets you rotate scale skew or translate an element. modifies the coordinate space of the css visual formatting model.
Give four examples of CSS transform functions.
scale, rotate, skew, transform
The transition property is shorthand for which four CSS properties?
transition-delay
transition-duration
transition-property
transition-timing-function
Give two examples of media features that you can query in an @media rule.
width, height, orientation. e.g (min-width: 300px)
Which HTML meta tag is used in mobile-responsive web pages?
viewport metatag
What is a breakpoint in responsive Web design?
the area where your styling should shift to a new set, because it’s a point where the styling would break if not changed. requires new media query rule set
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 allows you have a little wiggle room with your designs so that you don’t have to make excessive media queries
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?
because of source order, needs to grow in order
What are the four components of “the Cascade”.
Source Order, Specificity, Inheritance, !important
What does the term “source order” mean with respect to CSS?
governs the strength of the rule of the stylesheet, styling lower in the stylesheet is stronger
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
using inherited
List the three selector types in order of increasing specificity.
type, class, ID
Why is using !important considered bad practice?
it’s considered too strong, it’s like a nuclear bomb for css.
