HTML Flashcards
how to add style with CSS
“Style Tags”
h1 {
color: blue;
}
CSS Selector
the HTML element that you want the style to be applied to (the h1 in the example below)
h1 {
color: blue;
}
CSS Property
color in the example below:
h1 {
color: blue;
}
HTML Headline element
<h1></h1>
what every webpage needs to start with this
document type
(This is an example of telling the browser to interpret this doc as an html document)
should always be at the top and there shouldn’t ever have a space before it
HTML tags
this is what placed right after the doctype and serves as the “root”
what is contained in the head tags?
meta information invisible to the users and CSS
character set
what is an HTML attribute and attribute format
information provided to the browser, invisible to the user
word=””
html entity for copyright symbol
©
header
The header element helps to structure the content. This is different from the head element, which is just for document metadata.
section
Sections break up logical groupings of information, just like sections of a newspaper.
footer
The footer element is a complement to the header element. It represents the bottom of a content area.
<h2></h2>
The second level headline element, similar to first level headlines. Typically these appear slightly smaller by default.
<p></p>
The paragraph element should contain text in sentence or paragraph form.
<a></a>
The anchor element allows for two HTML pages to be linked together.
<a href="index.html">
<h1>Brent Colson</h1>
<h2>Tennis Player</h2>
</a>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Notice the two locations the anchor tag is used
The navigation element is a semantic element that wraps any type of site navigation. It doesnt add anything to the page - it really just organizes the structure
<ul></ul>
The unordered list element contains list item elements and is typically styled with bullet points by default.
<li>
</li>
The list item element makes it possible to format text in a list form. Each list item element should go inside of an ordered or unordered list element.
Relative Path
Describes the location of a file using a partial file path that’s based on the location of the original file relative to the file that’s being referenced.
Absolute Path
Describes the location of a file using the full file path.
<img></img>
The image element is a self closing element with two required attributes. The source (src) attribute points to the image file and the alternate (alt) attribute describes the image using text (for a screen reader for example). An example when an image is a list item:
<ul>
<li><img></img></li>
</ul>
The link element connects other files to an HTML document, such as CSS or JavaScript files. It is self closing tag.
note: the rel (relationship) is the type of file you are linking to
CSS
Cascading Style Sheets, the computer code that defines the visual presentation of web pages.
Rule
The entirety of a CSS selector and its declarations.
Selector
CSS syntax that defines elements on a page to which declarations should be applied.
Declaration
Pairs of CSS properties and values that define how an element should be styled.
Property
CSS syntax that defines which part of an element should be styled, such as its color, size, position, and so on.
Value
CSS syntax that sets the variable units for properties.
CSS stylesheet
The style element can contain CSS code that will be applied to the HTML. Typically it’s better to keep CSS in an external stylesheet.
Type or element Selector
Also known as an “element selector” this CSS selector that isolates all the elements of a given type.
nav {
background-color: orange;
color: white;
}
Nav is the element selector
Descendent Selector
CSS selector that selects all the elements of a given type that are nested inside another type of element.
nav a {
background-color: orange;
color: white;
}
note that the “a” specifies the “anchor element” within the nav element
color
Sets the text color of an element. Accepts any CSS color unit.
background-color
Sets the background color of an element. Accepts any CSS color unit.
<div></div>
groups together sections of the website
<div>
~~~
<ul>
<li>
<a>
<img></img>
<p>Creating shapes using repetition</p>
</a>
</li>
</ul>
~~~
<a><img></img></a>
<p>© 2015 Brent Colson</p>
</div>
the id in the div element allows you to name the div that can be referenced in the CSS
how to reference a custom div in CSS (use <div> as an example)</div>
#wrapper {
max-width: 940px;
margin: 0 auto;
}max-width
Sets the maximum width of an element. Accepts any CSS length unit. related to “width” but max-width is better for responsive
max-width: 940px;
margin (with 2 numbers)
Sets the space around the exterior four sides of an element. Accepts any CSS length unit.
margin: 0 auto;
first number is how much margin there will be on top and bottom of element second number (auto in this case) - is the amount of spacing on the left and right. auto just uses whatever remaining space and splits it so it is the same on the left and right
If it is just - margin: 0; - then it will apply that margin to all sides of the element
padding
Sets the space on the interior four sides of an element. Accepts any CSS length unit.
padding: 0 5%;
first number is how much padding there will be on top and bottom of element second number (5%) - is the amount of spacing on the left and right
Hexadecimal
A base-16 number system that uses the letters “A” through “F” to represent the numerals 10 through 15.
Order is:
RED GREEN BLUE
Pseudo-Class
Dynamic selectors that change based on user interaction with the browser, such as hovering over a link, for example
nav a, nav a:visited {
color: #fff;
}
the first nav a represents only the anchor (a) tags inside a nav tag. the nav a:visited represents the state that the link is in (so in this case, both the clicked and unlicked version of the link will be white
Hexadecimal shorthand
color: #fff;
this uses the each letter twice for each of the colors
difference between a class and an id
you can have multiple classes on a page but you can only have one ID on a single page
how to select a class in CSS to declare a rule
element.class
example: nav a.selected
or
.selected
Class Selector
Selects any HTML element that contains a matching class attribute
example:
<a>Portfolio</a>
hover
state of a link in CSS when you hover over it with your mouse
example: nav a:hover
visited
nav a:visited
Comment
logo {
A reminder or visual cue in computer code that’s meant to be readable by programmers. Comments are typically not interpreted by the browser and shouldn’t impact a website’s function in any way.
format: /* comment here */
/*******
HEADING
*******/
text-align: center;
margin: 0;
}
/*******
COLORS
*******/
/* site body */
body {
background-color: #fff;
color: #999;
}
in the above, you see general categories, as well as single sections. You should have 3 lines between the bottom of one sections and then next general categories
font-family
Defines which fonts should be applied to text.
font-size
Sets the size of text in either relative or absolute units.
Google Fonts
A 3rd party font service from Google that provides a large library of fonts that are legitmately licensed. All of the fonts are available for free.
how to add Google Fonts to your webpage
link it to your HTML BELOW normalize, but ABOVE main
Brent Colson | Tennis Player
adding font in CSS
font-family: ‘Changa One’, cursive;
note the ‘ ‘ (not “ “) around the font. after the comma (cursive in this case) is the fallback font to be used if google fonts is down
em
relative sizing for fonts. 1em is equal to the default browser size (16 px)
example: font-size: 1.75em
font-weight
normal, bold, etc
or you can use one of the numbers that the font offers (i.e. 800) like this:
font-weight: 800;
line-height
space between lines of text
example: line-height: 0.8em;
another way
margin (with 3 numbers)
margin: -5px 0 0;
first number is space above item
second is space to the left and right
3rd is space below the item
padding-top
specifies that you only want padding on top
example: padding-top: 50px;
text-decoration
if set to none, it will remove any underlining
example: a {
text-decoration: none;
}
max-width
sets width. if % is used, then it will adjust to be 100% width of whatever the container that it is in.
example:
img {
max-width: 100%;
}
list-style
if set to none - you remove any bullets points
example:
list-style: none;
width (%)
only will ever take up some percentage of what it’s parent container size is
float
allows items to be side by side, instead of stacking on top of each other
remember - if you float an item and you want it to span the entire page - you need to set width: 100%;
clear
this clears the both the left and right side of any floating elements (i.e. images).
example is that the footer could try to wrap with an ordered list - but if you add the clear rule (set to “both” means that it will clear it on both the left and right side.
clear: both;
margin (with 4 numbers)
the go clockwise starting from the top.
padding: 5px 3px 2px 1px;
top: 5px
right: 3px
bottom: 2px
left: 1px
block vs in-line
every element has a built in display - either block or in-line.
Inline: and images text - just appears in-line
div, ul, ol,, etc - blocks that appear to put blocks around each other that force other things from around it
border-radius
allows you to make rounded corners on your image
example:
border-radius: 100%;
will give you a circle
display an image centered
img {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
you need to make the image display as a block (it is defaulted to in-line) and so that when you set the width to auto, it is able to use that to center the block
background-image
Accepts an image path that applies the file to the background of an element.
allows you to set an image on the page through CSS
background-image: url(‘../image/phone.png’);
how to move up a directory when setting a relative link
..
for example:
background-image: url(‘../image/phone.png’);
background-image
example:
background-size
Sets the size of background images.
background-size: 20px 20px;
background-repeat
Sets whether or not a background image should be repeated. By default, backgrounds will repeat.
background-repeat: no-repeat;
repeat-x only repeats horizontally
repeat-y only repeats vertically
What is the general difference between margin and padding?
Margin adds space on the “outside” of the element and pushes nearby elements away. Padding adds space on the “inside” of the element and makes space between th elements edge and its content.
Responsive Web Design
A technique for creating websites that work on multiple screen resolutions via the combination of fluid images, fluid grids, and media queries.
Responsive - Fluid Images
img {
max-width: 100%;
}
Responsive - Fluid Grid
use relative units, instead of fixed
Responsive - Media Query
@media screen and (min-width: 480px) {
}
this targets digital “screens” that are 480px or larger. if it is less than 480, then it will not be applicable
Breakpoints
The specific screen widths where a responsive layout “breaks” and needs to change in order to accommodate the screen
@media
Media queries use the @media CSS rule to define conditions of the browser medium. In other words, it allows for CSS styling to only be included if certain conditions are met, such as a specific browser width.
cascading media queries
start with the smallest break point, then the later ones will overwrite the smaller ones if the screen grows
@media screen and (min-width: 480px) {
body {
background: navy;
}
}
@media screen and (min-width: 660px) {
body {
background: darkgreen;
}
}
margin-left
margin-right
margin-bottom
margin-top
you can provide specific margin adjustment without needing to specify all of the other sides
margin-left: 5%;
margin-right: 5%;
border-bottom
provides a boarder at the bottom of the screen
border-bottom: 5px solid #599a68;
border-width: 5px
border-style: solid border type (others are dash or dotted)
color
border-color: #599a68
you can also add different colors, styles to each edge of the border so that
place where you can go to validate your html
http://validator.w3.org
place where you can go to validate your css
http://jigsaw.w3.org/css-validator/
allows you to get screenshots of your website on different devices
browserstack.com
URL - Protocol
A system of rules for the exchange of digital information. On the web, the Hyper Text Transfer Protocol (HTTP) allows for the exchange of websites.
URL - Subdomain
A smaller domain that is part of a larger domain. For example, “www” is a common subdomain.
URL - Domain
A unique identifying string that defines a realm of authority or control on the web.
URL TLD
TLD stands for Top Level Domain and it is the highest level domain in the Domain Name System (DNS). This is the part of the domain such as .com, .net, and .org, that comes at the end.
shortcut for getting to dev tool on chrome
command + option + i
places i can get good CSS help/reference
Mozilla Developer Network (MDN)
WebPlatform.org
W3C
Can I Use
Inline Styles
When we write inline styles, we write the CSS in the HTML file, directly inside an element’s tag using a style attribute.
Internal Styles
Internal styles are embedded in the section of the HTML document and are defined inside a tag.
<style>
p {
font-size: 20px;
font-weight: bold;
}
Linking to an external style sheet
The rel attribute specifies the relationship between the HTML document and the linked document
The href attribute points to the location of the CSS file.
importing css stylesheet via @import
The @import statement lets us import CSS from other style sheets. It shares some of the same advantages as linking a stylesheet, like browser caching and maintenance efficiency.
@import ‘reset-styles.css’;
The @import statement must precede all other CSS rules in a style sheet in order for it to work properly
you can @import within HTML or into other stylesheets
universal selector
overwrites all other selectors
* {
margin: 0;
padding: 0;
color: red;
}helpful resource for learning css syntax
https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
how to add multiple classes to one element
use a space between the two (but between the “ “)
<div></div>
what happens if an element has an ID and CLASS with common properties?
The ID properties will overwrite the Class properties
pseudo class selector for when you click on a button or image etc
:active
pseudo class selector for when focus (tab) onto an interactive element (link, form item, etc)
:focus
good resource for understanding Pixels and other CSS unit lengths
https://docs.webplatform.org/wiki/tutorials/understanding-css-units
percentage units are a percentage of what?
When we use a percentage unit in CSS, the percentage value is measured relative to a parent element’s length.
text-align
Let’s us control the horizontal alignment of text.
text-align: center;
or…
left;
right;
text-transform
Changes the case of text – whether it’s uppercase, lowercase, or capitalized.
text-transform: uppercase;
lowercase
capitalize
font-weight
Sets how thick or thin the characters are displayed.
font-weight: normal; (no bold) font-weight: bold; or... lighter; bolder; or 100-900
font shorthand
A shorthand property that lets us write all the font properties in one value.
body {
font: normal 1em/1.5 “Helvetica Neue”, Helvetica, Arial, sans-serif;
}
the 1em is the font size and the 1.5 is the line height (spacing between lines)
inline vs inline-block
you can only use margin as a block item, not a inline item
box-sizing
box-sizing: border-box;
this allows you to set the width of the border as fixed to the width you define, and then the padding doesn’t extend the width on top of the standard box width
example: box width is 960 + 50px padding on left and right would give total width 1060. With border box, the total width would stay at 960
background-position
allows you to position the image in the background.
background-position: center top;
background-position: 50% 0%;
this would put it in the middle top of the page
background-position: cover;
The cover value adjusts the background area so that it’s completely covered by the background image, while maintaining its width and height proportions:
.main-header {
background-image: url(‘../img/mountains.jpg’);
background-size: cover;
}
background shorthand
background: #13ab12 url(‘…/img/imagename.png’) no-repeat center / cover;
clearfix
add this class (you can just add " group" to an existing string of groups) to clear the float below where your list of floats.
.group:after {
content: "";
display: table;
clear: both;
}list-style-type
list-style-type
Sets the appearance of a list item.
square, etc
list-style-position
Sets the position of a list marker in a list item. By default, the browser displays the list markers outside the list items.
text-shadow
The text-shadow property accepts three length unit values followed by a color value:
h1 {
text-shadow: 2px 2px 1px #222;
}
The first value sets the horizontal offset of the shadow. The second value sets the vertical offset. The third is an optional value that sets the blur radius of the shadow (the higher the blur radius value, the blurrier it gets. The fourth value is the color value.
3d text treatment
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}forms
form input
type: is the type of input you will be taking (number, tel, password, etc - long list of options here)
id: not required but is helpful for targeting CSS and for associating labels to specific form controls
name: when a form is submitted to server, the name is so that the server can process appropriately
is self closing
Longer definition: The input element is used to create many different types of form controls. The type attribute specifies what kind of form control should be rendered, such as text, email, passwords, and more. The name attribute is submitted with form data so that server-side code can parse the information.
form:
this is NOT a sales closing tag
- The textarea element accepts multiple lines of text from the user. Most browsers will render the textarea element with a widget to allow for resizing the editing area.
form:
Sign Up
types:
submit: submits the data to the server
reset: auto clears all form data when clicked
button: no default behavior and needs more server side code to do anything
Just as the name implies, the button element will render a clickable button. The type attribute specifies whether the button should submit the form data, reset the form, or have no default behavior for use with JavaScript.
unobtrusive javascript
allows you to make make JS enhancements to the user experience ONLY when the user’s browser and connect allow for it. This is something jQuery allows you to do…it is “unobtrusive”
http://blog.teamtreehouse.com/unobtrusive-javascript-important
jQuery
functions/methods that we can add to objects/divs (classes, IDs, etc).
shorthand for writing jQuery methods
use $ and method chaining. the following two are the same:
//Hide warning
jQuery(“.warning”).hide();
//Show Warning Slowly
jQuery(“.warning”).show(“slow”);
or
$(“.warning”).hide().show(“slow”);
node
a branching point that reviels more nodes
DOM
Document object model
this displays tree of HTML
with JavaScript you can both Interrogate and Manipulate the DOM
Interrogation (Traversing) the DOM (all available through jQuery)
moving around the node to see what lies within each node
Moving from parent element to its children
Moving from a child element to its parent
Moving from a sibling element to another sibling element
Manipulation the DOM (all available through jQuery)
changing of the nodes in HTML (cutting, adding, modifying, etc)
Add/Remove HTML elements
update/Read HTML element attributes
Transform HTML elements (hide/show, etc)
document object
the document object is the object that holds the entire DOM
how to access specific section of the document object
document.body.children[0]
this would take you to the first item within the body of the document. This is called, traversal “Traversing the DOM”
note that this is not a good way to access parts of the page consistently because the the location of sections of the page may move around. The better way to getElementsByClassName();
getElementsByClassName();
and the JQuery equivalent
document.getElementsByClassName("warning")
jQuery equivalent: $(".warning")
this allows you to access it by the class of the element, without having to go to through the tree that may change as the website gets updatedEvent Methods in the DOM (all available through jQuery)
Keyboard events: keypress
Mouse Event: mouse movement or a click
how to add the jQuery library on your website
you can download it or you can use jQuery with a CDN. this is just a link that the browser can access and store within the browsers cache. If the user has already downloaded this in their cache from another website they visited, then they don’t have to download it again!
how to make sure that you jQuery only runs once everything is fully loaded (if you include the jQuery script in the head of the HTML which isn’t a best practice)?
(NOTE: Not best practice to include the script in the HTML in head! But this is how you would make sure it is loaded before you run the script)
$(document).ready();
this only allows it to run once everything has loaded.
you can put an named or anonymous function in the ready function.
named example:
function myCode() {
$(".warning").hide().show("slow");
}
jQuery(document).ready(myCode);
anonymous example:
jQuery(document).ready(function() {
$(“.warning”).hide().show(“slow”);
});
Best practice for placing the jQuery or other library load scripts in the HTML file
Best practice is putting the script load line at the end of the body of the HTML, then you don’t need the ready function.
tables
Name
E-mail
Job role
Brent Colson
brent@example.com
Web developer
Dave McFarlandtd>
dave@example.com
Web developer
table header (including rows and columns headers)
- The table header cell helps label a group of cells in either a column or a row.
Name E-mail Job role Brent Colson brent@example.com Web developer Dave McFarland dave@example.com Web developer Guil Fredrickson guil@example.com Web developer
The table head element (not to be confused with the table header cell element) defines a set of rows that make up the header of a table.
Not strictly required but helpful for search engine crawlers and styling
Name
E-mail
Job role
The table body element defines one or more rows that make up the primary contents (or “body”) of a table.
Not strictly required but helpful for search engine crawlers and styling
Brent Colson
brent@example.com
Web developer
Dave McFarland
dave@example.com
Web developer
Guil Fredrickson
guil@example.com
Web developer
The table foot element contains a summary of the table. This might be totals for columns of numerical data or meta information about the source of data.
should be placed right below the
Name
E-mail
Job role
Data is updated every 15 minutes.
how to make a single cell span > 1 columns (think merging cells)
set
Data is updated every 15 minutes.
The caption element represents the title of the table.
what does the browser create when it opens a webpage?
window object – gives you access to information about the current browser window. Including its document, location and the global scope.
document object – gives you access to all HTML nodes.
4 P’s of problem solving
Preparation - Understand problem and think of high level solution
Plan - plan out the solution
Perform
Perfect
document.getElementById
get a single element in an html document
var taskInput = document.getElementById(“new-task”)
document.getElementsByName
access multiple elements of the same tape like an array (if there were multiple “button” elements, then you can access them in order of how they appear in the HTML by using the array index
var addButton; document.getElementsByName(“button”)[0];
event handlers
like the start gun at a race - determines when your code (functions) will run
GlobalEventHandlers.onclick
element.onclick = functionRef;
example:
var addButton; document.getElementsByName(“button”)[0];//first button
var addTask = function() {
console.log("Add task...");
//When the button is pressed
//Create a list item with the text from #new-task
//input (checkbox)
//label
//input (text)
//button.edit
//button.delete
}
addButton.onclick = addTask;
Note that there are no () when referencing addTask with the .onclick method. This is because we wan’t the addTask to run when the user clicks the button. If we add the (), it will run right away
