Table of Contents

Coding

• CSS Styles are loaded from top to bottom. Newer styles overwrite old ones.

• CSS Code Format

  body {				/* Selector. Select by tag */
  	color: red;		/* Attribute: Value */
  }
  
  #idName {			/* Select by ID  */
        
  }
  
  .className {		/* Select by class */
  
  }
  
  body .class h1 {	/* Advanced selector: Search the body tag for a class, then search that class for h1 tags. All the h1 tags will be styled. */
  
  }
  

  • Selector is the HTML element you want to style.
    • Can be a tag, class, or id. Or a sequence of them.
    • Best to use id to style a single unique item, or class for a group of items.
  • Attribute: The property you want to to style. Background color, border, etc.
  • Value: Actual value you set the attribute to.

Style Properties

Sizing

• Container Sizing and Spacing

    ![CSSContainers.jpg](<https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f1920434-bf24-42e1-a735-d4ff68fa8d7a/CSSContainers.jpg>)
  

  • Width/Height of container
  • Border around container
  • Padding:
    • Visible. Used for sizing.
    • Expands the background of the container.
  • Margin:
    • Invisible. Used for spacing
    • Expands the invisible space around the container.

Positioning

• Block vs Inline

  • Some HTML elements create a new line with their own block. Others are displayed inline.

    ![CSSInlineBlock.jpg](<https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ebb4fc90-264a-4e48-9140-9119a0f22da5/CSSInlineBlock.jpg>)
  

  • This can be changed with the display CSS property.

• Float

  • Nearby content will wrap around this element, like making text around a picture in MS Office.
  • The position of this element is set by the value.
    • Float: left positions the container to the left, and all nearby containers will wrap around it.

• Position

  • Manually adjusts the positioning of an element on the page.
  • Use as a last resort. When you can’t fix the positioning of a particular element through other styles.
  • Two ways to reposition
    • Relative: reposition it relative to where it was before.
    • Absolute: reposition it by how far it is from the nearest element.

Text

• Size units
  • % (proportions)
  • EM/REM (scalable size)
  • PX/PT (non-scaling size)
• When to use each
  • %: High-level webpage layout and container proportions.
  • EM/REM: Anything you want to scale with the size of the screen. Font size, margin, padding, content inside containers, etc.
    • EM is better. Scales off font size of nearest parent.
  • PX/PT: Anything you don’t want to scale. Mainly borders.
    • Use PX mostly. It’s for media displayed on screen.
    • PT is for media that will be printed.

Making a Webpage Responsive

• Media Queries
  • Use these as conditionals to apply different values to certain attributes when the screen properties change.
    • Use with these attributes:
      • max-width: For screens with width less than or equal to that amount.
      • orientation: landscape: For screens in landscape (horizontal) mode.
    • Screen sizes to use in media queries:
      • 1024px - Ipad Pro
      • 736px Ipads
      • 480px Mobile Phones

Example: Responsive Images

1. If you need to center the image horizontally or vertically:
   • Make the <div> around your image a flexbox.
   • Use align-items for vertical alignment and justify-content for horizontal alignment.
2. Use max-width and height. Find a max-width that works on your computer as you shrink your webpage.