Structures website content.
| Tag | Name | Description |
|---|---|---|
| <h1-6> | Heading | Emphasizes text from 1-6, 1 being largest. Used for heading the beginning of information |
| <p> | Paragraph | Most common for larger chunck of text |
| <a> | Anchor | Used to specify the text that is the "anchor" for a link. Used in conjunction with "href" and "target" attribute. |
| <div> | Division | A division in a section in a HTML document. Can be styled by using the "id" or "class" attribute. |
| <span> | Span | Target a piece of content that is in-line with others. Can be styled by using the "id" or "class" attribute. |
| <em> | Emphasize | Places text in italic |
| <strong> | Strong | Places text in bold. |
| <br> | Break | No closing br needed. Places a line break. |
| <ul> | Unordered List | Creates a list in no order using bullet points. |
| <li> | List Item | Places the item in the list |
| <ol> | Ordered List | Creates a numbered list |
| <img> | Image | Self Closing at the end "/>". Adds a image. Uses "src" attribute to link the image and "alt" for description. |
| <video> | Video | Adds a video. Uses the "src" attribute to link the video |
| Tag | Name | Description |
|---|---|---|
| <!DOCTYPE html> | N/A | Placed in the first line of HTML. Lets the web browser know we are using HTML |
| <HTML> | HTML:5 | Creates a HTML Structure version 5 |
| <link> | Link | Links HTML to CSS. Needs the "rel" and "href" attribute. Placed within the head of the HTML file. Self Closing. |
| <head> | Head | Placed inside the 'HTML:5'. Contains the metadata for a webpage. Info about the page itself. |
| <title> | Title | Placed inside the 'Head'. Gives the browser tab a title. |
| <a> | Anchor | Used to specify the text that is the "anchor" for a link. Used in conjunction with "href" and "target" attribute. |
| Linking to same page | Give the target a "id". When you want to have a link/anchor go to that spot use "#(id name)" to go. Useful when applying a navigation tool. |
Provides additional information about an element.
| Tag | Name | Description |
|---|---|---|
| href="" | URL | Specifies the URL of the page the link goes to. Goes inside the opening anchor, before the first ">". |
| target= | Target | Specifies where to open the linked document. "_blank" is new tab. Goes after the href. |
| <alt> | Alternative | Alternative text description for image. Used in conjction with "img" |
| src="" | Source | Specifies the URL of the audio file. Used in "audio" element. |
| type="" | Type | Lets the browser know what type of audio. Used in the "audio" element. |
| controls | Controls | Adds the play/pause, volume, and fullscreen to player. Used in the "video" element. |
| <autoplay> | Autoplay | Video automatically plaing once page is loaded. Used in the "video" element. |
| <loop> | Loop | Video will continuously play. Used in the "video" element. |
| rel="" | Stylesheet | Describes the relationship between HTML and CSS. Since linking to stylesheet, value will be "stylesheet". |
| Tag | Name | Description |
|---|---|---|
| <table> | Table | Creates a table |
| <thead> | Table Header | Only the colum headings marked by "scope="col"". Has to have its own "tr" to store headers |
| <th> | Table Head | Creates the header for the table. |
| <tbody> | Table Body | Holds all the table data. |
| <tr> | Table Row | Adds a row to the table |
| <td> | Table Data | Creates a column with the data. |
| <tfoot> | Table Footer | Contains the total fo teh data table, sums, differences, and other data results. |
Semantic meaning related to meaning. By using Semantic HTML, we select HTML elements based on their meanin, not on how they are presented. Providing context as to what information is inside the opening and closing tag.
| Tag | Name | Description |
|---|---|---|
| <header> | Header | Container usually for either the navigational links or intro content containing h1-6 headings. |
| <nav> | Navigation | Used to define a block of navigation links. Such as menus and table of contents. |
| <main> | Main | Encapsulates the dominant content within a webpage. |
| <footer> | Footer | Content at the bottom containing subject information. Such as contact, copyright, terms of use, etc. |
| <section> | Section | Defines elements in a document. Such as chapters, headings, or any other area of the document with the same theme. |
| <article> | Article | Content such as articles, blogs, comments, magazines, etc. Helps someone with a screen reader know where the article begins and ends. |
| <aside> | Aside | Used to mark additinal information that can enhance another element but isn't required in order to understand the main content. Such as bibliographies, endnotes, comments, etc. |
| <figure> | Figure | Encapsulates media such as an image, illustration, diagram, etc. |
| <figcaption> | Figure Caption | Goes inside the "figure". Used to describe the media in the figure. |
| <audio> | Audio | Used to embed audio content into a document. Uses the "source" tag. |
| <source> | Source | Encapsulates the audio link. Used in conjuction with "src" and "type". |
| <video> | Video | Makes it clear that the developer is attempting to display a video. |
| <embed> | Embed | Embeds media content into a page from an external source. Depreciated/Legacy and normally not used. |
| Tag | Name | Description |
|---|---|---|
| Boiler plate | Starter code for web browser. Type 'html' and select the 'html:5' option. | |
| Command / | Comments out a line | |
| Tab elements | Typing in a element and pressing tab will fill out the needed elements. | |
| New Project |
|
Applies styling to websites.
Code Example:
p{
color:blue;
}
| Tag | Name | Description |
|---|---|---|
| <link> | Link | Links HTML to CSS. Needs the "rel" and "href" attribute. Placed within the head of the HTML file. Self Closing. | Selector | p, h1, etc. | The beginning of the ruleset used to target the element that will be styled. |
| Declaration Block | The code in-between and including the curly braces {} that contains the CSS declaration | |
| Declaration | The group name for a property and value pair that applies a style to the selected element. Ex. color:blue; | |
| Property | Signifies what visual characteristics of the element is to be modified. Ex. color. | |
| Value | Signifies the value of the property. Ex. blue. |
| Tag | Name | Description |
|---|---|---|
| * | Universal Selector | Used to modify all elements |
| . | Class Selector | Used to select onr or more elements for CSS styling |
| # | id selector | Used if something needs to be styled uniquely. Single value and once per page. |
| [ ] | Attribute Selector | Looks for img containing " " and sets css rules for it. |
| Pseudo-class(:) | :focus :visited :disabled :active |
When you click on a element and a blue boarder is added showing that it is in focus. When you click on a blue <a> link to visit another page, but when return link is purple. Filling out a form and submit is disabled until all fields are completed. Select and style the active link. Active once clicked on. |
| element.class | Chaining | Require an HTML element to have two or more CSS selectors at the same time. |
| .selector element | Descendant Combinator | Selecting elements that are nested within other HTML elements. |
| element, class | Multiple Selectors | Style multiple selectors at once. |
| Tag | Value | Description |
|---|---|---|
| font-family: | To change the typeface of text on your webpage. Use ' ' for multi worded fonts. | |
| Font Stacking | font-family: Caslon, 'Times New Roman', serif | If Caslon doesn't work then try TNR. If TNR doesn't work then use a serif font on the system. |
| Serif | Have extra details on the end of the letters | |
| Sans Serif | No details at the end of the letter | |
| font-size: | Changes the px(pixel) size. | |
| font-weight: | bold;
normal; lighter; bolder; |
How bold or thin text appears. |
| Numerical Bold | 1-1000 | Used in increments of 100. 400(normal) and 700(bold). |
| font-style: | italic; | Text to appear in italics |
| text-transform: | uppercase; lowercase; | All text to either lower or uppercase. |
| text-align: | left; center; right; justify; |
Aligns text to the element that holds it, its parent. |
| letter-spacing: | Used to set the horizontal spacing between the individual characters in a element. In px or em. | |
| word-spacing: | Set space between words. In px or em(preferred). | |
| line-height: | Set how tall we want each line containing our text to be. In px, %, and em. | |
| color: | Styles elements foreground color, text. | |
| background-color: | Stlyes elements background color. | |
| opacity: | How transparent an element is 0, invisible, to 1. | |
| background-image: | url(" "); | Can be relative file within your project or a link. |
| !important: | Overwrites any style no matter what. Should rarely be used. | |
| height: | px; | Sets the height of the element. |
| text-decoration: | underline; | Will underline the text. Useful for links or things to stand out as clickable. |
| Tag | Value | Description |
|---|---|---|
| Google Fonts | When selecting your font you'll be shown different styles. Selecting your stlyes will give you a <link>. Add the <link> to HTML | |
| @font-face{} | @fontface{
font-family: 'MyParagraphFont'; src:url('_.woff2') format('woff2'), url('_.woff') format('woff'), url('_.ttf') format('truetype'),} |
WOFF2 being the most progressive but good to inclue TTF, WIFF, WOFF2 with your @font-face.
Font-family is used to assign the font a name. src contains the relative path and its format. |
| Tag | Value | Description |
|---|---|---|
| Hexadecimal-color: | #000000 | Colors specified using the hexadecimal/hex colors. Begins with '#' followed by 3 or 6 characters. 16 digits (0-15) where A-F=(10-15). Characters represent mixture of red, blue, and green. |
| RGB Colors | color: rgb(23, 45, 23); | Uses decimal numers rather than hexadecimal numbers. 0-255 |
| Hue, Saturation, and Lightness (HSL) | color: hsl(120, 60%, 10%) | First numer represents the degree of the Hue. Second percent saturation. Third percent lightness. |
| Opacity and Alpha (HSLA) and RGBA | color: hsla(34, 100%, 50%, 0.1); | When colors overlap changing the opacity, transparency, so the bottom will show. Fourth number called the Alpha/opacity. 0(transparent)-1(opaque). Any color below 1, the color behind it will be blended in. |
| Tag | Value | Description |
|---|---|---|
| Resetting Defaults | *{
margin: 0; padding: 0;} |
All major web brwosers have a default stylesheet they use in absence of an external stylesheet.
Dev. reset so they can work with a clean slate. |
| border: | width style color |
A line that surrounds an element, like a frame around a picture.
The thickness of the border. Set in pixels or keywords: thin, medium, thick. The design of the border: none, dotted, solid, hidden, dashed, double, etc. 140 built in color keywords |
| border-radius: | modify the corners of a element's border box. Can make a circle by first setting width/height as the same and border-radius: 50%;. | |
| padding- : |
padding-left: padding-right: padding-bottom: padding-top: |
Space between the contents and borders. Used to expand background color and appear less crowded.
Set by pixels the amount of space in padding to add. |
| Padding/Margin Shorthand |
6px 11px 4px 9px;
5px 10px 20px; 5px 10px; |
top right bottom left
top left right top/bottom left/right |
| margin- : |
margin-left: margin-right: margin-bottom: margin-top: |
Space outside the box/border.
Set by pixels the amount of space in padding to add. |
| Auto | Ex. code: width: 400px; margin: 0 auto; |
Centers content. Must have a width set. |
| Margin Collapse | Horizontal Margins add.
Vertical Margins do not. |
|
| min-width:
max-width: |
Minimum width
Maximum width |
Ensures a minimum width of an elements box.
Ensures a maximum width. Some content, like text, can become difficult to read when a browser window is narrowed or expanded. |
| min-height:
max-height: |
Minimum height
Maximum height |
Ensures a minimum height of an elements box.
Ensures a maximum height. Some content, like text, can become difficult to read when a browser window is narrowed or expanded. |
| overflow: ; |
hidden; scroll; visible; |
Controls what happens to content that spills, or overflows, outside its box.
will be hidden from view. a scrollbar will appear is default. Content wil be displayed outside of element. Set on parent element to instruct web browser on how to render a child. |
| visibility: |
hidden;
visible; collapse; |
Hidden from view. Space will stillbe there just hidden info. |
| Tag | Value | Description |
|---|---|---|
| Default Box Value | *{
box-sizing: border-box;} |
Resets the box model to border-box for all HTML elements. Avoids the dimensional issues.
Superior allows child box to fit inside parent. |
| The box model in DevTools | command+option+i
right click, inspect |
In devTools bottom half 'Computed'
Can change but will not save. Top half, left corner, arrow can highlight |
| Box of all elements relative to each other? | In the 'Styles' tab. Select HTML in !DOCTYPE
'+' for new rule. Replace html with '*' {border: 1px solid red !important} |
|
| HTML Box Size | width + height
width height |
HTML box is found by sum of width and height.
sum of 'content width' + 'padding left and right' + 'border left and right' sum of 'content height' + 'padding top and bottom' + 'border top and bottom' Margin has no impact. Since margin just affects how near or far others are. |
| Meyer Web Reset | https://meyerweb.com/eric/tools/css/reset/ | Place in reset stylesheet. |
| position: | Changing the default position of an element: (defaul)static; relative; absolute; fixed; sticky; | |
| position: relative; | top: px; bottom: px; left: px; right: px; |
Place element relative to it's default static position. Can specify in px, ems, or %.
moves element down from top. moves element up from bottom. moves element right from left side. moves element left from right side. |
| position: absolute; | All other elements on the page will ignore the element and act like its not present on the page. Scrolls with the rest of the document. | |
| position: fixed; | Fixes an element to a spot, regardless of scrolling. Set 'width:100%;' to fix small box. | |
| position: sticky; | Sticks an element to a spot, but sticks to a specified position. Will scroll with you until end of parent element then unsticks and rejoins the flow of the document. | |
| z-index: | 0-1; | Controls how far back/forward an element should appear on the webpage when elements overlap. Accepts integers values 0-1(front). Doesn't work on static elements, so set to relative. |
| display: | Inline Dispay
inline; block; inline-block; |
Dictates if it can share horizontal space with other elements.
<em>, <strong>, <a>. Height and width cannot be specified. Not displayed in the same line as the content around them. Fill the entire width of the page but can be modified. <h1> - <h6>, <p>, <div>, <footer> Can appear next to each other and can specify their width and height. |
| float: |
left;
right; |
Used for wrapping text around an image. must have width specified otherwise the element will assume the full width of its containing element. |
| clear: | Definition
left; right; both; none; |
How elements should behave if they bump into each other. If float is used on multi elements of different sizes
Left = left sides wont touch Right = right sides wont touch Both = neither sides will touch none = can touch either side |
| Tag | Name | Description |
|---|---|---|
| ls | List | List all files and directories inside current directory |
| pwd | Print working directory | Outputs the name of the directory you are currently in |
| cd | change directory | switches to the directory you specify |
| cd.. | Changes the directroy up. Goes back. | |
| cd/ | Can directly go to a file. Ex. cd home/course/work | |
| cd ../.. | Go back 2 directories | |
| mkdir | make directory | Creates a directory. Can also combo with /. Ex. mkdir media/__ |
| touch | Creates a file | |
| tab | autocompletes your command | |
| Up and down | previous commands | |
| clear | Clears the terminal | |
| echo "Hi" >> "Greetings".txt | Creates a .txt file named 'Greetings' and types 'Hi' into it. | |
| cat "Greetings".txt | Prints the contents |