HTML & CSS Cheatsheet

HTML Tags

Tags Use Example
<h1> The h1 tag is used for the main heading, it also ranges from h1 - h6, h6 being the least important heading. <h1>HELLO WORLD!</h1>
<p> The p tag is used for paragraphs. <p>This is a Paragraph.</p>
<a> The a tag is a self closing tag and is used for creating hyperlinks it also includes a href attribute to make it go to the right place. <a href="#" >Take me Home!</a>
<ul> The ul tag creates an unordered list using <li> tags to make each item. <ul> <li>Im a List item</li> <li>Im also a list item</li> </ul>
<ol> The ol tag is like the ul tag but instead of the list be unorderd this creates an ordered list with numbered points. <ol> <li>Im a List item</li> <li>Im also a list item</li> </ol>
<br> The br tag is a self closing tag that breaks up a paragraph onto a new line. <p>Im a <br>
split paragraph</p>
<button> The Button tag is pretty self explanitory, it creates a button <button>I'm a button</button>



CSS Attributes

Style Attributes Use Example
color: ; The color attribute changes the color of the selected element's text. Color: red; (This would make the text red)
font-family: ; The font-family attribute changes the font of the selected element. font-family: Helvetica; (This would make the font Helvetica)
font-weight: ; The font-weight attribute changes thickness of the selected elements text i.e bold, regular, thin etc. font-weight: bold; (This would make the text bold)
backgroung-color: ; The background-color attribute changes the color of the selected elements background. background-color: purple; (This would make the background purple)
background-image: ; The background-image attribute makes the background of the selected element a image, it uses a URL() to show where the image is stored. background-image: URL(./images/image.png); (This would make the background image, image.png)
text-decoration: ; The text-decoration attribute adds or removes an underline to the selected element. text-decoration: none; (This would remove the underline of an element most commonly used for removing the underline on an <a> element)
border: ; The border attribut adds or removes the border around an element. border: 1px solid black; (This would add a black border that is 1px thick)