HTML & CSS
HTML
Hyper Text Markup Language
Think of HTML like the structure of a house. There is a foundation, walls, doors and windows.
HTML is broken out into specific elements. Each element should have a semantic meaning to the site.
This allows us to create a manageable separation to our site.
Common Elements
<div> {content} </div>
<span> {content} </span>
<img />
<ul>
</ul>
<li> </li>
<li> </li>
<ol>
</ol>
Common Elements Continued
<h1> {heading} </h1>
<nav></nav>
<section></section>
<footer></footer>
Semantic Element
Semantic Element
Semantic Element
<p> {paragraph} </p>
<a> {link} </a>
Heading Elements
<h1> 24px </h1>
<h2> 22px </h2>
<h3> 18px </h3>
<h4> 16px </h4>
<h5> 12px </h5>
<h6> 10px </h6>
Know that this is just scratching the surface. There are dozens of additional elements available
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<span class="company-name">Company</span>
<ul>
<li>
<a href="">Home</a>
<a href="">About</a>
<a href="">Contact</a>
</li>
</ul>
</nav>
<section>
<div class="hero"></div>
</section>
<section class="image-container">
<img src="link to image" alt="description of image">
<img src="link to image" alt="description of image">
</section>
<footer></footer>
</body>
</html>
That's
Too
Much
Lets break it down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
</html>
<!DOCTYPE html>
Lets the browser know what kind of document is being served.
<html></html>
The outer most element. Everything lives inside of it
<head></head>
Where the brains of our project live. Specific information about the site will be stored here
<body>
<nav>
<span class="company-name">Company</span>
<ul>
<li>
<a href="">Home</a>
<a href="">About</a>
<a href="">Contact</a>
</li>
</ul>
</nav>
<section>
<div class="hero"></div>
</section>
<section class="image-container">
<img src="link to image" alt="description of image">
<img src="link to image" alt="description of image">
</section>
<footer></footer>
</body><body></body>
Where the magic happens. This is the "foundation" and where we will put our "walls, doors and windows". The body element is a sibling to the <head> element, inside of the <html> element
CSS
Cascading Style Sheet
CSS is the color of our house, the size of the windows and position/color of the door.
Selectors
Classes -> .class-name
IDs -> #id-name
Elements -> elementName
.hero {
/* Properties go here */
}
#btn {
/* Properties go here */
}
button {
/* Properties go here */
}Some common ways to select your HTML
Specificity/Cascading
CSS follows two main rules. Cascading and Specificity.
Cascading: CSS flows from the top of the file down. If there is a conflicting selector lower in the file, it will apply that styling UNLESS...
Specificity: CSS follows a specificity, or weighting system. Some selectors carry more weight, meaning they will be applied over lesser selectors, even if they are below the heavier selector
Elements: 1
Classes: 10
IDs: 100
Inline / !important: Always win
The higher the weight, the more specific that selector is. The more specific style always wins regardless of order.
What
Are
Properties?
height
width
color
font-family
background-color
padding
margin
z-index
position
display
font-weight
border
Properties
There are literally hundreds of additional properties in CSS.
A few units of measurement
px : pixels
% : percentage
em : relative to the font-size of the element
CSS Box Model
Think of every element like a box. The box model is a structure to how we can manipulate that box
Content
Sling
Some
Code
HTML & CSS
By jonmcd
