CSS - Inheritance, Combinators, Specificity, Box Model Flashcards
Type selectors (e.g. p, div, span)
Inline styles (e.g. style=”color: red;”)
Class selectors (e.g. .my-class)
ID selectors (e.g. #my-id)
Rank these in order of specificity
inline, ID selectors, class, type
How can you reset the style sheet? And where should you apply this rule?
body {
margin: 0;
padding: 0;
}
OR
<head>
<link></link>
</head>
(for more properties)
At the top of the css sheet
In this code, which style will be applied and why? span {
font-size: 20px;
}
span {
font-size: 100px;
}
2nd one- takes precedence - read top to bottom, anything below overrides the top.
Which tag has the lowest specificity?
Universal Selector *
What are pseudo classes?
Special selectors that allow you to style an element based on its state or context.
:hover - styles an element when the mouse pointer is over it.
:active - styles an element when it is being clicked or touched.
:focus - styles an element when it has focus, such as when a user clicks on a form field.
Why is it better to style <body> for a universal style in html not *?
Body selects only elements that are shown on the page, not slow it down with <head> <title> etc. * Can style unintended elements like h1.</title>
if you style all h1 tags to have a particular font size with *, you may unintentionally affect the font size of other headings on the page, or even of other elements like form labels or buttons.
Readability
What is the browser default styling?
Provided by the browser. Can vary e.g
Font: The default font used by most browsers is usually a sans-serif font, such as Arial or Helvetica. The font size is typically 16px for most elements.
Text color: The default text color is usually black.
Background color: The default background color is usually white.
Margins and padding: . For example, the default margin for a body element is usually 8px.
What is a combinator and why are they used?
ul li {
/* styles here */
}
Descendant Selector (space): This combinator selects all elements that are descendants of a specified element. For example, the following selector targets all li elements that are descendants of a ul element:
WHY?
To create more specific selectors. E.g you may just want one h3 header to be green, the rest you want blue.
Why is it called ‘box model?’
In CSS, the term “box model” refers to the way in which elements are represented as rectangular boxes on a web page
What is content and padding?
Content: This is the actual content of the element, such as text, images, or other media.
Padding: This is the space between the content and the border of the element. Padding can be used to add additional space between the content and the border.
What is border and margin?
Border: This is the line that surrounds the element. Borders can be used to add a decorative element or to separate the element from other elements on the page.
Margin: This is the space between the border of the element and the neighbouring elements. Margins can be used to create space between elements or to create a visual separation between elements.
Why might a specific margin of a box be already styled? How can this be overcome?
From the body. Put margin: 0; in body tag.
What is margin collapsing?
Margin collapsing, also known as margin collapse, is a phenomenon that occurs when the top and bottom margins of adjacent elements collapse into a single margin.
This happens when the margins of two adjacent elements come in contact with each other, and the larger margin value “wins” while the smaller margin value is discarded.
What are ‘block’ elements? And why is it called block?
div, p, h1 through h6, ul, ol, li, form, and table.
They create a rectangle and take up the full width of the page. They are stacked on top of each other like blocks.
In block level elements e.g what can change - the height or the width?
The height- according to amount of content.
By default, block-level elements take up 100% of the available width of their parent container.
