HTML / CSS Flashcards by Cody Wiseman

Where do you put non-visible content about the HTML document?

Between the head tags

How well did you know this?

Not at all

Perfectly

Where do you put visible content about the HTML document?

Between the body tags

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

What is the purpose of a Doctype declaration?

Declaration to tell a browser which version of HTML the page is using

How well did you know this?

Not at all

Perfectly

Give five examples of HTML element tags.

How well did you know this?

Not at all

Perfectly

What is the purpose of HTML attributes?

HTML attributes give additional information regarding the tag

How well did you know this?

Not at all

Perfectly

Give an example of an HTML entity (escape character).

How well did you know this?

Not at all

Perfectly

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 well did you know this?

Not at all

Perfectly

How do inline elements affect the document flow?

Inline elements are only as wide as their content

How well did you know this?

Not at all

Perfectly

What are the default width and height of a block-level element?

A block-level element’s width is 100% of its parents container

How well did you know this?

Not at all

Perfectly

What are the default width and height of an inline element?

As wide as its content

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

Is an HTML list a block element or an inline element?

Block element

How well did you know this?

Not at all

Perfectly

What HTML tag is used to link to another website?

<a> anchor tag. The URL is listed with an href attribute</a>

How well did you know this?

Not at all

Perfectly

What is an absolute URL?

An absolute URL contains all information necessary to locate a resource

How well did you know this?

Not at all

Perfectly

What is a relative URL?

A relative URL points to a file relative to the current page

How well did you know this?

Not at all

Perfectly

How do you indicate the relative link to a parent directory?

../

How well did you know this?

Not at all

Perfectly

How do you indicate the relative link to a child directory?

Name of directory followed by /file-name

How well did you know this?

Not at all

Perfectly

How do you indicate the relative link to a grand parent directory?

../../

How well did you know this?

Not at all

Perfectly

How do you indicate the relative link to the same directory?

Name of file in current directory or ./ file name

How well did you know this?

Not at all

Perfectly

What is the purpose of an HTML form element?

Allow you to collect information from visitors to your site

How well did you know this?

Not at all

Perfectly

Give five examples of form control elements.

text input, radio buttons, submit buttons, checkboxes, and text area

How well did you know this?

Not at all

Perfectly

Give three examples of type attributes for HTML elements.

type, name, size, maxlength, value, id, selected

How well did you know this?

Not at all

Perfectly

Is an HTML element a block element or an inline element?

Inline

How well did you know this?

Not at all

Perfectly

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