Really Important CSS Concepts
This guide will only be useful if you also inspect the HTML markup and styles.
Background Image
Background images can do so many things! However, if the image is semantically really critical to the content of the page, it is better to use an <img> tag.
- Finn
- Jake
- BMO
CSS Transition
I'm a CSS Transition!Inline, Block & Inline-Block
display:inline
Inline elements can have border, padding, margin, width, and height properties. However, the parent element will ignore the child elements' width, vertical padding, and margin in the layout. Also notice what happens when you have a small mobile layout (shrink your browser). This is usually not desireable.
- Princess Bubblegum
- Flame Princess
- Lumpy Space Princess
A good reason to use display:inline list items might be for a short, minimally styled list of links:
display:block
Block elements can have border, padding, margin, width, and height properties. The parent element will retain the child elements' vertical padding and margin in the layout. Elements with display:block are 100% width, unless a width is set.
- Princess Bubblegum
- Flame Princess
- Lumpy Space Princess
A good reason to use display:block list items would be for a vertical menu of things, or possibly a modular layout (described later).
display:inline-block
Inline-Block elements can have border, padding, margin, width, and height properties. The parent element will retain the vertical padding and margin of the child elements in the layout. Elements with display:inline-block are the width of their content, unless the width property is set.
- Princess Bubblegum
- Flame Princess
- Lumpy Space Princess
A good reason to use display:inline list items might be for a styled horizontal nav or possibly a modular layout (described later).
Example of list items with no width (width:auto):
Example of list items with a % width:
Example of list items with a fixed pixel width:
These three lists of links don't seem different until you do one of the following: hover over an item, drop to a mobile size and see what happens, or inspect the CSS:
Quirk #1
With inline and inline-block items, there is a small gap between items. No matter what you do, you cannot get rid of it...
- Princess Bubblegum
- Flame Princess
- Lumpy Space Princess
...unless you do something hacky like this. (Inspect Element)
- Princess Bubblegum
- Flame Princess
- Lumpy Space Princess
Quirk #2
With inline-block items, the alignment gets funky if each item is a different height.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac efficitur.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac efficitur urna, ut tincidunt tellus. Vestibulum ut libero magna. Nullam sit amet metus mauris.
-
Lorem ipsum dolor sit amet.
...and if you give it a set height property, this just happens:
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac efficitur.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac efficitur urna, ut tincidunt tellus. Vestibulum ut libero magna. Nullam sit amet metus mauris.
-
Lorem ipsum dolor sit amet.
...unless you set a vertical-align property...
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac efficitur.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac efficitur urna, ut tincidunt tellus. Vestibulum ut libero magna. Nullam sit amet metus mauris.
-
Lorem ipsum dolor sit amet.
...or vertical-align and height properties.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac efficitur.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac efficitur urna, ut tincidunt tellus. Vestibulum ut libero magna. Nullam sit amet metus mauris.
-
Lorem ipsum dolor sit amet.
Benefits of inline-block
Using the inline-block display property for group of items, there are 3 nice things that happen with your items. If your boxes are all the same height...
- your items can have an automatic width
- when the items fills up the entire horizontal space, overflowing items all start lining up below automatically
- if the parent element has the property text-align:center, the elements that drop down are centered
- Princess Bubblegum
- Flame Princess
- Lumpy Space Princess
- Hotdog Bubblegum
- Breakfast Princess
- Wildberry Princess
- Bounce House Bubblegum
- Ghost Princess
Multi-Column Layouts
"Traditional" Multi-Column Layouts follow one of these structures. With the new-fangled flexbox property, this method will soon die. For now, multi-column layouts have start off more or less with one of the following structures.
Multi-Column Layouts with the float property
The structure for a 2-column float-based layout contains:
- outer container: must have a .clearfix class (or a clear:both property).
- inner containers: margins and widths must not exceed total of 100%
- inner containers: box-sizing:border-box
- inner containers: float:left or float:right
Start with plain 'ol divs:
left
right
Then add the float and width properties. If your inner divs have some padding, margin, or borders, this might happen:
left
right
So you need to add the box-sizing:border-box property to the floating items:
left
right
Except the outer container lost it's height! So you need the apply the .clearfix class to the outer item in your HTML markup:
left
right
This method also works for more than 2 columns. (In this example, everything is floating left).
one
two
three
Even more columns!
one
two
three
four
five
Multi-Column Layouts with the inline-block property
The structure for a 2-column inline-block-based layout contains:
- outer container
- inner containers: margins and widths must not exceed total of 100%
- inner containers: use <!-- --> to comment out the spaces between each inner container (or other equally hacky methods)
- inner containers: box-sizing:border-box
Start with plain 'ol divs:
left
right
Then give the inner containers the property display:inline-block and % widths.
left
right
You need to apply the really dumb hack (see HTML) to remove the spaces between the inner divs
left
right
Apply box-sizing:border-box to the inner containers.
left
right