Positioning Elements
- position: The position property allows one specify the positioning type of an element.
- static – It is unpositioned, this is the default.
- relative – Relative to where they would normally appear.
- absolute – the element has been removed from the normal flow; it is positioned relative to its parent element, or if parent element is static, to the viewport.
- You cannot float an absolute image.
- fixed – the element is positioned in relation to the viewport.
- sticky – positioned relative to nearest ancestor with scrolling box or to the viewport. Support is limited.
- CSS can be added inline, in the head (between <style></style>) or via a linked stylesheet (css” rel=”stylesheet” href=”css_file.css” />).
- Selectors – “A selector designates exactly which element or elements within our HTML to target and apply styles”
- All HTML elements are selectors.
- element { styling }
- Type Selectors – Allows for selecting all elements of one type.
- Class Selectors – Selects a group of elements.
- Use a leading period before class name
- .my-class { styling }
- ID Selectors – Target one unique element.
- Use a leading hash sign before class name
- #my-id { styling }
- Properties – “a property determines the styles that will be applied to that element.”
- element { property: value; property: value; }
- An element can be any HTML tag (minus <>)
- Values
- Linking Stylesheet – <link rel=”stylesheet” href=”main.css”>
- Display Property – Each element has a default display type.
- Block Level Element – e.g., <div>
- Inline Element – e.g., <span> – It only takes up as much width as it needs; thus multiple blocks can appear on the same line.
- None – This removes the element from the rendered code, whereas visibility: hidden only makes the the code disappear.
- Margin Property – When used with a defined width value, keeps the defined element from growing too wide.
- Using auto will center.
- margin-top;
- margin-right;
- margin-bottom;
- margin-left
- Note they move in a clockwise pattern
- Shorthand: margin: 1px 1px 1px 1px;
- Padding Property – Space between the content and the border.
- Can use padding-top, etc.
- Or padding: 1px 1px 1px 1px;
- Operates clockwise (top, right, bottom, left)
- Give value only once in padding if all four sides are equal
- Float Property – left, right
- Clear – left; right; both – Tells an element to get out of the way of elements floating on the left/right, so it moves below them.
- Max-Width Property – This can be used instead of width, this keeps elements from being too large to display on smaller screens (thus requiring scrolling).
- The Box Model – An element displays as the sum of its width, padding, and border, thus the final desired size of the element includes all three of these properties added together.
- Think of each element as being a box.
- By default elements take up the full width of a page.
- You can use display to change that (block; inline-block; inline; none)
- Margin is the space outside of the element and is transparent, it determines how far away one element is from another.
- Border
- Padding is the space between the element and its border.
- Box Sizing Property – Avoid the math of the box model by setting box-sizing to border-box which means the padding and border are included within the width of the element.
- Position Property – The default position is static which is “not positioned”, all other positions are “positioned.”
- static – Usually default.
- relative – Positions relative to where it would have fallen if it was static.
- fixed – Remains in the same position relative to the viewport, thus is always at the same place no matter where on the page one is currently scrolled to.
- absolute – Uses its ancestor element (that isn’t static) rather than the viewport for positioning.