CSS Practice

Descendant Combinator

li a {
 color: blue;
}

• Selects any elements nested after the previous tag
• a child of li

Comma Combinator ( , )

li, a {
 color: blue;
}

• Selects li and a

Adjacent Combinator ( + )

li + a {
 color: blue;
}

• Selects sibling elements which come directly after the first tag given

Direct Child Combinator ( > )

li > a {
 color: blue;
}

• Selects and element that is only a direct child of the first tag given

Attribute Selector ( input[type="text"] )

li[type="text"]{
 color: blue;
}

• Selects elements that only have the specified attribute

Pseudo Classes ( : )

li:hover{
 color: blue;
}

• Pseudo classes modify html elements that are in a specific state
• :hover - for example - changes the styling when the cursor is hovering over an element.
• :nth-of-type(2n) - set's that every specified ( n ) of the prefixed specified tag selector will be styled.
   :nth-of-type(3n) == every 3rd element is styled, and so on.

Pseudo Elements

( :: ) Keyword added to a selector that lets you style a particular part of selected elements

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection

Visit the MDN page to see a full list of pseudo-elements.

The Cascade

The order that style rules are declared matters - things that are declared afterwards (lower) in the chain will take precedence.

This counts for the HTML Link to CSS stylesheets as well. The links in the head of an html document that come lower in the chain get higher precedence.

• Inline-styles have a higher specificity than anything declared in an external document (other than !important)
• !important wins as the highest specificity. Don't use it it's bad practice.
• CSS Sections will inherit other

Useful Links

• Specificity Calculator
  For determining which CSS Tags have the higher specificity.

The Box Model

CSS is based on boxes

Border Properties

• border-width: ; Controls the thickness of the border
• border-color: ; Controls the color of the border
• border-style: ; Controls the line style - dashed, solid, etc.
• box-sizing: border-box;
  This makes it so that the width of our element goes from border-to-border, not just the width of the contents inside the border.

Display Property

Units

em's and rem's

em's are relative units that relate to font size

• With font-size, 1em equals the font-size of the parent.
• 2em's is twice the font-size of the parent element, etc
• When using margin/padding, 1em = the font size of the current element.

rem's are relative to the root html element's font-size.

• If the root font-size is 20px, 1rem is always 20px, 2rem is always 40px, etc

Misc. Useful CSS Properties

position

static

All elements have a default value of static

relative

This will keep the element where it would normally be placed.

• The element can be moved relative to itself
• The space where the element should be is still reserved as if the element was there

absolute

Removes the element from the normal flow of the document

• No space will be reserved for the element
• If the element is not nested within a positioned element, it will be absolutely positioned relative to the body element (ie the document as such)
  "Positioned" means the parent/any ancestor element has a position other than static

fixed:

Like absolute, but positioned relative to the viewport/document and stays in place even when the page is scrolled, etc

• Positioned relative to the initial containing block
• Except when one of its ancestors has a transform, perspective, or filter property set to something other than none. In which case, said ancestor behaves as the containing block

Transitions

Useful Links to Help with Transitions:

The default timing function for transition animations is 'linear'

• It is a good idea to specify each property's transition state rather than just having a blanket transition for an entire element.

Transform

This is pretty much an animation technique to transform the way elements look - their position, their rotation, etc.

The origin of where the transform takes place can be changed with
transform: origin;

• transform-origin: top-left;
• transform-origin: left;
• transform-origin: 50px 50px;
• transform-origin: bottom right 60px;

Various Transform Values

• rotate(angle)
• rotateX(angle) - X, Y, Z
• scale(x, y)
• translate(x, y)
• skew(deg)

Transform applies to everything within a html container

Background

background-color: ~;

background-imaged: url("~");
This can also take in linear-gradients for color gradients, etc

background-size: ~; For determining how the image is sized. MDN Reference

background-position: ~; ======= Determines where the background starts

"background: "~"; is a shorthand property that can contain all of the more verbose background-properties.

In the background shorthand - the background size value may only be included immediately after <position>. Like this: center/80%
Read this for more info

• You can have more than one background

Google Fonts

• Copy links and css rules to use the fonts
• To be able to use larger or smaller font-weights, they have to be selected prior to including the links

Flexbox

Withing a flexbox container, there are two axes (+)

• Main Axis: (Default Horizontal) --
  • By default, the main axis aligns items from left to right
• Cross Axis: (Default Vertical) |

Flexbox Properties

• flex-direction
  • Changes the default direction that flex items are displayed
  • flex-direction: row; Default value
  • flex-direction: row-reverse; displays items from right to left
  • flex-direction: column; Displays the items as a vertical column - first item starts at the top. This flips the main axis so that it's vertical.
• justify-content
  • How the items are distributed along the main (default - horizontal) axis
  • justify-content: flex-start; Default Value, starts the items from wherever the axis starts (as defined by flex-direction)
  • justify-content: flex-end; The content moves ends flush with the right side of the container
  • justify-content: center; Centers the content on the main axis
  • justify-content: space-between; Takes all of the extra space and distributes in between the container's items.
    • But NOT on the outside edges
  • justify-content: space-around; Gives every element the same about of space on the left and right of it
  • justify-content: space-evenly; Gives exactly the same amount of space between elements - including to the left and right side of the container
• flex-wrap
  • Determines whether items wrap to the next line or not
    • flex-wrap moves things along the cross axis
  • flex-wrap: wrap; Lets the content wrap to the next line (Or the next column if the flex-direction is column/column-reverse)
  • flex-wrap: wrap-reverseThis reverses the orientation of the cross axis so that things wrap from the other end and in the opposite direction.
• align-items
  • Aligns flex items (container contents) along the cross-axis
  • align-items: flex-start; Aligns items to the beginning of the cross axis
  • align-items: flex-end Aligns items to the end of the cross axis
  • align-items: center; Aligns Items to the center of the cross (default vertical) axis
  • align-items: baseline; Aligns items to the bottom of the text inside the containers items
    • Think of baseline as drawing a straight horizontal line through the bottom of all the letters on the first line of text - and that is what everything is aligned to.
• align-content
  • Controls or distributes items along the cross axis - but only if there are multiple rows or columns
  • Think of it as creating space between the rows, or space between the columns
  • Acts like justify-content does on the main axis - but on the cross axis
  • align-content: space-between
  • Equal space between the columns/rows - no space on the edges
  • align-content: space-around
  • Even space on either side of each row/column (relative to the cross axis)
  • align-content: space-evenly
  • Exactly the same amount of space around every column/row including between the rows/columns and the sides of the container
  • align-content: flex-start
  • All row/columns start at the start of the cross axis ()
  • align-content: flex-end
  • All row/columns start at the end of the cross axis
• align-self
  • Added to individual items within the flex container
  • Aligns items in a container themselves within the cross axis
• flex-basis: ~width
  • The main axis length measurement of the items within the flex container
    • Applied to the items within the container
  • When flex-basis: width is applied, the normal width property of the element(s) is ignored.
  • The initial size setting for the items before they're added into the flex container. It may be a width or a height depending on whether the main axis is horizontal or vertical
• flex-grow:
  • The rate and ratio that individual items within a flex container will grow relative to other elements
  • Controls the amount of space the element takes up: IF there is available space
  • A max-width will set the maximum amount of space that this element can grow to within the flex container
  • It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

• flex-shrink:
  • The rate and ratio that individual items within a flex container will shrink relative to other elements
  • Default value is 1
  • it can accept 0

• Flex (Shorthand Property)

  • flex: 'flex-grow#' 'flex-shrink#' 'flex-basis: width';

Responsive Design & Media Queries

Making a site that can respond to the size of the device one is on.

Media Queries

"Use this code when the site is X size." "Use that when in landscape mode, etc."

All media queries begin with @media () {}

Example:

• @media (max-width: 40%) {}
•  Inside the parenthesis are different media features - different parameters
• @media (min-width: 30em) and (orientation: landscape) {
   .class-rules {}
  }

Commonly used media features

• Height
• Width
• Orientation

The minimum width that the screen viewport can be for these effects to take place

• min-width is bet for mobile-first design
• The first

@media (min-width: 800px) and (max-width: 800px) {
 h1 {
   color: purple;
 }
}