html & css Flashcards
Where do you put non-visible content about the HTML document?
In the head tag
Where do you put visible content about the HTML document?
In the body tag
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?
Declare the type of document
Give five examples of HTML element tags.
p, html, head, title, img
What is the purpose of HTML attributes?
Indicates what kind of extra information you are supplying about the element’s content
Give an example of an HTML entity (escape character
Copyright symbol (©)
How do block-level elements affect the document flow?
Block-level elements will always start on a new line
How do inline elements affect the document flow?
Inline elements will continue on the same line as neighboring elements
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
What are the default width and height of an inline element
Only takes up as much width & height that it needs
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.
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
Anchor tag
What is an absolute URL?
A URL that will take you to the specific domain of another website
What is a relative URL?
A URL that takes you to different pages on the same website.
How do you indicate the relative link to a parent directory?
../
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 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 do you indicate the relative link to the same directory?
Just list the file name
What is the purpose of an HTML form element?
To submit information to a server
Give five examples of form control elements.
Radio, Checkbox, Password input, Submit, File upload
Give three examples of type attributes for HTML elements.
text, password, radio,
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, 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)
