<li></li>
List item
<ul></ul>
Unordered list
<ol></ol>
Ordered List
attribute | height=400
Inline adjust the height of an element
attribute | width=400
Inline adjust the width of an element
<img src=" "/>
Creates an image tag
attribute | target="_blank"
Opens link in a new tab
attribute | href = " "
Put the direct link in here
<a href=""></a>
Create a hyperlink
<hr/>
Create a horizontal line
<br/>
Create a line break
<i></i>
Make text italic
<strong></strong>
Make text bold
<h6></h6>
6th heading size
<h5></h5>
5th heading size
<h4></h4>
4th heading size
<h3></h3>
3rd heading size
<h2></h2>
2nd heading tag
<h1></h1>
Largest heading
<p></p>
Creates a paragraph tag, wrap around text
element{
background-color:red;
}
font-family values
'Helvetica', sans-serif | font name and serif choice
font-family:
Change the font of the text
border-width: 10px etc
Change the width of an element
border-color: any color
Color of the border
border-style:
Type of border | dotted | solid
border: solid red 1px
Create a red border around an element
text-decoration values
underline | overline | line-through
text-decoration:
Add or remove underline
font-size values:
10px | 1rem | 1em
font-size:
Change font size of a text element
background-color:
Change the background color of an element
color:
Change text color, takes any color value
<div class="grand-parent">
<div class="child">
<p class="grand-child">Hello World!</p>
</div>
margin & padding values
10px | 1rem | 1em
display: flex
Create a flexbox in CSS
attribute | ID:
same as class, use only one per element
attribute | class:
Sets class for a specific CSS style
<span></span>
Like a div, but behaves inline
padding:
Controls space inside an element
margin:
Controls the space outside an element
<div></div>
Creates a box
<footer></footer>
container for footer
<aside></aside>
container for sidebar
<section></section>
break up sections in document, you can use divs inside
<main></main>
container for main content
<nav></nav>
container for navigation
<header></header>
container for header
<body></body>
holds everything visible on a web site
<script src=""></script>
connect JS file, src stands for source
<link /> attributes
ref="stylesheet" href="/css-file.css"
<link />
holds CSS file, self closing
<title></title>
title tag for document, shows in tab
<head></head>
holds links to CSS, JS, and font files. meta & title tags too
<html></html>
HTML tags that holds ALL others
:space-around
even space around the elements
:space-between
even space in between the elements
:center
elements to the middle of the box
:flex-end
elements to the end of the box
:flex-start
elements to the start of the box
justify-content:
Change layout of a set of children in a flexbox
display values
block | inline | inline-block | flex | none
display:
Change default behavior of element
@media only screen and (max-width: 320px)
typical iphone 4
@media only screen and (max-width: 1200px)
typical laptop
@media only screen and (max-width: 962px)
typical large tablet or landscape mode
@media only screen and (max-width: 768px)
typical tablet
@media only screen and (max-width: 450px)
typical iphone 5
@media only screen and (max-width: 600px)
Only show on screens that are less than 600px