HTML/CSS Flashcards
What is the difference between a block-level and inline element in HTML?
- block-level element always starts on a new line, browsers add auto-margins; inline elements do not start on a new line
- block-level element always takes up the full width available; an inline element only takes up as much width as necessary
- 2 commonly used block elements are: [p] and [div]
- 2 commonly used line elements are: [span] and [label]
What does [position: static;] do?
An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
HTML elements are positioned static by default.
What are the possible values for the position property in CSS?
static, relative, fixed, absolute or sticky
What does [position: relative;] do?
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
What does [position: fixed;] do?
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been located.
What does [position: absolute;] do?
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.
What does [position: sticky] do?
An element with position: sticky; is positioned based on the user’s scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it “sticks” in place (like position:fixed).
What do the async and defer attributes do on a script tag?
- async or defer attributes can be added to the script tag depending on the requirement
- adding defer attribute will make sure that all the scripts are downloaded but will not be executed until the DOM is ready
- the difference between async and defer is that async scripts will not execute in order so If we have 4 scripts included, any script will be executed at any time but that’s not the case with defer.
-so when the scripts are not dependent on each other we should use the async attribute
What is the DOM?
The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language.
The HTML DOM model is constructed as a tree of Objects.
As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.
Explain the CSS box model.
The CSS box model is essentially a box that wraps around every HTML element.
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
How does the “cascade” work in CSS? How does the browser decide what CSS rules to apply to a given HTML element?
The order of CSS rules matters; when two rules apply that have equal specificity, the one that comes last in the CSS is the one that will be used.
Specificity is how the browser decides which rule applies if multiple rules have different selectors: - An element selector is less specific --> lower score - A class selector is more specific --> 3 factors for cascade: Source order | Specificity | Importance
What does a doctype do?
- tells browser which document type to expect.
All HTML documents must start with a declaration.
