lukyans/HTML & CSS Basics

## HTML & CSS Basics
HTML Skeleton
<!DOCTYPE html> #Declaration is used to inform a website visitor's browser that the document being rendered is an HTML document.
<html> #This tag starts an HTML file and tells browswers what kind of file this is
  <head> #This tag includes information about the document such as the name of the file and other technical information like meat tags and style tags
  </head> #Those with a slash (/) in front of them, are the closing tags

  <body> #where you place all the information that will actually show up on the web page once it is online and opened in a browser.
  </body>
</html>

```
The basic HTML skeleton is the set of tags required of every HTML web page you build.
The tags that make up the skeleton tell browsers what kind of file it is reading,
and without the skeleton HTML files will not be rendered correctly in web browsers.
```
------------------
<head></head>
<title>Some Title</title> #This tag is where you place the title of the web page.
<link rel="stylesheet" type="text/css" href="css/main.css"> #Link to CSS file
------------------
<body></body>
<h1></h1> #tag is used to define HTML headings
<p></p> #tag is used to define HTML paragraph
<img src="img/image1.png"> #img(image) src(source) "path to image"
<a href="http://www.google.com">Google</a> #links are defined with the <a> tag. The href attribute specifies the destination address
<ul> #Defines an unordered list
  <li>Item 1</li> #Defines a list item
  <li>Item 2</li>
</ul> #closing an unordered list
------------------
Semantic Tags
<header> # represents a container for introductory content or a set of navigational links. And typically contains: one or more heading elements (<h1> - <h6>), logo or icon, authorship information
<nav> #represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
<main> #represents the main content of  the <body> of a document or application
<footer> #represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.
<article> #represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable
<aside> #represents a section of a document with content connected tangentially to the main content of the document (often presented as a sidebar).
<section> #means that the content inside is grouped, and should appear as an entry in an outline of the page.
------------------
Non-Semantic Tags
<div> #is used for defining a section of that document. With the div tag, you can group large sections of HTML elements together and format them with CSS.
<span> #is used for grouping and applying styles to inline elements.
------------------

CSS

------------------
Selectors
p {
  background-color: #00F;
  color: #FFF;
} #changes background and text color of the paragraph to red
------------------
Class Selectors
.some-class {
  background-color: orange;
} #changes background color of this class to orange
------------------
ID Selectors
#some-id {
  background-color: purple;
} #changes color of the specified id to purple
------------------
Box Model
```
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
div {
    width: 400px
    height: 100px;
    padding: 20px;
    border: 6px solid gray;
    margin: 20;
}
```
-------------------
Display Property
```
.block {
    display:block;

}
.inline {
    display:inline;
    padding:20px;
    margin:20px;
}
.inline-block{
    display:inline-block;
    width: 400px
    height: 100px;
    padding: 20px;
    margin: 20;
}
.none {
    text-decoration: none;
}
```
-------------------
Floats #specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
h1 {
  display: inline-block; #An inline-block element is placed as an inline element, but it behaves as a block element.
  padding: 20px;
  float: left; #specifies that heading should float to the right
}

.buttons {
  float: right; #specifies that class buttons should float to the right
}
------------------
Clearfix #is a way for an element to automatically clear its child elements, so that you don't need to add additional markup.
.clearfix:after { #CSS pseudo selector (:after) to clear floats.
  content: ' ';
  display: table; #is also applied to the :after element, because if it isn't then that element defaults to "inline", and cannot receive the "clear" property
  clear: both; #Both is the value, which clears floats coming from either direction.
}
#https://css-tricks.com/all-about-floats/
------------------
Detour: Lorem Ipsum #filler text commonly used to demonstrate the graphic elements of a document or visual presentation
Hipster
Bacon
Beer
Seinfeld
Ulysses
	HTML Skeleton
	<!DOCTYPE html> #Declaration is used to inform a website visitor's browser that the document being rendered is an HTML document.
	<html> #This tag starts an HTML file and tells browswers what kind of file this is
	<head> #This tag includes information about the document such as the name of the file and other technical information like meat tags and style tags
	</head> #Those with a slash (/) in front of them, are the closing tags

	<body> #where you place all the information that will actually show up on the web page once it is online and opened in a browser.
	</body>
	</html>

	```
	The basic HTML skeleton is the set of tags required of every HTML web page you build.
	The tags that make up the skeleton tell browsers what kind of file it is reading,
	and without the skeleton HTML files will not be rendered correctly in web browsers.
	```
	------------------
	<head></head>
	<title>Some Title</title> #This tag is where you place the title of the web page.
	<link rel="stylesheet" type="text/css" href="css/main.css"> #Link to CSS file
	------------------
	<body></body>
	<h1></h1> #tag is used to define HTML headings
	<p></p> #tag is used to define HTML paragraph
	<img src="img/image1.png"> #img(image) src(source) "path to image"
	<a href="http://www.google.com">Google</a> #links are defined with the <a> tag. The href attribute specifies the destination address
	<ul> #Defines an unordered list
	<li>Item 1</li> #Defines a list item
	<li>Item 2</li>
	</ul> #closing an unordered list
	------------------
	Semantic Tags
	<header> # represents a container for introductory content or a set of navigational links. And typically contains: one or more heading elements (<h1> - <h6>), logo or icon, authorship information
	<nav> #represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
	<main> #represents the main content of the <body> of a document or application
	<footer> #represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.
	<article> #represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable
	<aside> #represents a section of a document with content connected tangentially to the main content of the document (often presented as a sidebar).
	<section> #means that the content inside is grouped, and should appear as an entry in an outline of the page.
	------------------
	Non-Semantic Tags
	<div> #is used for defining a section of that document. With the div tag, you can group large sections of HTML elements together and format them with CSS.
	<span> #is used for grouping and applying styles to inline elements.
	------------------

	CSS

	------------------
	Selectors
	p {
	background-color: #00F;
	color: #FFF;
	} #changes background and text color of the paragraph to red
	------------------
	Class Selectors
	.some-class {
	background-color: orange;
	} #changes background color of this class to orange
	------------------
	ID Selectors
	#some-id {
	background-color: purple;
	} #changes color of the specified id to purple
	------------------
	Box Model
	```
	Content - The content of the box, where text and images appear
	Padding - Clears an area around the content. The padding is transparent
	Border - A border that goes around the padding and content
	Margin - Clears an area outside the border. The margin is transparent
	div {
	width: 400px
	height: 100px;
	padding: 20px;
	border: 6px solid gray;
	margin: 20;
	}
	```
	-------------------
	Display Property
	```
	.block {
	display:block;

	}
	.inline {
	display:inline;
	padding:20px;
	margin:20px;
	}
	.inline-block{
	display:inline-block;
	width: 400px
	height: 100px;
	padding: 20px;
	margin: 20;
	}
	.none {
	text-decoration: none;
	}
	```
	-------------------
	Floats #specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
	h1 {
	display: inline-block; #An inline-block element is placed as an inline element, but it behaves as a block element.
	padding: 20px;
	float: left; #specifies that heading should float to the right
	}

	.buttons {
	float: right; #specifies that class buttons should float to the right
	}
	------------------
	Clearfix #is a way for an element to automatically clear its child elements, so that you don't need to add additional markup.
	.clearfix:after { #CSS pseudo selector (:after) to clear floats.
	content: ' ';
	display: table; #is also applied to the :after element, because if it isn't then that element defaults to "inline", and cannot receive the "clear" property
	clear: both; #Both is the value, which clears floats coming from either direction.
	}
	#https://css-tricks.com/all-about-floats/
	------------------
	Detour: Lorem Ipsum #filler text commonly used to demonstrate the graphic elements of a document or visual presentation
	Hipster
	Bacon
	Beer
	Seinfeld
	Ulysses