html & css Flashcards by Shawn Kost

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

In the head tag

How well did you know this?

Not at all

Perfectly

Where do you put visible content about the HTML document?

In the body tag

How well did you know this?

Not at all

Perfectly

Where do the head and body tags go in a valid HTML document?

Inside the HTML tag

How well did you know this?

Not at all

Perfectly

What is the purpose of a !DOCTYPE declaration?

Declare the type of document

How well did you know this?

Not at all

Perfectly

Give five examples of HTML element tags.

p, html, head, title, img

How well did you know this?

Not at all

Perfectly

What is the purpose of HTML attributes?

Indicates what kind of extra information you are supplying about the element’s content

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 will always start on a new line

How well did you know this?

Not at all

Perfectly

How do inline elements affect the document flow?

Inline elements will continue on the same line as neighboring elements

How well did you know this?

Not at all

Perfectly

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

As much width as the parent div, and the height as much as the content needs

How well did you know this?

Not at all

Perfectly

What are the default width and height of an inline element

Only takes up as much width & height that it needs

How well did you know this?

Not at all

Perfectly

What is the difference between an ordered list and an unordered list in HTML?

An ordered list is numbered, while an unordered list is 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?

Anchor tag

How well did you know this?

Not at all

Perfectly

What is an absolute URL?

A URL that will take you to the specific domain of another website

How well did you know this?

Not at all

Perfectly

What is a relative URL?

A URL that takes you to different pages on the same website.

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 the child folder followed by a slash then the file name

music/listings.html

How well did you know this?

Not at all

Perfectly

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

The name of a child folder, followed by a forward slash, then the name of the grandchild folder, followed by another slash, then the file name.

../../index.html

How well did you know this?

Not at all

Perfectly

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

Just list the file name

How well did you know this?

Not at all

Perfectly

What is the purpose of an HTML form element?

To submit information to a server

How well did you know this?

Not at all

Perfectly

Give five examples of form control elements.

Radio, Checkbox, Password input, Submit, File upload

How well did you know this?

Not at all

Perfectly

Give three examples of type attributes for HTML elements.

text, password, radio,

How well did you know this?

Not at all

Perfectly

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

inline element

How well did you know this?

Not at all

Perfectly

What are the six primary HTML elements for creating tables?

table, tr, td, th, thead, tbody

What purpose do the thead and tbody elements serve?

Help distinguish between the main content of the table and the first row

Give two examples of data that would lend itself well to being displayed in a table

Financial reports, sport results

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 (period)

In CSS, how do you select elements by their type?

Use the specific element name

In CSS, how do you select elements by its id?

#id (hashtag)

Name three different types of values you can use to specify colors in CSS.

RGB, hex codes, some color names

What CSS properties make up the box model?

Border, Margin, Padding

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 the selector that specifies a specific state

What are CSS pseudo-classes useful for?

Allows us to modify how we select elements

Name at least two units of type size in CSS.

px, 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?

nowrap

Why do two div elements "vertically stack" on one another by default?

They are block level 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 doesn't affect document flow

How does setting position: relative on an element affect where it appears on the page?

Its relative to its original position

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?

You specify the distance the element should be from each of the containing element's sides

How do you constrain an absolutely positioned element to a containing block?

Make the containing block non-static

What are the four box offset properties?

Top, bottom, right, left

What are the four components of "the Cascade".

Source order, Inheritance, Specificity, Importance

What does the term "source order" mean with respect to CSS?

The order of your css styles in which they are written

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

Inherited properties

List the three selector types in order of increasing specificity.

Type, class, id

Why is using !important considered bad practice?

It breaks the natural cascading in your stylesheet and makes it hard to debug

What does the transform property do?

Lets you rotate, scale, skew, or translate an element

Give four examples of CSS transform functions.

rotate, scale, skew, translate

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

Which HTML meta tag is used in mobile-responsive web pages?

viewport

What is a breakpoint in responsive Web design?

The points at which a media query is introduced because of changes on the screen

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?

Percent's are relative to whatever device is used

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 CSS Cascading (priority)