HTML / CSS Flashcards
Where do you put non-visible content about the HTML document?
Between the head tags
Where do you put visible content about the HTML document?
Between the body tags
Where do the head and body tags go in a valid HTML document?
The head goes at the top of the HTML document. The body tag goes at the bottom of the HTML document, below the head tags
What is the purpose of a Doctype declaration?
Declaration to tell a browser which version of HTML the page is using
Give five examples of HTML element tags.
<div> <a> <img></img> <span> </span></a></div>
What is the purpose of HTML attributes?
HTML attributes give additional information regarding the tag
Give an example of an HTML entity (escape character).
© copyright
How do block-level elements affect the document flow?
Block-level elements take start on a new row and take 100% width of its parent container
How do inline elements affect the document flow?
Inline elements are only as wide as their content
What are the default width and height of a block-level element?
A block-level element’s width is 100% of its parents container
What are the default width and height of an inline element?
As wide as its content
What is the difference between an ordered list and an unordered list in HTML?
Ordered list is ordered numerically. Unordered list items are listed as bullet points
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
<a> anchor tag. The URL is listed with an href attribute</a>
What is an absolute URL?
An absolute URL contains all information necessary to locate a resource
What is a relative URL?
A relative URL points to a file relative to the current page
How do you indicate the relative link to a parent directory?
../
How do you indicate the relative link to a child directory?
Name of directory followed by /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?
Name of file in current directory or ./ file name
What is the purpose of an HTML form element?
Allow you to collect information from visitors to your site
Give five examples of form control elements.
text input, radio buttons, submit buttons, checkboxes, and text area
Give three examples of type attributes for HTML elements.
type, name, size, maxlength, value, id, selected
Is an HTML element a block element or an inline element?
Inline
What are the six primary HTML elements for creating tables?
table, thead, tbody, tfoot, th, td.
What purpose do the thead and tbody elements serve?
The HTML element defines a set of rows defining the head of the columns of the table. The HTML Table Body element () encapsulates a set of table rows ( elements), indicating that they comprise the body of the table ().
Give two examples of data that would lend itself well to being displayed in a table.
Sports statistics and schedules
What are the names of the individual pieces of a CSS rule?
selector & declaration
In CSS, how do you select elements by their class attribute?
.class-name {}
In CSS, how do you select elements by their type?
element-name {}
In CSS, how do you select an element by its id attribute?
class-name {}
Name three different types of values you can use to specify colors in CSS
RGB / RGBA, Hex code, or Named colors
What CSS properties make up the box model?
Padding, Border, Margin
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 CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). (:hover can be used to change a button’s color when the user’s pointer hovers over it.)
What are CSS pseudo-classes useful for?
Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
Name at least two units of type size in CSS.
px, %, (small, medium, large)
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?
nowrap
Why do two div elements “vertically stack” on one another by default?
because they are block elements
What is the default flex-direction of an element with display: flex?
row
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
It does not change document flow
How does setting position: relative on an element affect where it appears on the page?
It is relative to where it normally appears on page
How does setting position: absolute on an element affect document flow?
It removes it from the document flow
How does setting position: absolute on an element affect where it appears on the page?
Position changes relative to its containing block
How do you constrain an absolutely positioned element to a containing block?
Make the containing box non-static
What are the four box offset properties?
left, right, top, bottom
What are the four components of “the Cascade”.
Importance, inheritance, specificity, source order
What does the term “source order” mean with respect to CSS?
The order that your CSS rules are written in your stylesheet
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?
it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Give four examples of CSS transform functions.
matrix, translate, scale, rotate, skew
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay.
Give two examples of media features that you can query in an @media rule.
width and flex-basis
Which HTML meta tag is used in mobile-responsive web pages?
viewport
What is a breakpoint in responsive Web design?
The point at which a media query is introduced
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?
%s are better for responsiveness
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?
The style is being selected based on its position in the stylesheet
