Lecture 3: HTML & CSS Basics Flashcards
Why do we need CSS?
You need CSS to communicate efficiently, and it also helps to build the user experience which then helps with prototyping
CSS Anatomy
selector-type {
Property: value;
}
CSS Standard Selectors
Element selector, class selector (. - multiple), id selector (# - unique)
How does CSS read HTML?
<link rel=”stylesheet” href:”./stylesheet.css” type=”text”>
Descendant selector:
(SPACE) .shopcart a {
}
Grouping Selectors
(Commas) p, br, span {
}
Pseudo class Selectors
Enabling styling based on user-interaction, eg. hover.
Eg. element:pseudo-class {}
Eg. a:active { color: aqua; }
Origin precedence rule
last rule wins! The file is parsed top to bottom.
Inheritance rule:
child element in its parents rules, unless declared otherwise
Specificity rule
more specific rules win. You could use the counter to understand the specificity on the css rule eg. (0,0,2) is more specific than (0,0,1).
Final hierarchy:
Inline style > ID > Class > elements
!important takes complete precedence but its bad practice
Box Model:
This makes everything apply inside the box, only the margin is still applied to the outside.
Good practice: Most generic styles go to the top of the css file and then as you go lower it gets more specific.
Box Model Code
content-box (default)
* {
box-sizing : border-box;
}
Content Spilling Over
overflow: visible; overflow: hidden; overflow: scroll; overflow: auto;
Flexbox
.container {
flex-flow: column wrap;
display: flex;
}