Codecademy - CSS 2: Visual Rules

Things I don't want to forget from the codecademy CSS Visual Rules lesson

-To style an HTML element you write CSS declarations inside CSS selectors.
-CSS declarations consist of a property (e.g. colour, size) and a value (e.g. blue, 200px) A colon separates the property and value and a semi-colon is used at the end.
-The entire thing - CSS selector and CSS declaration - is called a CSS rule or rule set.

-Font-family is used to set fonts. The default is Times New Roman if no other is selected. It seems that these are case sensitive (unless that is just codecademy)

h1 {
  font-family: Garamond;
}

-Font-size sets the font size (obvs) and px is used to measure it.

p {
  font-size: 18px;
}

-Font-weight can make things bold. It can also be set to normal (not bold!)

p {
  font-weight: bold;
}

-Text-align can be used to align text to the element's parent. It can be set either to left, center or right.

h1 {
  text-align: right;
}

-Colour properties can be used with CSS rules. Background-color changes the background of the element it is used in. Color changes the foreground colour of it. E.g. the h1 title below would have a blue background and the text would be red.

h1 {
  color: red;
  background-color: blue;
}

-Opacity allows you to set the opacity of an element. It is measured from 0-1.

.overlay {
  opacity: 0.5;
}

-You can make the background of an element an image using CSS. It can either be a URL or relative file path (2nd example is of a pic called mountains.jpg in the main folder called images

.main-banner {
  background-image: url("https://www.example.com/image.jpg");
}

or

.main-banner {
  background-image: url("images/mountains.jpg");
}