HTML & CSS Flashcards
Where does non-visible content about the HTML document go?
It is contained in the <head> element.
Where do you put visible content about the HTML document?
It goes within the <body> element.
Where do the <head> and <body> tags go in a valid HTML document?
They go within the <html> document with the <head> appearing before the <body>.
What is the purpose of a <!DOCTYPE> declaration?
Is to inform the browser of what type of file is coming in. Also with older versions of HTML the version of HTML is declared. In HTML 5 <!DOCTYPE html> is all that is needed.
Give five examples of HTML element types.
<header>, <h1>, <form>, <p>, <input></input>
</p></form></h1></header>
What is the purpose of HTML attributes?
HTML attributes are are their to give more information about a particular element, whether to change functionality or for styling purposes.
Give an example of an HTML entity (escape character).
The copyright symbol and registered trademark symbol. Written like so i.e. ©
How do block-level elements affect the document flow?
They take up the whole width of the page and as much height as needed by the content.
How do inline elements affect the document flow?
They only take up the amount of space as their content requires.
What is the difference between an ordered list and an unordered list in HTML?
An ordered list, is for things that must be in order and will be labeled 1,2,3 etc. And unordered lists items do not need to be ordered in a particular way and have simple bullet points.
Is an HTML list a block element or an inline element?
<li> elements are block elements and each one will appear on a new line.
</li>
What HTML tag is used to link to another website?
The <a> tag with an href=”” attribute is used to link to another website.</a>
What is an absolute URL?
An absolute URL is a link to a page outside of the current pages file system.
What is a relative URL?
A relative URL will direct the page withing the current file system.
How do you indicate the relative link to a parent directory?
You can use ../ to move “up” one directory.
How do you indicate the relative link to a child directory?
“directory-name/-file-name” will indicate the chile directory to enter for the next file or a grandchild directory.
How do you indicate the relative link to a grand parent directory?
../../ and you add another ../ for every directory up.
How do you indicate the relative link to the same directory?
You just need the file name. eg, href=”index.html”
What is the purpose of an HTML form element?
The purpose is to gather or submit a information request from the server.
Give five examples of form control elements.
input, label, button, text-area, text
Give three examples of type attribute values for HTML <input></input> elements.
radio, checkbox, email
What is a pseudo-class?
A pseudo class, is a keyword added to a selector mainly used for interactivity.
What are CSS pseudo-classes useful for?
Allows you to add styling based on the interactivity being selected.
What CSS properties make up the box model?
Padding, Margin, element size.
| , |
29
What purpose do the thead and tbody elements serve?
Separates the table into, a title type element of and the main part of the data in
30
Give two examples of data that would lend itself well to being displayed in a table.
Financial information, airline schedules. But most data can be displayed in a table.
31
What are the names of the individual pieces of a CSS rule?
The selector, the declaration block. And usually, however can be left blank, the key-value pair of the property and value.
32
In CSS, how do you select elements by their class attribute?
.class
33
In CSS, how do you select elements by their tag name?
Just write out the tag name with no <>
34
In CSS, how do you select an element by its id attribute?
#id
35
Name two types of units that can be used to adjust font-size in CSS.
pt, px, rem
36
What CSS property controls the font used for the text inside an element?
font-family
37
What is the default flex-direction of a flex container?
The default it a row, left to right.
38
What is the default flex-wrap of a flex container?
Flex defaults to no-wrap cramming all items into one row.
39
Why do two div elements "vertically stack" on one another by default?
divs are block level elements and naturally take up the full width of the page.
40
What is the default flex-direction of an element with display: flex?
The default is row or x-axis.
41
What are the three primary components of a page layout? (Which helper classes do you need?)
Container, row, column.
42
What is the minimum number of columns that you should put in a row?
1 row minimum.
43
What is the default value for the position property of HTML elements?
Static, position offsets have no effect.
44
How does setting position: relative on an element affect document flow?
Document flow is unaffected.
45
How does setting position: relative on an element affect where it appears on the page?
Offest values move the object relative to its original position.
46
How does setting position: absolute on an element affect document flow?
Removes it from the document flow and other elements ignore it.
47
How does setting position: absolute on an element affect where it appears on the page?
It moves the object based on next parent that is not static, or the body.
48
How do you constrain an absolutely positioned element to a containing block?
You set the parent to a non-static position. Generally relative.
49
What are the four box offset properties?
top,bottom,left,right.
50
What are the four components of "the Cascade".
inheritance, specifity, source order, !important
51
What does the term "source order" mean with respect to CSS?
Where the rule is applied.
52
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritable properties
53
List the three selector types in order of increasing specificity.
element, class, id
54
Why is using !important considered bad practice?
It makes it harder to make changes, especially when working with multiple groups.
55
What does the transform property do?
Allows you to manipulate elements with css.
56
Give four examples of CSS transform functions.
scale, rotate, skew, translate
57
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, transition-delay
58
Give two examples of media features that you can query in an @media rule.
screen size
and print screen preview.
59
Which HTML meta tag is used in mobile-responsive web pages?
meta, viewport.
|
|---|
