CSS - Code Snippets

• By default hyperlinks are underlined, how is that removed with css?

  text-decoration: none;
• How do you add left and right padding of 20px?

  padding: 20px;
• How would you set a list to be inline with eachother?

  display: inline-block;
• Should list style be kept for navigation menus?

  no
• How is list-style removed?

  list-style: none;
• How would you center text?

  text-align: center
• How would you set all website text to have a ruleset:

  Specify each element individually and then specify the ruleset
• How do you set margin to 0 and padding to 0:

  {

  margin: 0;

  padding:0;

  }
• how would you set the width of an image to 100% of the viewport?

  width: 100vw;
• What is the property for max width?

  max-width
• How do you ensure that an image maintains aspect ratio with css?

  object-fit: cover;
• vw stands for what in css?

  viewport width
• vh stands for what in css?

  viewport height
• What rule puts an element into the background?

  z-index: -1;
• you can specify a class and then use . to select it in css
• What is flex used for?

  variable element sizes
• How would you make an element increase in size by 50% if flex increases?

  flex-grow: 150%
• To make an element inherit values for properties from their container what should be used in the value?

  Inherit
• Float is positioning an object within a container anchoring it to a side of a container
• Float is used to position images in regards to text
• To set a footer to be at the bottom of a page the easiest way (3 rules) is?

  position:absolute;

  width:100%;

  bottom:0px;
• The default value for 'object-fit' on an element is fill, which scales either the x or y axis to fit the page
• To have an image crop to fit a page use?

  object-fit:cover
• To have an image not be cropped or scaled but instead the whole element being scaled you can use?

  object-fit: contain;
• what is object-position used for?

  To set where the center of an image is on the x axis
• @media does what?

  calls data from the browser, such as max-width
• text-decoration: none; is used to remove things like underline from text
• Border-bottom requires the following what 3 properties to be specified?

  Width

  Style

  color
• margin:auto; centers an element horizontally
• To verticaly center an element you must have a flexbox container