Watch these! The password is go_video_go
- 🎥 00 Intro (code)
- 🎥 01 Syntax (code)
- 🎥 02 Display (code)
- 🎥 03 Box Model (block code | inline code)
- 🎥 04 Margin (code)
- 🎥 05 Inherit (code)
- 🎥 06 Reset (code)
- 🎥 07 Pseudo Content (code)
- 🎥 08 Float (code)
- 🎥 09 Grid (code)
- 🎥 10 Navbar (code)
- 🎥 11 Positioning (code)
- 🎥 12 Glasses (code)
- Box (code): Basic example of inline and block elements, as well as the box-model.
- Box Sizing (code): Example showing the difference between content-box and border-box.
- Form (code): Basic styling of a form with text inputs and a button.
- Modal (code): A modal you can hide and show.
- Table (code): How to style a semantic table. Use for tabular data.
- Toggle (code): A demo of a button toggling visual state using classes rather than inline styles.
- Sprite (code): Replacing text with a sprite image for a button.
- Carousel Simple (code): Creating a simple carousel using floats and jQuery.
- Carousel Advanced (code): Creating an advanced carousel with navigation using positioning and jQuery.
- Center (code): Center a collection of floats, using inline-block.
- Click (code): Create a grid using floats, changing appearance interactively using jQuery and classes (rather than inline styles).
- Positioning (code): Position boxes upon boxes with absolute and relative positioning, additionally showing the power of :hover to allow JavaScript-less interactivity.
- Tag (code): Tag a collection of cats using positioning.
- Input (code): How to style a hipster input.
- Triangle (code): Make a CSS triangle by hacking border properties.
- Thumbnails (code): A thumbnail navigation for a collection of images using jQuery.
- Tooltip (code): Make a tooltip with pseudo-content.
- Single (code): A single page app layout with fixed header and sidebar using positioning.
- Checkbox (code): Make a fancy checkbox slider using its label.
- Responsive (code): A responsive landing page using media queries and web fonts.
- Vertical (code): Vertically center an image in a fixed height parent container.
- Page (code): A full styled page, with navigation bar using floats, a dropdown absolutely positioned, and a two column floated layout. Note the semantic use of HTML tags and classes.
- Post (code): A demo of a styled collection of posts. Uses floats and semantic HTML.
- Google (code): A replication of Google's home page.
- How to use the browser inspector for CSS/HTML
- Semantic HTML
- Classes/ids
- CSS selector precedence
- Default browser styles
- Box model (margin, border, padding, width/height)
- Display block and inline
- Document flow
- Floating and clearing
- Pseudo content (:after/:before)
- Clearfix (use .group)
- Positioning (static, relative, absolute, fixed)
- Pseudo classes (:hover/:active/:focus)
- Box sizing (change the way the box model is calculated)
- HTML is concerned with structuring content
- CSS is responsible for how to present content
- Push all visual presentation into CSS
- Avoid inline style declarations on HTML elements
selector {
property: value;
}- !important ->
a { color: red !important } - inline style ->
<div style="color:green;"></div> - id ->
#cat - class or pseudo-class ->
.cats - element or pseudo-element ->
h1
- The more specific selector wins
- If equally specific, the last declared one wins
- Styles cascade, if not overwritten
- Avoid !important, inline styles and id selectors. They do not lead to dry, maintainable code.
- You can apply your styles to multiple selectors at once by separating them by commas:
selector1, selector1 { property: value; }
🎥 05 Inherit (code)
- Setting a property to
inheritwill cause it to take its property value from its parent element - We leverage inherit to greatly DRY up our styles
- Example: if we set the font property on all
<article>tags to inherit, then we only need to define the font once on the<body>tag and now all articles will be set in the same font. - Inherit makes sense on properties like
font,color,text-align - It does not make sense on properties like
margin,padding,border,background. Can you explain why?
- All elements are represented as rectangular boxes on a page
- Everything is a rectangle!
- The area a rectangle takes up is determined by:
- width/height of content
- padding
- border
- margin
🎥 03 Box Model (block code | inline code)
- The default way to calculate an element's size is:
- width/height + padding + border
- In other words, if you set width/height, it is exclusive of padding and border. You need to add them to the width/height to get the total size an element takes up on the page.
- This default way of calculating the box model size is called content-box
- The
box-sizingproperty lets us change the default way of calculating an element's size - Rather than using the default content-box value, as described above, we can set it to border-box to have the width and height be inclusive of the padding and border
- Margin is like private space, it collapses
- Margin is see-through, not part of element
- Cannot be given background, not part of element
- Margin can be set to auto to distribute left and right margin space
- Margin can be negative, pulling the element and any that follow in the negative direction
- Weird gotcha: margins push through top and bottom of any direct ancestor elements that do not have a border or padding, or their overflow set to visible
- Padding is part of an element, margin is not
- Margin collapses, padding always takes up space
- As part of the element, padding can have a background, margin is always see-through
🎥 02 Display (code) :movie_camera: 03 Box Model (block code | inline code)
- Specifies the type of rendering box used for an element
- The bread and butter values of display are:
- none
- block
- inline
- inline-block
- There are several more exotic types such as table and flex
- Turns off the display for the element. The page is rendered as though the element did not exist.
- Element expands to full width of parent container
- Height stretches to fit content inside
- You can manually override height and width properties
- Block elements stack vertically, cannot be next to each other naturally
- The default property for display
- Cannot contain block elements
- Inline follows text flow
- Think of inline elements as words that flow in a paragraph, they follow each other, are placed on a baseline, and wrap if they do not fit in the parent container
- Elements take up minimal width and height to accommodate content
- You cannot manually set height and width
- Padding and margin only work sensibly left and right, pushing other inline elements horizontally away
- Vertical padding and margin overflows and is often undesired
- Browsers (also known as User Agents) have an internal stylesheet
- You see them in action when you have a plain HTML page without any declared styles
- They are sensible defaults, but differ slightly per browser
- This stylesheet is loaded before any of your declared styles
- In order to be intentional about our own styles, we reset the properties the User Agent Stylesheet declares.
- This prevents surprises and unexpected conflicts with the styles you write yourself
- We put our reset styles at the top of our stylesheet
- Resets consist of zero-ing out box-model properties and setting color and font properties to inherit
- I prefer to be intentional and list the exact used tags to reset:
html, body, section, article,
h1, h2, p, strong, em, a {
margin: 0;
border: 0;
padding: 0;
outline: 0;
box-sizing: inherit;
font: inherit;
text-decoration: inherit;
text-align: inherit;
color: inherit;
background: transparent;
}- Used to inject content inside an element
- You can either inject after or before the present content inside an element
- Acts as inline elements inside element by default
- Can take any styling
- Needs a declared content property
- Content property can be a string or select an element's attribute
- Example of string content:
h1:before {
content: ":)";
}- Example of attribute content:
a:after {
content: " (" attr(href) ")";
}🎥 08 Float (code) :movie_camera: 09 Grid (code) :movie_camera: 10 Navbar (code)
- The float property floats an element to the left or right side of its parent container
- Used to align block elements next to each other
- A floated element shows up at the expected position
- Takes up minimal vertical/horizontal space to accommodate content
- Does not stretch height of parent container, it sticks out
- All content that follows wraps/flows around, unless cleared
- To tell an element that it cannot wrap around a floated element, you define the
clearproperty on it - Setting
clearon an element is like it saying: "I refuse to wrap around any floated element, thus I will show up below the floated element."
🎥 08 Float (code) :movie_camera: 09 Grid (code) :movie_camera: 10 Navbar (code)
- To make a parent element extend to the full height of all floated elements inside it, we apply the clearfix
- It injects a pseudo element inside the parent container with the clear property
- In doing so this pseudo element will show up below the floated elements
- Since this pseudo element is just a regular element, it will stretch the height of the parent to accommodate it
- We don't want this pseudo element to show up visually, so we just set it to an empty string, effectively making it a 0 height element
- It's a trick! Memorize it, but be able to reason about it
- Prefer a semantic name as
.groupfor the class you add to the parent container of the floats
.group:after {
content: "";
display: block;
clear: both;
}🎥 11 Positioning (code)
- Visual stacking order of elements
- All other things being equal, the order in which elements are declared in a document dictate the visual stacking order. Elements declared later are in front visually.
- Z-index is a way to overwrite the default stacking order.
- Only applies to elements positioned
relative,absoluteandfixed - Just a number, no units
- Numbers get compared
- The greater the number, the more in front
- A positive z-index is in front of anything that has no declared z-index, or has a negative z-index
- A negative z-index is behind anything that has no declared z-index
- Nesting matters, setting z-index on a parent container also dictates its children
- If a parent element has a low z-index, and its child has a high value, the child does not pop out, as the parent still has a low value
🎥 11 Positioning (code) :movie_camera: 12 Glasses (code)
- Default for each element
- Takes up its normal space in document flow
- No nudging
- No z-index
- Informally considered as "not positioned"
- Shows up like static by default
- Takes up normal space in document flow
- Can be nudged with left/right/top/bottom
- Nudging offset is "relative" to its original position in document flow
- Creates a new coordinate system for children that are
absolute - Cannot nudge conflicting properties
leftandrightortopandbottomat the same time - Allows z-index to be set
- Switching from
statictorelativecan usually be done without any consequences in layout - Most often used to contain absolute positioned elements or to set a z-index on an element
- By default shows up at the position where it should in document flow
- Does not take up space on the page, it is lifted out
- Offset coordinates are relative to the nearest ancestor that is not
positioned
static. If none is found, then the window is used - Creates a new coordinate system for children that are
absolute - Allows z-index to be set
- Margins work but do not collapse
- The box of the element will take up minimal horizontal and vertical space, unless overwritten by
widthandheightproperties - You can set both
leftandright, and/ortopandbottomproperties at the same time, this will stretch the element and is surprisingly useful
- Offset coordinates are relative to the window, not the document
- Stays fixed in place to the window, even as the document scrolls
- Not all windows are the same size, so the element may be off the page, never to be seen
- Use carefully! Don't block the window!
- Otherwise, behaves the same as
absolutepositioned elements:- By default shows up at the position where it should in document flow
- Does not take up space on the page, it is lifted out
- Creates a new coordinate system for children that are
absolute - Allows z-index to be set
- Margins work but do not collapse
- The box of the element will take up minimal horizontal and vertical space, unless overwritten by
widthandheightproperties - You can set both
leftandright, and/ortopandbottomproperties at the same time, this will stretch the element and is surprisingly useful
- By default a block container expands vertically to accommodate its content
- If you set a fixed height on an element, but the content needs more space, it flows out of it by default
- With the
overflowproperty we can control what happens when content does not fit - Weird gotcha: If the
overflow: hiddenproperty is set on a static element, it can only clip static children - To clip absolute positioned children with this property, the parent cannot be positioned static itself, but will have to be set to relative (or absolute or fixed)
- Calc is a CSS function that can be used anywhere you may want a length value
- You can combine different units, making it extremely useful to subtract pixels from percentages
- You can do addition, subtraction, multiplication, and division
- You can use parentheses to denote order
- Example:
width: calc((100% - 100px) / 2)