| HTML Tags - General | ||
|---|---|---|
| Tag | Name, Usage or Example | Description |
| <!DOCTYPE html> | First line of code in HTML as shown to left | Used to let the browser know what version of HTML to expect |
| <html> | HTML | Used to encapsulate everything else below within the page |
| <body> | Body | Any visible content of page goes between tags |
| <h1> | Heading & Classification | Used to mark headers level 1-6 (largest to smallest) |
| <p> | Paragraph | Used to encapsulate a paragraph |
| <head> | Head | Information about the webpage and link to CSS and resources along with title |
| <title> | Title | Appears within the head, usually the name of the page or site |
| <header> | Header | Should be the first visible tags, header info and graphics should be contained within |
| <nav> | Nav | Should contain the navagation area info and links toward the top of the page |
| <main> | Main | Everything within that is considered main information of the site should be contained here |
| <footer> | Footer | Everything you want within the footer should be contained here |
| <section> | Section | Defines areas on page such as chapters, headings, areas of the site with the same theme |
| <article> | Article | Holds info that makes sense on its own such as articles, blogs, comments, etc… |
| <aside> | Aside | Info related to the main content but not required to understand the main article |
| <figure> | Figure | Used to hold pictures or media related to the main article |
| <figcaption> | Caption | Used to caption item within the <figure> tags, <figcaption> tags are placed within the <figure> tags |
| <span> | Span | Used inline text to differentiate it from the rest of the text or as a way of adding specific CSS elements |
| <div> | Div | Used to group a set of elements to style together, used with id= or class= attributes |
| <em> | Italicizes text | Surround text with these tags to italicize text |
| <strong> | Makes text bold | Surround text with these tags to bold text |
| <br> | Break | Used to create a line break on page or to space items apart |
| <ol> | Ordered List | Tags used to encapsulate an ordered list (1, 2, 3...), used with <li> to list items within ordered list |
| <ul> | Unordered List | Tags used to encapsulate an unordered list (with bullets), used with <li> to list items within unordered list |
| <li> | List | Tags used to encapsulate list types to give lists individual items inside of either Ordered or Unordered List tags |
| <img> | <img src=”insert link here”/> | Used to add images to a website with link to resource. <img src=”insert link here”/> |
| <video> | Video | Used to add video to a website with link to resource. <video src=”insert link here”/> |
| <embed> | Embed | A less specific way to add an image or video without specifying type. <embed src="insert link here"/> |
| Height=”insert value here” | Used to add dimensional data to image | |
| Width=”insert value here” | Used to add dimensional data to image | |
| controls | Enter within video element to give user controls to play media | |
| autoplay | Enter within video element to autoplay the video | |
| loop | Enter within video element to loop video | |
| <a> | Anchor | Used to create links to other elements. <a href="location of link">Anchor</a> (this would link the word "Anchor" to the link you provided in "href") |
| target="_blank" | Adding this element to an anchor opens link in new tab or window | |
| id="name" | ID Attribute | Can be added into the end of beginning tag for HTML attributes to add assigned rules in CSS. More specific than using class attribute and will override class attribute. |
| class="name" | Class Attribute | Can be added into the end of beginning tag for HTML attributes to add assigned rules in CSS. More specific than using class attribute and will override class attribute. |
| <!-- comment -->> | Invisible Comment | <!-- notes or code within these tags will not appear--> |
| <table> | Table | Used as the beginning and end tags of one table. <table>"Encapsulate tags on one table"</table> |
| <thead> | Table Head | Used only to specify the data to mark each column at the top of a table, give them a name. <thead>"enclose the table head tags within these tags"</thead> |
| <tr> | Table Row | Adds a table row. <tr>"Table Row"</tr> |
| rowspan="#" | enter a number to span multiple rows | |
| <th> | Table Header | Heading info is added within this element. <th>"Table Header Info"</th> |
| colspan="#" | Center a number to span multiple columns | |
| <tbody> | Table Body | A tables main body of tags and information is contained within these tags-usually under <thead> data. <tbody>"A tables main body of info"</tbody> |
| <td> | Table Data | Add info within these tags to add data into the cells of a table. If more than one column of data, then enter multiple <td>'s consecutively. <td>"add data here"</td> |
| <tfoot> | Table Foot | Used only to specify the ending line of data. <tfoot>"add tables foot data within these tags"</tfoot> |
| CSS Selectors and Properties | ||
|---|---|---|
| Selectors and Rules | Example | Description |
| Universal Selector | * {} | Applies rule to all elements of page |
| class selector | in HTML tag add "class='name'", in CSS specify class as ".name" and add rule | Allows you to add rule to specific classes of items (multiple names can be added in HTML tag seperated by a space and selected by individual names in CSS) |
| id selector | in HTML tag add "id='name'", in CSS specify id as "#name" and add rule | Can only be used once per page to add single value and override class selectors |
| HTML Attribute | in HTML href or img can be referenced in css with square brackets[] | If more than one instance of an attribute in a page such as an image, in css would specify with "a[src*='name'] to only specify the difference in the file names |
| Psuedo elements | p:first-letter {} | First-letter and first-line are examples of psuedo elements. Add an ":" at the end of a selector to specify |
| Psuedo class | Used for items that change after an interaction such as clicked file link, or button is pushed | To select in CSS, add a "p:" before the type of action you want to style. Ex: p:focus p:visited p:disabled p:active p:hover . |
| Chaining Selectors | h1.special {} | Used to select specific elements within a class, in this instance we would be selecting to style a "Special" class inside of header element |
| Descendant Combinators | .main-list li {} | The ability to select nested inside other HTML elements, in this example selecting listed items inside of a specific list with a class (has to be direct descendant) |
| Combining Selectors | h1, .menu {} | Instead of h1 {} and .menu {} having the same color rule, combine the selector and add the same rule to both to avoid repetition |
| font-family | font-family: georgia, times, serif; | Defines the typeface, can include multiple fonts by name seperated by a comma in case the first font cannot be loaded. Link to online source by adding <link href="fonts.fonts.com" rel="font">, then in CSS use the name used in "rel". |
| font-size | font-size: 12px; | Controls the size of the text in either pixels(px), percentages of the default 16px size (16px=100%, 32px=200%), or by em (relative size of parent element 32px=2em) |
| font-weight | font-weight: bold; | Defines how thick or thin text is diplayed, accepted values are "normal" or "bold" |
| font-style | font-style: italic; | Italicizes text when set to "italic", otherwise set to "normal" |
| line-height | line-height: 1.4em; | Controls the vertical spacing between lines of text. Values are in em, usually around 1.4em, increase or decrease as preferred |
| text-align | text-align: left; | Places text in the left right or center, accepted values are "left", "right", "center" or "justify" |
| word-spacing | word-spacing: 0.2em; | Sets the space between words. Values can be in pixels (px) or in (em) ex: 0.2em |
| letter-spacing | letter-spacing: 0.5em; | Sets the space between the letters. Values can be in pixels (px) or in (em) 0.5em |
| @font-face | Example:
@font-face {
font-family: 'MyParagraphFont'; src: url('fonts/Roboto.woff2') format('woff2'), url('fonts/Roboto.woff') format('woff'), url('fonts/Roboto.ttf') format('truetype') } |
Used to download fonts and have them be part of our website without using a link. Download fonts, insert them into your linked fonts folder in your resources. Create a font family on the first line and give it a name, then add src urls to the fonts. Once added you can reference it like other installed fonts. |
| color | color: red; | Defines the color of the text by color name, hexidecimal, RGB and HSL colors |
| background-color | background-color: red; | Defines the color behind the text by color name, hexidecimal, RGB and HSL colors |
| opacity | opacity: 0.5; | Makes elements transparent, accepted values between 0.0(no opacity) to 1.0(fully opaque) |
| background-image | background-image: url("images/tulip.gif") | Sets background of an element with an image, ex: set with url("images/sample.jpeg") |
| !important | color: blue !important | Overrides any style, shouldnt be used unless necessary, hard to override. Add after any property (ex: color: blue !important) |
| padding | padding: 10px 5px 10px 15px; | Amount of space between content area and border set in pixels (px). |
| border | border: 10px 5px 10px 15px; | Thickness and style surrounding content area and padding |
| margin | margin: 10px auto 10px auto; | Amount of area between outside edge and border of the element |
| Shorthand edge values | For padding, border and margin= 1 value=1 value for all sides, 2 values= first value for top and bottom, second value for sides, 3 values= first value for top, second for sides, third for bottom, 4 values= values entered clockwise starting from top position | |
| border | border: 3px solid coral; | Line surrounding element, values added are width(defined in px), style (solid, dotted, dashed, double, groove, ridge, inset, outset, hidden/none) and color |
| border-radius | border-radius: 5px; (or 50%) | Sets the corners of a border into a curve in the amount of pixels instucted, or adjusting it with percentage amount with amount equaling the size. A border has four corners, so setting a value of 50% would create a circle because each corner is up to 50% of the images size |
| padding-top/right/bottom/left) | padding-top: 10px; | Sets specific amounts of padding per instruction given in pixels and side indicated (Can be used instead of padding shorthand) |
| margin-top/right/bottom/left | margin-top: 15px | Sets specific amound of space outside of the margin in pixels and side indicated (Can be used instead of padding shorthand). Using an "auto" element here will in place of a side size will center it within its containing element. Note: horizontal margins add together, vertical margins do not and will assume the largest of the two values. |
| min-height/width max-height/width | min-width: 300px; max-height: 150px; | Places limits of properties of elements box can be viewed depending on differing displays/screen size |
| overflow | overflow: scroll; | Controls what happens to content that spills outside its box. Values are Hidden-overflow data will be hidden from view, scroll-scrollbar will be added so additional content can be viewed, visible-overflow data will be visible outside its element |
| visibility | visibility: hidden; | Elements visibility can be adjusted by 3 values, hidden-hides the element, visible-displays element, collapse-collapses element. |
| box-sizing | box-sizing: content-box; | Controls the type of box model used. Default is content-box: affected by thickness and padding, border-box: height and width remain fixed, border and padding included inside |
| position | position: static; | Allows you to specify the position of an element. Values are static-default, relative-moves an element from where they would normally be in pixels or percentage, using top bottom left or right, absolute-element no longer tied to normal flow of the rest of the elements, adjusted using directionals, fixed-positions element in relation to browser window, adjusted using directionals. |
| z-index | z-index: 10; | Controls the order in which overlapping boxes appear or what sits on top of what. Accepts values by number, highest numbers equal what box sits on top, lowest on bottom |
| display | display: inline; | Allows you to control how a element flows vertically or horizontally in a document, a feature often used in navigation bars. Values accepted are inline-causes block level element to act like an inline element. block-causes an inline element to act like a block-level element. inline-block-causes block level element to flow like an inline element while retaining features of a block level element. none-hides element from page |