CSS - Inheritance, Combinators, Specificity, Box Model Flashcards
(33 cards)
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.
Why are ‘shorthand’ properties important?
Lesser loading time - less code.
Readability, conciseness.
Instead of this how can you make it shorthand?
padding-top, padding-right, padding-bottom, and padding-left
padding: 5px 10px 5px 10px
(top right bottom left) LIKE A COMPASS.
Create a shorthand for border 5px solid black
border: 5px solid black;
Why doesn’t this div take up the height of the whole page?
<section>
<div>TESTING HEIGHT</div>
</section>
section {
height: 100%;
background-color: red;
}
It fills up the parent whose height is calculated by the content it holds.
What is box-sizing: content-box? And what issues might this cause?
This calculates height and width based on content only.
Can cause styling issues, like overflow.
What is box-sizing: border-box; and why should this be applied * {
} universal selector?
When box-sizing: border-box is applied to an element, its size is calculated based on its content, padding, and border.
In other words, the element’s total size includes its padding and border, and any margin is calculated outside of that total size.
To ensure it is not overridden by default styling from the browser.
How is the size of an element calculated with box-sizing: content-box?
the height and width you put in e.g 20px, 20px, but when you inspect it it will be different, since that’s only the content, not the actual size with padding, border etc.
How is the size of an element calculated with box-sizing: border-box.
It is easier to calculate since the height and width includes content, padding, then border.
Why is margin not calculated with box-sizing: border-box width and height?
Because it is meant for spacing between elements, not the element itself.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
