CSS_STRUCTURE.txt

				h1 {
 				 color: blue;
				}

	The above rule set selects the <h1> element. 
	color: blue;          is the CSS declaration.
	|         \
	|          \
	|           \
     Property      Value







									CHANGING FONTS

	h1 {
	  font-family: Garamond;
	}


	This code would change the font of all h1 
	headings to Garamond


	It is important to note that for a font to
	load, it must already be installed on a 
	user's computer.


	If no font-family is defined, HTML will
	always default to Times New Roman

	Try not to use more than 2 or 3 typefaces
	on any webpage. 

	When the typeface consists of more than one
	word, it is a good idea to enclose 
	the name in quotes (e.g.):


	h1 {
	  font-family: "Courier New";
	}



		Non User Fonts are fonts which are stored elsewhere
		than on the User's computer.
		->These can be linked to with the <link> element
		  or using @font-face.
		->Google Fonts is a popular repository of these. 





									FONT SIZE

font-size

(e.g.)			p {
			  font-size: 18px;
			}

px means Pixels



		[A pixel is one of several units of measure in web development. It is an absolute 			
		 unit equal to 1/96 of an inch.

		Rems and ems are scalable typographic units which are commonly used with the font-size property.
		 As opposed to pixels, both of these units are relative. For example, an em is measured relative
		 to the font-size of an element. When dealing with ems it is important to realize that the font-size 
		 of an element is often inherited from an ancestor element. On the other hand, rems are determined 
		 based on the font-size of the html element. If font-size is not defined on the html element, the browser’s 
		 default font-size is used instead (usually 16px).

		There are pros and cons of each unit but one major advantage of using relative units is that they lend 
		themselves more naturally to responsive design. Relative units like ems and rems are flexible and scalable whereas pixels are not.]




									FONT WEIGHT
		


font-weight controls how bold or thin a font is. (e.g.):

							p {
							  font-weight: bold;
							
							}

		The font would be made bold.

font-weight: bold;

font-weight: bolder;

font-weight: lighter;

font-weight: normal;   

This status will selectively turn off any font-weight manipulations.


Try to stick to just bold and normal.







									FONT-STYLE

font-style: italic

font-style: normal;








									TEXT-DECORATION

text-decoration: underline;

text-decoration: overline;

text-decoration: line-through;

text-decoration: none;


	->Underlines should generally only be used for links.






									TEXT-TRANSFORM

text-transform: capitalize;      Turns the first letter of every word to capital

text-transform: uppercase;       Makes all text UPPERCASE

text-transform: lowercase;	 makes all text lowercase

text-transform: none;






									TEXT-SPACING

letter-spacing: normal;
word-spacing: #px;

line-height: length, #px, (# times the font size), %, normal;






									TEXT-ALIGN

text-align: left, center, right, justify;







									TEXT-INDENT

text-indent: length, %

	-> Used for printed media, but rarely for pure webpages. 




									ALIGNING TEXT
By Default, all text on a browser will be Left-Aligned 

text-align: left; center; right

padding-top: 10px;

width: 100%;
















									MARGINS
									   &
									PADDING

Margin is the space outside of something

Padding is the space inside of something

margin: 20px;

padding: 40px;

	->These may also be done as such:

margin-top
margin-right
margin-bottom
margin-left

etc.








									BORDERS

border-style: The values can be solid, dotted, dashed, double, groove, ridge, inset and outset;

border-width: #px;    or    
border-top-width:
border-right-width;
border-bottom-width;
border-left-width;


border-color:



									BOX MODEL	



https://screenshots.firefox.com/nPzQNWPCcJibKQs9/www.htmldog.com

~/Pictures/images/Screenshot_2018-10-15\ Margins\ and\ Padding\ HTML\ Dog.png






									  COLOR

The Foreground and Backgroud color can be manipulated, as well as the text color.


color: red;

background-color: green;

(e.g.):					h1 {
 					 color: red;
 					 background-color: blue;
					}


					-> Here the text of the heading will appear red
					   The Background of the heading will appear blue


Linear Gradients can be used for the colorof the background to make it fade across the page.

background: linear-gradient(-45deg, #C46E41, #00FFD1);




														OPACITY

Opacity is the measure of how transparent something is.

It is measured from 0 to 1 (e.g.):  				.overlay {
								  opacity: 0.5;			[.overlay element would be 50% visible]
								}


This can be used to make things fade nicely into each other.



														BACKGROUND-IMAGE

background-image

The background can be set to an image stored elsewhere (a url, directory)


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

								or to a relative path


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