font-size: 18px; is used to change the HMTL fontsize to 18px.

You can insert an image into the site via CSS instead of HTML by doing this:

• background-image: url("[https://content.codecademy.com/courses/web-101/unit-4/htmlcss1-img_soccer.jpeg](https://content.codecademy.com/courses/web-101/unit-4/htmlcss1-img_soccer.jpeg)");

text-align: left is used to align the text to the left of the container. (Which is also the default.) You can also use right, center and justify. Justify spaces out the text so It aligns to both the left and right side of the element.

color: red; is the name of the colour of the text. (AKA Foreground color)

background-color is the name of the colour behind the text.

opacity: 1; measures the opacity of an element. It is measured from 0 to 1. 0 is completely invisible, 1 is opaque.

• If you do this however, you will effect all the parts within the element. including the background and the text. A way to get around this is the use a colour format that is specific to that trait. Eg.: background-color: rgba(0,0,0,0.5) This will turn the background color to black with a 50% opacity.

!important is used to override the styling of elements. Even if there is another more specific selector, it will override that. Codecademy recommend to rarely use it. One use for it, they say, is when you use Bootstrap, and want to override it’s styling. Eg. color: #FFF !important;

I found a site that shows as, a percentage, which websafe fonts are installed on each operating system. Eg. Helvetica is available on 100% of Mac, but just 7.34% of Windows. https://www.cssfontstack.com/

In the CSS box model, height and width only refer to the content, not the padding, border or margin.

border-styles, there are 10 of them.

• border-style: none;
• border-style: hidden;
• border-style: dotted;
• border-style: dashed;
• border-style: solid;
• border-style: double;
• border-style: groove;
• border-style: ridge;
• border-style: inset;
• border-style: outset;

There are 140 built in color keywords, such as white, black, tomato and coral.

border-radius adds a curve to the corners of an element. You can enter a value in pixels or as a percentage. You will get a perfect circle if you have an element with equal w and h, and a border radius of 50%.

Margins between two horizontal elements do not overlap. Margins between two vertical elements do. The distance between the two is determined by which element has the largest margin. This is called margin collapse.

min-width and max-width are used to determine an element min and max width when displaying it on different size screens.

• The same goes for min-height and max-height.

overflow is a property for elements. It is for if the content is too big for the size of the element. If you set it to overflow: scroll, it will add a scroll bar to the element, so you can scroll throught the content within the element.

• overflow-x and overflow-y are used to customise the horizontal and vertical values.

box-sizing: border-box;

• This alternative to the box model allows you to define the box size by width and height, instead of the content. And any borders will be added into the box, instead of adding dimension to the outside. The content is automatically sized inside the box, based on the remaining space after the padding and border dimensions have been subtracted.

• To implement this new box model, add this to your stylesheet.:

  * { box-sizing: border-box; }

• Remember that the * used as a selector selects every element.

• The default for box-sizing is content-box;

position: relative; will position an element relative to it’s default position on the page. You can also use offset properties such as top: 10px; to position it 10 px away from the top.
These offset properties do no work if the position is set to the default position: static;.

position: absolute; will position the element in an exact position within the parent, regardless if it over laps another element. The other element(s) will simply ignore it.

• You can use offset properties to move the element, just like position: relative;.

position: fixed; is used to fix an element to a certain place on the screen. It will not move if you scroll. It is often used for navigation bars.

position: sticky; is used to stick an element to a certain part of the page when it reaches it during scrolling. So it stays in the flow of the HTML, until you scroll that specified part. That part is mentioned as an offset property, such as top: 250px;

z-index:1; is used to specify which layer an element is on if there are overlapping elements. Similar to stacking layers in Illustrator. z-index doesn not work on static elements.

Colors in CSS are described in three ways:

• Named colors like black, white, red.
• RGB are numeric values of red green and blue.
• HSL are numeric values for hue, saturation and lightness.

Hexadecimal values for colour start of with a hash #.
#FFFFFF is white.

Since the hexadecimal number system has 16 digits, 0-15, letters are used to represent 10-15. So A-F is used.

In HSL it is represented numerically this way:

• hsl(360, 60%, 40%)
• The first number is maximum 360, this represents the degrees on a colour wheel
• The second is the saturation percentage.
• The third is light percentage.

HSLA, this stands for Hue, Saturation, Lightness and Alpha.

• Alpha represents the opacity of the element. It is measured from 0 to 1.
• Alpha also works with RBG and hexadecimal numbers.

Fallback fonts are fonts that a browser will display if it doesn’t have the primary font. Eg.
h1 {font-family: Caslon, Georgia, 'Times New Roman'; }

• In the above rule, Caslon is the primary font, if it is not available, the fallback fonts are Georgia and Times New Roman. This is referred to as the font stack.

You can also list ‘serif’ or ‘sans-serif’ at the end of the stack as the final fallback, this will substitute the font with whatever is the default serif or sans-serif font the browser has.

Not all font-weights are available for every font.

If you want to use a specific premium paid font, you can download it and hosting it with the rest of your site’s files. You need to use a tool called @font-face, and include it at the start of the CSS file.

Google Font’s is a good way to find fonts for your site.