pixelated fire

HTML & CSS Cheat Sheet

"It's dangerous to go alone! Take this."

created by: Maria Rodriguez

pixelated fire

HTML Crucials (code+meaning+example)

Code
* = has no closing tag

Meaning

Example

<!Doctype>

Including the DOCTYPE in a document ensures that the browser makes it's best attempt at following the relevant specifications in the document type. This must be the first thing in your document

<!Doctype html>

<html></html>

Tells the browser that your document is an html document

<html>
<head></head>
<body>
<footer></footer>
</body>
</html>

<head></head>

Here is where you link your meta info, stylesheets, and title. If there is an external link you need to use in your code,you can include it here. !Caution: your head can get crowded when linking many font types, consider adding them as a @fontface in css

<head><link href="resources/style.css type="text/css" rel="stylesheet"><
/head>

<title></title>

Holds the title of your page. It will be the name displayed on the browser tab

<title>your cool title here</title>

*
<link>

links your stylesheets, font typeface, and other resources that have are from an external source

<link href="resources/styles.css" type="text/css" rel="stylesheet">

<body></body>

Includes all the page elements that will be shown on the user side. Anything that is within this area will appear on the webpage

<body>
your page content here
</body>

<footer></footer>

the last part of a webpage (optional depending on what the page is intended for). Here you can include an email, privacy policy, contact phone number, copyright symbols to a brand etc.

<footer>
email: blah@blah.com
contact number: 123-456-7891
</footer>

<h1></h1>

indicates the importance of a title or subtitle by size. The default size for this heading is 36px

<h1>

<h2></h2>

indicates the importance of a title or subtitle by size. The default size for this heading is 30px

<h2>

<h3></h3>

indicates the importance of a title or subtitle by size. The default size for this heading is 24px

<h3>

<h4></h4>

indicates the importance of a title or subtitle by size. The default size for this heading is 20px

<h4>

<h5></h5>

indicates the importance of a title or subtitle by size. The default size for this heading is 18px

<h5>

<h6></h6>

indicates the importance of a title or subtitle by size. The default size for this heading is 16px

<h6>

<p></p>

is the tag used for regular sized text in your content. The default size for this text is 16px

<p>just some text hangin' out</p>

<span></span>

this tag is used to target specific words or parts of inline text you may want to style different than the rest of the text. It could be used as an alternative when no other tag makes sense. tip: This comes in handy when you want to style a word within a heading tag, paragraph tag or a navigation element

<p>hello, I am a <span>blue</span> sword</p>

*
<class>

an attribute placed within most opening tags that let's you give your element a name to call on when styling that element in CSS. !caution: if there are multiple words in your class name, make sure to use a dash (-) instead of a space

<h1 class="main-heading">The truth about the sword</h1>

*
<id>

an attribute placed within any opening tag that let's you give your element a name that is unique to it. You can use the name to call on this element to style it in CSS. !caution: there must be no other element that has the same id name within your content

<h1 id="sword-title">The Sword You Need</h1>

<div></div>

is used to separate sections in content. Imagine these as a box. Divs can be nested within divs to separate by theme or section

<div>
<h1>The Quest</h1>
</div>

*
<img>

allows you to insert an image into your content. To indicate the source, and properly link the image you must include the src attribute

relative link: <img src="resources/images/the-image>
absolute link: <img src="https://thatwebsite/thatsubpage/that-image">

*
<br>

allows you to break the line of text you are on to begin a new line of text

<p>this is my first line of text<br>
this is me starting another line<br>
this is yet another line</p>

<em></em>

makes your text appear in italic

<p>this sword <em>will</em> get me through the dungeons</p>

<strong></strong>

makes your text appear bold

<p>this <strong>sword</strong> will get me through the dungeons</p>

back to top

The CSS Crucials (code+meaning+example)

Code
* = has no closing tag

Meaning

Example

font-family

indicates the type of font style used on the selected element.

tip = consider including fallback fonts to make sure your code works well on all modern browsers and older browsers

.blue-sword {
font-family: Helvetica, serif;
}

font-size

defines the size you want for the targeted element text

.blue-sword {
font-size: 20px;
}

color

assigns the color to the selected element text. The color can also be assigned using a HEX code: #000000 or RGB: rgb(134, 133, 56)

.blue-sword {
color: blue;
}

background-color

assigns the background color of the selected element

.blue-sword {
background-color: light blue;
}

padding

the space between the content and the border of a box. It creates a cushion to push the border farther from the content to help make content easier to read

border

the space between padding and the margin. It can be described as the picture frame that holds the picture inside

margin

the space outside of the border. This can be described as a cushion to push other elements of different content boxes, away

back to top

Concepts that beginner Full Stack developers struggle with

Code
* = has no closing tag

Meaning

Example

margin (horizontal alignment)

the best way to think about this type of alignment is to think about your box as it appears in default, margin is at a default of 0. The margin is styled top, right, bottom, left. To the right is the shorthand for this. This styles only left and right sides to automatically align the sides

margin: 0 auto 0 auto;

video (source, src)

video has two words that point to the same attribute. One of the methods uses only one attribute to source a single video. The other method uses both attributes to source multiple videos at once

one video: <video src="resources/videos/a-sword.mp4">message for when video isn't supported here</video>

multiple videos: <video>
<source src="resources/videos/a-sword.mp4">
<source src="resources/videos/swords.mp4"></video>

autoplay

some browsers will not play a video automatically. You'll break your head trying to figure out why your video isn't playing when your code is all correct. The best way to make sure this doesn't happen is by using the attribute "muted"

<video src="resources/that-video" controls autoplay muted></video>

back to top