CSS

W3Schools CSS

Estelle Weyl's Github

CSS-Tricks

CSS reference

Cascade

MDN Cascade

  • The algorithm defining how to combine property values originating from different sources.
  • CSS declarations (property/value pairs) participate in the cascade. At-rules (@font-face) do not participate.
  • Specificity (mostly) determines property values for each element in cascade.

Specificity

CSS Specificity

MDN Specificity

General rules:

  • A selector will have a three digit score. Higher scored selectors will override styles.
  • Universal selector (*) adds nothing.
  • Type selectors (div) and pseudo-elements (:before) add point to third digit (001) and are thus the weakest.
  • Class selectors (.card), attribute selectors ([type="radio']) and pseudo-classes (:hover) add point to second digit (010).
  • ID selectors (#modal) add to first digit (100) and are the strongest.
  • Count up each selector to get a score (#modal #thing .box a --->> 211). Thus the more specific you are when targeting an element, the more likely it's styles will override others.
  • Inline styles don't really count in a score, but will override other selectors (so they win).
  • !important also doesn't really count, but will beat everything. Avoid it's use since it breaks the cascade.
  • :not(x) --> the negation selector has no value, but it's argument does.
  • if selectors have equal specificity, the last one declared will win out.

Basic Syntax

selector {
  property: value;
}

Example:

p {
  color: red;
  text-align: center;
}

Misc Tricky Stuff

Box Model

All HTML elements are wrapped in boxes. It has the following in order of out to in:

  1. Margin (transparent)
  2. Border (can also have outlines drawn outside of it)
  3. Padding (transparent)
  4. Content

Positioning

Position property specifies the type of positioning method used for an element.

Static: The default. Not affected by top, bottom, left and right properties. Element is position according to the normal flow of the page.

Relative: Top, bottom...will cause element to shift that direction relative to normal position. eg: left: 30px will shift element 30px away from the left.

Fixed: Positioning is relative to the viewport. Element will stay in place when page is scrolled. Top, bottom...will shift relative to top, bottom of viewport.

Absolute: Positioned relative to nearest positioned ancestor.

z-index: Specifies third dimension order of what's visible. Higher z-indexes get priority.

Display/visibility

Block: block elements start a new line after them and take up full width available.

Inline: do not start new lines and only take up as much width as necessary.

display: none; vs. visibility: hidden; Display none will hide the element completely, visibility: hidden will leave space behind where the element should've been and will affect the layout.

Combinators

For combining more than one simple selector.

Descendant Selector: ex: div p { background-color: blue; } Matches all elements that are descendants of the specified element. In this case, all p elements that are nested in a div.

Child Selector: ex: div > p { background-color: green; } Matches elements that are the immediate children of a specified element. In this case, it will select p elements in divs, but not p elements nested in spans within divs.

Adjacent Sibling Selector: ex: div + p { background-color: purple; } Matches all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element. In this case, it will not select p elements nested in the div. It will only select the first p element that follows the div, and it will only select that if it follows immediately after it.

General Sibling Selector: ex: div ~ p { background-color: orange; } Matches all elements that are siblings of a specified element. In this case, it will match all p elements after the div, even if there are other elements in-between.

Pseudo-element

For styling specified parts of an element.

  • ::first-line
  • ::first-letter
  • ::before (can add content, like a GIF, before an element)
  • ::after
  • ::selection (matches portion of element that is selected by user)

Pseudo-class

For a special state of an element

Anchor Pseudo-classes:

  • a:link (unvisited link)
  • a:visited
  • a:hover (will also work on most other elements)
  • a:active

Common matching Pseudo-classes:

  • :first-child
  • :first-of-type
  • :nth-child(n)
  • :not(selector)
  • :nth-of-type(n)
  • :disabled/:enabled
  • :required
  • :valid/:invalid
  • :focus

Attribute Selectors

For styling elements with specific attributes or attribute values.

Examples:

Will select elements with 'target' attribute:

a[target] {
  background-color: magenta;
}

Will select elements with '_blank' value for 'target':

a[target="_blank"] {
  background-color: cyan;
}

Will select elements with 'target' attribute and whose value contains the word 'flower':

a[target~="flower"] {
  border: 5px solid neon
}

Other selectors:

  • |= (selects elements that start with value, must be whole word)
  • ^= (selects elements that start with value, can be partial word)
  • $= (selects elements that end with value, can be partial word)
  • *= (selects elements that contain value, can be partial word)

Transforms

2D and 3D transforms available. Used to change size, position, or orientation of elements.

Common transform functions:

  • translate(x,y)
  • rotate(angle)
  • scale(x,y)
  • skew(x-angle, y-angle)
  • translateX(), translateY(), translateZ(), scale3d(), etc.

Transitions

For changing the property value smoothly over a duration.

Example:

div {
  width: 100px;
  height: 100px;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}

transition-timing-function: specifies speed curve of the transition effect. Possible values:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(n,n,n,n)

transition-delay: wait time before starting effect.

Animations

Example:

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: example 5s linear 2s infinite alternate;
}

@keyframes example {
  from {background-color: blue;}
  to {background-color: green;}
}

Properties (in order for animation shorthand):

  1. animation-name (references keyframe for animation)
  2. animation-duration
  3. animation-timing-function (same options as transition-timing-function)
  4. animation-delay
  5. animation-iteration-count (a number or infinite)
  6. animation-direction (options: normal, reverse, alternate, alternate-reverse, initial, inherit)

Media Queries

Uses @media rule to include a block of CSS properties if a condition is true.

@media only screen and (max-width: 768px) {
    [class*='col-'] {
      width: 100%;
    } 
}

Image Sprites

Image sprites are collections of images in a single file that can be divided up. This will allow you to retrieve many images with a single HTTP request.

#prev {
    width: 46px;
    height: 44px;
    background: url('image_sprites.gif') 0 0;
}

#next {
    width: 46px;
    height: 44px;
    background: url('image_sprites.gif') -47px 0;
}

Flexbox

Flexbox makes it easier to lay out, align, and distribute space within a container.

Flex container properties

  • display: set display: flex; to use flexbox.
  • flex-direction: defines direction in which items are placed.
    • row: the default. Objects go from left to right.
    • row-reverse: objects go from right to left.
    • column: objects go from top to bottom.
    • column-reverse: objects go from bottom to top.
  • flex-wrap: defines whether flex-items fit on one line, or wrap to next line.
    • nowrap: the default. Items will be on a single line.
    • wrap: items will wrap to multiple lines.
    • wrap-reverse: overflow items will move to the previous line instead of the next line.
  • flex-flow: Shorthand for flex-direction and flex-wrap. ex: flex-flow: row-reverse wrap-reverse;
  • justify-content: defines alignment along the main axis (x-axis normally).
    • flex-start: the default. items are packed at the start of the line.
    • flex-end: items are packed at the end of the line.
    • center: items are centered.
    • space-between: items are evenly distributed on the line, but there is no extra space at the front and back.
    • space-around: items are evenly distributed, with space on the front and back as well.
    • space-evenly: items are distributed so that spacing between any two items is equal.
  • align-items: defines alignment along the cross axis (y-axis normally).
    • flex-start: items' top edges are flush with the top of the container
    • flex-end: items' bottom edges are flush with the bottom of the container
    • center: items are centered.
    • baseline: the first lines of items will align.
    • stretch: the default. Items will stretch to fill the length of the container.
  • align-content: defines how extra cross axis space is used when there are multiple lines. No effect when only one line of flex items.
    • flex-start: lines are packed to the top of the container.
    • flex-end: lines are packed to the bottom of the container.
    • center: lines are packed to the center.
    • space-between: lines evenly distributed with no extra space at top or bottom.
    • space-around: lines evenly distributed with equal space around each line.
    • stretch: the default. no extra space around lines.

Flex item properties

  • order: you can change the order in which items are laid out.
  • flex-grow: this property defines how much space the item takes up with respect to the total value for all the items. For example, if four items are present, each with the following values [1, 3, 1, 5], the first item will take up 1/10 of the space, the second 3/10, the third 1/10, and the fourth 5/10. The 10 is the sum of all the flex-grow values of the items.
  • flex-shrink: opposite of flex-grow.
  • flex-basis: defines the default size of an item before the remaining space is distributed. Provide any length.
  • flex: use this shorthand notation in most cases to set flex-grow property. flex-shrink and flex-basis values are the next to optional arguments.
  • align-self: overrides default align-items value from container.

results matching ""

    No results matching ""