HTML Flashcards
Where do you put non-visible content about the HTML document?
Where do you put visible content about the HTML document?
Where do the and tags go in a valid HTML document?
What is the purpose of a declaration?
- Within the head element
- Within the body element
- Within the html element and they are siblings
- Declare what type of HTML it will use
Give five examples of HTML element tags.
What is the purpose of HTML attributes?
Give an example of an HTML entity (escape character).
- h1, p, body, article, span
- Give more information of the content
- $reg;
What is the difference between an ordered list and an unordered list in HTML?
What three HTML elements do you use to build a description list?
- ordered are numbered and unordered are bulleted
2. <dl><dd></dd><dt></dt></dl>
What is an absolute URL?
What is a relative URL?
What other ways can we use an anchor tag?
- absolute - full web address
- relative - linking to a page on own website, don’t need to specify domain name
- going to id (jumping to page)
How do you indicate the parent folder in a path?
How do you indicate the child folder in a path?
How do you indicate the grand parent folder in a path?
How do you indicate the current folder in a path?
- ../
- name of child folder / file name
- ../../
- .
What are the six primary HTML elements for creating tables?
What purpose do the thead and tbody elements serve?
Give two examples of data that would lend itself well to being displayed in a table.
- table, tr, td, th, thead, tbody, tfoot
- screen readers and allow us to style these sections in a different manner
- stock reports, train timetables
Why are forms useful?
What attribute do you have to match between a label and an input?
What type of input allows you to select multiple items in a dropdown?
What is the action of a form?
- Forms allow users to enter data
- for and id
- and child elements
- where and how to send the data
What is the purpose of an HTML form element?
Give five examples of form control elements.
Give three examples of type attributes for HTML elements.
- enter data
- text input, password input, radio buttons, submit buttons, file upload, drop-down boxes
- type, name, id
Why would we choose specific element types when we have elements such as div and span which can be used for anything?
What factors contribute to a well-designed HTML document?
- HTML is coded to represent the data
2. Readability, SEO, Screen readers
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?
Which CSS property pushes boxes away from each other?
Which CSS property pushes box content away from its border?
- Border, Margin, Padding
- Margin
- Padding
What are three important considerations for choosing fonts?
Why must you have backup fonts assigned when selecting custom fonts?
- Readability, Popularity of fonts on browsers, matching theme of browser
- In case the first font is unavailable
What purpose does the CSS Cascade serve?
What is source order?
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
- Determining which css rule should be applied.
- the order that your CSS rules are written in your stylesheet
- Mobile responsiveness
What is inheritance?
Why might CSS include this feature?
Is inheritance a good tool to use for styling? If so, on what occasions?
- inheritance controls what happens when no value is specified for a property on an element.
- readability, efficiency, functionality
- it is, to apply one rule to multiple elements.
What is the purpose of !important?
When is !important a good tool to use?
- increasing specificity
2. Never
What is specificity?
- Specificity is a weight (strength) that is applied to a given CSS declaration
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
What does the transform property do?
- lets you rotate, scale, skew or translate
What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?
first “” and last child selects the last of what the pseudo class is with.
How is specificity calculated?
Determined by the number of each selector type in the matching selector.
Why might CSS include specificity feature?
Helps outside of focusing on source order
What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?
inline style, ID, class, element
What is the CSS Cascade?
factors that decide where styling is applied
How do block-level elements affect the document flow?
Will start on a new line in the browser window. takes available width.
How do inline elements affect the document flow?
Continues on the same line of the elements.
What are the default width and height of a block-level element?
Default takes up the entire space of the content. height: auto. width: 100%
What are the default width and height of an inline element?
takes up enough space to accommodate it’s contents. Height: auto, Width: auto.
What accessibility considerations must be considered when choosing HTML elements?
screen readers.
What is the difference between the block, inline block, and inline display properties?
block - starts on a new line
inline-block - starts on same line but can edit width and height
inline - starts on same line
What are 3 examples of what can be done with CSS transitions?
Change colors, grow and shrink, rotate
Why might transitions be a helpful effect for styling?
Makes the UI more comfortable for users
Are all properties able to be transitioned?
No, only the ones that are animatable
Why are CSS resets helpful for cross browser compatibility?
reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on
Why is it important to be mindful of what you reset with your CSS resets?
Might reset things that have underlying cause and effect
What is an argument against using CSS resets?
Delays loading time for website
What is the default value for the position property of HTML elements?
Static
How does setting position relative on an element affect document flow and where the element appears on the page?
moves an element from the position in normal flow (top, right, bottom, left) does not affect the position of surrounding elements
How does setting position absolute on an element affect document flow and where the element appears on the page?
Positions the element in relation to it’s containing element. does not move as it scrolls up and down
How does setting position relative on an element affect document flow and where the element appears on the page?
the positioned element has taken its place in the normal layout flow, you can then modify its final position, (top, right, bottom, left) does not affect the position of surrounding elements
What are the box offset properties?
top right bottom left
What are the three core parts of a grid system?
container, row, column
Why is it important to use a grid system for CSS layouts?
Maintains proper sizing, makes it easier to work in a team because a team member will understand the code.
What is the default flex-direction of a flex container?
row ( left to right).
What is the default flex-wrap of a flex container?
nowrap (fit all on one line)
Why should flexbox not be used for building complete web page layouts?
While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
What is the default flex-wrap of a flex container?
nowrap (fit all on one line)
What are clears for with floats?
clears allow you to say that no element within the same container should touch the left or right hand side of the box
What were floats originally designed for?
Newspapers, magazines - allows you to take element out of normal flow and position far left or right in container
