HTML/CSS Flashcards
Where do you put non-visible content about the HTML document?
Inside of the head element
Where do you put visible content about the HTML document?
Inside of the body element
Where do the < head > and < body >tags go in a valid HTML document?
Inside the html tag
What is the purpose of a< !DOCTYPE > declaration?
To tell the browser which version of HTML the page is using
Give five examples of HTML element tags.
< head >, < title >, < body >, < h1 >, < p >
What is the purpose of HTML attributes?
Attributes provide additional information about the contents of an element.
Give an example of an HTML entity (escape character)
& trade ; for trademark
How do block-level elements affect the document flow?
Each block-level element starts on a new line, and takes up the entire width of whatever line it occupies.
How do inline elements affect the document flow?
Each inline element only takes up as much height and width as its element; and can be nested within other blocks.
What are the default width and height of a block-level element?
width: entire line
height: size of element
What are the default width and height of an inline element?
width: size of element
height: size of element
What is the difference between an ordered list and an unordered list in HTML?
Ordered lists are lists where each item in the list is numbered vs an unordered list are lists that begin with bullet
Is an HTML list a block element or an inline element?
Block-level element
What HTML tag is used to link to another website?
the < a > tag< /a >
What is an absolute URL?
An absolute URL starts with the domain name for that site, and can be followed by the path to a specific page. (Links to a website)
What is a relative URL?
A relative URL is shorter, but it can only be used to refer to links that reside on the same server as the page that refers them.
How do you indicate the relative link to a parent directory?
Use ../ to indicate the folder above the current one, then follow it with the file name.
How do you indicate the relative link to a child directory?
Use the name of the child folder, followed by a forward slash.
How do you indicate the relative link to a grand parent directory?
Repeat the ../ to indicate that you want to go up two folders (rather than one).
How do you indicate the relative link to the same directory?
Just use the file name. (Nothing else is needed.)
What is the purpose of an HTML form element?
HTML forms give you a set of elements to collect data from your users.
Give five examples of form control elements.
< input >, < label >, < select >, < textarea >, < button >, < fieldset >, < legend >, < datalist >, < output >, < option >
Give three examples oftypeattributes for HTML< input >elements.
“text”, “radio”, “checkbox”, “submit”
Is an HTML< input >element a block element or an inline element?
inline element
What are the six primary HTML elements for creating tables?
< table >, < thead >, < th >, < tbody >, < tr >, < td >
What purpose do the “thead”and”tbody” elements serve?
to group table rows into logical sections based on their content
Give two examples of data that would lend itself well to being displayed in a table.
financial reports, TV schedules, sports results
What are the names of the individual pieces of a CSS rule?
selector, declaration block, a property and a value
In CSS, how do you select elements by theirclassattribute?
Input a period (.) character, followed by the class name.
In CSS, how do you select elements by their type?
Input only the element name
In CSS, how do you select an element by itsidattribute?
Input a hash (#) character, followed by the id of the element.
Name three different types of values you can use to specify colors in CSS.
RGB Values, Hex Codes, Color names
What CSS properties make up the box model?
Borders, margins, 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?
- Apseudo-classis used to define a special state of an element
- A pseudo-class acts like an extra value for a class attribute.
What are CSS pseudo-classes useful for?
to change the style of an element when a user hovers over or clicks on text, or when they have visited a link
Name at least two units of type size in CSS.
Pixel (px), percentage (%), ems (An em is equivalent to the width of a letter m.)
What CSS property controls the font used for the text inside an element?
font-family
What is the defaultflex-directionof aflexcontainer?
row
What is the defaultflex-wrapof aflexcontainer?
nowrap (make it fit all in one line)
Why do two div elements “vertically stack” on one another by default?
Div elements are block elements
What is the defaultflex-directionof an element withdisplay: flex?
Row (left to right)
What is thedefaultvalue for thepositionproperty of HTML elements?
static positioning
How does settingposition: relativeon an element affect document flow?
It does not affect document flow
How does settingposition: relativeon an element affect where it appears on the page?
It appears relative to where it would be on the page; any adjustments is relative to original position
How does settingposition: absoluteon an element affect document flow?
removes it from the document flow
How does settingposition: absoluteon an element affect where it appears on the page?
it becomes relative to the parent (any non-static position)
How do you constrain an absolutely positioned element to a containing block?
change it to a non-static
What are the four box offset properties?
top, left, right, bottom
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 that your CSS rules are written in your stylesheet; The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.
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 (weakest), class, and id selectors (strongest)
Why is using !important considered bad practice?
it makes debugging more difficult by breaking the natural cascading in your stylesheets
What does the transform property do?
reposition elements on the page
Give four examples of CSS transform functions.
rotate, skew, translate, scale
The transition property is shorthand for which four CSS properties?
The transition CSS property is a shorthand property for 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, height, color
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
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?
With percentage, you don’t beed an actual pixel number. It becomes relative to the width/height of a document; more responsive to the change of the document viewport
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.
Cascade rule; the order matters
