/* 1. In this lesson, we will learn various CSS properties, in order to gain a basic understanding of how to style a webpage. 

There are many very useful CSS properties, and we will not have time to look at all of them, but there are some great explanations available here: 
https://www.w3schools.com/cssref/

The first property we will discuss is color. 

We have learned that there are many colors that you can write out, for example blue, darkblue, magenta etc. 

We can get any color we want by using Hex color codes. These are 6 digit codes that begin with a # sign. 

Here is a link to a color picker, where you can choose any shade that you want:

https://htmlcolorcodes.com/

At the top of the page, you will see HEX, RGB, and HSL. These are all methods that we can use to specify colors, but we will use hex codes. Once you pick a color that you like, you can simply copy the hex code at the top, and paste it into CSS, for example:

*/

body {
  background-color: #248179 
}

/* 
Notice that like with color names, we do not put quotes around our hex code. 

//////////////Practice/////////////////
Use the link: https://htmlcolorcodes.com/ to pick a color that you like. In CSS, change the background color of the body to that color using the hex color code. 
//////////////////////////////////////

Now we will briefly move over to JavaScript, to demonstrate how we can change the color of something in JavaScript. 

3. Font Family:

We will look at a couple of different ways to change the font of our text. 

The font-family property is responsible for changing our text in CSS. 

There are some fonts which are already programmed into CSS. Learn more here: https://www.w3schools.com/css/css_font.asp

The basic types of fonts are: 

1. Serif: serif fonts have a small stroke at the edges of each letter. 
2. Sans-serif: sans serif fonts have clean lines (no small strokes attached). 
3. Monospace fonts - here all the letters have the same fixed width.
4. Cursive fonts: they imitate human handwriting.
5. Fantasy fonts: decorative/playful fonts.

When we speficy a font using the font-family property, we should specify the name of the font, a backup font from the same family, and then the family itself. We do this because not all browsers display fonts the same way. By giving the font-family property options, it will ensure that the font is as close to what you want as possible. 

Look at the w3schools link for some font names: https://www.w3schools.com/css/css_font.asp

Example:

The following code will change the font of our pargraph to a monospace font, Courier New. The backup font will be a very similar monospace font, Courier. Finally, the font family, monospace, will be added. 

*/

#para {
  font-family: "Courier New", Courier, monospace
}

/*

If the browser doesn't recognize the first font (the preferred one) it will default to the second, then third. 

////////////Practice///////////////
In your pen, make a paragraph with an id in HTML, and add some text. In CSS, select your paragraph using the id. Change the font-family to a different font, remember to specify alternate fonts in case the browser doesn't recognize your first choice. Refer to the w3schools website to find fonts, or search CSS fonts.
///////////////////////////////////

Another way to specify font is to get a font from google fonts, and load it into the HTML of your webpage. 

First, go to the google fonts website, to find a font that you like: https://fonts.google.com/

Choose a font, and click on it. You will see a button on the example of the font that says "select this style". Click on that, and information about the font will appear in the right-hand panel. 

In the panel, you will see a section that says "Use on the web." Here, you can choose either <link> or @import. Choose the @import option. 

Select everything in the <style> tag, including the opening and closing tags, and copy it. Then, paste it into your HTML. 

Now, you can use this google font for any of your HTML elements. Simply copy the CSS font-familly property provided by google fonts and apply it to the element(s) of your choice. You can load as many google fonts into your HTML as you want. 

Example: 
There is a google font loaded into the HTML, which will now be accessed and applied to the div with the id "fontDiv"

*/

#fontDiv {
  font-family: 'Fascinate Inline', cursive;
}

/*

////////////Practice/////////////
In your pen, make a new header with an id and some text. Find a google font you like, and load it into your HTML. In CSS, access your header using its id, and copy the font-family property from your google font. 
//////////////////////////////////

4. Sizing 

Size units in CSS:

Size units in CSS are either absolute or relative. 

Absolute means that the units are fixed, and will prescribe a specific height/width to an element. This does not always work well over multiple platforms and screen sizes. 

An example of an absolute size value is px (pixels), which we have already used. 

Relative specifies a size relative to another size, for example relative to the parent element (if an element is inside another element, the outside element is the parent, and the inside one is the child) or relative to the size of the screen. 

The relative units that we will learn include vw, vh, and em. 

vw and vh stand for viewport width and viewport height. The viewport is the browser window size. 

vw and vh and equal to 1% of the width and height of the viewport respectively, so if you have a viewport that is 50cm wide, 1vw would be equal to 0.5cm. 

height and width properties can be used to set the size of an element.  

For the div with the id of "sizeDiv", if I uncomment the following code, you will see the div change in size. If I pull the screen up and down, the height will change. 

*/

#sizeDiv {
  background-color: white;
  width: 10vw;
  height: 20vh;
  border: 5px solid black
}

/*

In order to stop an element going above or below a certain size, we can use the properties: max-height, max-width, min-height, and min-width.

The div #sizeDiv1 has the same height and weight properties as sizeDiv, but has a min-height and min-width in pixels. Notice that when the page is moved around, the height and width do not go below a certain size, whereas with #sizeDiv, they do. 

*/

#sizeDiv1 {
  background-color: lightgoldenrodyellow;
  width: 10vw;
  height: 20vh;
  min-height: 50px;
  min-width: 120px;
  border: 5px solid white;
}

/*

% percentage 

Another relative size unit is % (note, this does not mean modulus when used in CSS!). 

This is used for % of the parent element. When a div is inside the body of the webpage, the body is its parent (the div is the child). If a div is inside another div, for example, the inside div is a child of the outside div - its parent. 

The divs with the ids "outsideDiv" and "insideDiv" show this. 

The outside div width is set to 30%, which will be 30% of the viewport

The inside div width is set to 80%, which will be 80% of the outside div. 
*/

#outsideDiv {
  background-color: lightgreen;
  width: 30%;
}

#insideDiv {
  background-color: violet;
  width: 80%
}


/*
A commonly used size unit to resize text is em. 

If a document has a font-size of 16, 1em will be this font size. So em is basically equivalent to whatever the specified font-size of a browser is. 

You can set font-size with em. You can also set width and height with em, meaning that the size of the element is relative to the size of its font. 

In the example sizeDiv2, the text is 1.5 times bigger than the default. The height of the div is 1 times the height of the text. em can be a bit more confusing with length, because 1em would be 1 times the length of a character, not the text as a whole. 

*/

#sizeDiv2 {
  background-color: paleturquoise;
  font-size: 1.5em;
  height: 1em;
  width: 8em
}


/*

////////////////////Practice/////////////////////
In a new pen, make three divs with different ids. Give them all some text. 
In CSS, give them all a background color. 
For the first one, resize the font using the font-size property, and px. Next, resize the height and width using px. 
For the second, resize the font using vh, and resize the height and width using vh and vw. 
For the third one, resize the font using em, and resize the height and width using vh and vw. Give a max-height and max-width. The max-height should be in vh, and the max-width should be in px. 
/////////////////////////////////////////////////

Position:

To move an element to a different position, the top, bottom, left, and right properties can be set using sizing units. In order to use these properties, the position property must be specified in CSS, which controls the behaviour of elements in relation to the viewport and/or one another

Below is an example of the position, top, and left properties. 

*/
#sizeDiv2 {
  position: absolute;
  top: 400px;
  left: 30px
}

/*

position is a CSS property, which can be set to the following values

(Changing the value of the sizeDiv element above can demonstrate the different position values).

static - this is the default, an element will be positioned in terms of the order of the HTML elements. 

relative - An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

fixed - An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.

absolute - An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

///////////////////Practice//////////////////////////
In HTML, create four divs. Give them all the same class and different ids. Give the first one the text Static, the second Relative, the third Fixed, and the fourth Absolute. 
Using their shared class, style them all by enlarging the text to 3em, giving a background color, and setting the height to 1em and the width to 250px. Give them a border with the values 2px solid white. 
Now, set their individual positions using their ids and the the position: property. Set the first one to static, the second to relative, the third to fixed, and the fourth to absolute. 

Set the right value of the second one to 100px. You will see that it moves further away from the right than its normal position. 
Set the right value of the third and fourth ones to 100px. You will see that they actually move 100px from the right of the viewport. If you reduce your screen size to very small, you will be able to scroll up and down and see the difference between fixed and absolute. 
////////////////////////////////////////////////


////////////Exercises/////////////

//1. Load a google font into your HTML. 
// Make a header with some text, and give it an id. Set the font of your header in CSS to your google font. (Access it using the id).

// In JavaScript, write a function that changes your text from normal to italic and back again. 

//You will need to store your header in a variable, and use style.fontStyle to first check if your font is not equal to "italic". If it is not, change it to "italic", then add an else statement that changes it to "normal"

//Invoke your function using setInterval, and set an interval of your choice!

//2. Load a second font from google fonts, and apply it to the body of your webpage, so every element will have that font. 

// Create a div in HTML, and put the text Products in it. Give it an id. Make three divs inside that div, and give them all the same class but different ids. Put the text of three different products that you would like to sell in them. 

// In CSS, style your outside Div. Give it a background color, and use size units of your choice to size the font, and the height and width.  Give it an absolute position, and play around with the top and left properties to get it into a position that you want. 
// For the inside divs, style their font-size and width in their class (so they're all the same), then change their background colors individually. 



////////////Extra Exercises: 
1. Make a button, which, when pushed, prints out the date as a string to the window. You will need to:
- make a button with some text and an empty paragraph in HTML. 
- store a date object in a variable. 
- make a function that prints the date object (as a string) to the innerHTMl of your empty paragraph. 
- put an onclick in your button. 
Next, style your button and your paragraph text in CSS! Make them look nice! You must change at least 3 CSS properties for each. 
*/