html/css (code academy)
html
hypertext markup language the skeleton that gives every webpage structure.
readability
indentation when we place tags inside of other tags, we indent them more e.g. <html> <head> <title>my title</title> </head> <body> <p>my paragraph</p </body> </html>
<em></em>
italicize words
e.g. select all links that are children of listed items
li a{ font-family:curisve; }
border-radius (brief description)
make corners rounded. giving a value of 100% will create a circle. e.g. div { border-radius: 100%; }
<h1></h1>
make text into headings h1 is the largest h6 is the smallest (tiny)
<strong></strong>
makes text bold
wrap
surround e.g. in: <ol> <li>the first item</li> </ol> ..<li> and </li> wraps the item and <ol> and </ol> wrapts the first list element.
<tbody></tbody>
table body Contains the actual tabular data. *wrap all <tr> in a table with <tbody>
<td></td>
table data aka table columns nest <td> inside <tr> to create columns in that row
CSS comment
/*a comment in CSS */
two ways to put CSS in one place
1. CSS should be written in a completely separate file. Put a <link> tag in the <head>...</head> tags in the HTML file so it can see 2. Alternatively, and not good practice, CSS can be written between <style></style> tags right in the same file as the HTML. These <style> tags would go inside the <head></head> of your webpage
<!-- -->
<!--an html comment--> *browser won't display *notes to yourself and other people that read your code *help remember why certain things were done
foundation of an .html file
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
<ol></ol> <li></li>
<ol></ol> an ordered list: a list that is numbered <li></li> an item in a list e.g. <ol> <li> the number one is before this <li> the number two is before this </ol> *each listed item is only on one line, we put the entire element on one line
style attributes not explained in table example "Style that head!"
<table border-collapse:collapse> <tr style="border-bottom:1px solid black;"> <th style="padding:5px;border-left:1px solid black;">Birth Year</th>
example of nesting lists
<ul> <li>bullet</li> <ol> <li>item 1</li> </ol> <li>another bullet</li> <ol> <li>item 1</li> <li>item 2</li> </ol> <li></li> </ul>
<ul></ul> <li></li>
<ul></ul> an unordered list: a list with bullets <li></li> an item in a list e.g. <ol> <li> bullet point goes before the first item <li> bullet point goes before the second item </ol> *each listed item is only on one line-- we put the entire element on one line
<video wdith="" height="" controls> <source src=""> </video>
<video width="320" height="240" controls> <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4"></video>
display
A css property that controls how html elements are arranged and how much space they take up on the page. By default, html elements take up the full width of the page (no matter how much or little content is in it). 4 possible values: block: makes element a block box. Nothing can sit next to it and it takes up the full width. inline-block: makes the element a block box, but will allow other elements to sit next to it on the same line. inline: makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line). ..i.e. places all your elements next to one another, but not as blocks: they don't keep their dimensions or "box"ness *better suited for HTML elements that are blocks by default, such as headers and paragraphs none: makes the element and its content disappear from the page entirely (including any children and any content).
style sheet
A file that describes how an HTML file should look. e.g. contains all the CSS styling information: where HTML elements should go, what color they should be, how big they should be, and more.
margin
Adjusting our margins not only moves our element relative to other elements on the page, but also relative to the "walls" of the HTML document. i.e. setting an element's margin to auto tells the document to AUTOmatically put equal left and right margins on the element-- centering it on the page. e.g. div { margin:auto; }
<html></html>
Always put <html> on the next line after <!DOCTYPE html> (this starts the HTML document). All other tags go between <html> and </html>, e.g. <head></head> and <body></body> *any text entered in-between <html></html> will display on the page w/o formatting *Always put </html> on the last line this ends the HTML document
<!DOCTYPE html>
Always put on the first line tells the browser what language it's reading (in this case, HTML)
position:absolute
An element set to position:absolute will be positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html> e.g. consider: <div id="outer"><div id="inner"></div></div> #inner { position:abs } #outer { } Since the #outer div has absolute position, when the #inner div is positioned it will be relative to the #outer div. *if #outer had the default positioning of static, then #inner would get positioned relative to the entire HTML document.
first-child
Another pseudo-class selector. Used to apply styling to only the elements that are the first children of their parents consider: p:first-child { color: red; } ..would make all paragraphs that are the first children of their parent elements red, e.g. <div> <p>I'm the first child!</p> <p>We're not.<p> <h1>We're not(I am considered the 3rd child though)</h1> <p>We're not.</p> </div>
Unit VI
CSS positioning
css
Cascading Style Sheets make webpages pretty the skin over the skeleton of the html
specifying value
Certain selectors will "override" others if they have a greater specificity value. ul li p { is more specific CSS than just p {, so when CSS sees tags that are both <p> tags and happen to be inside unordered lists, it will apply the more specific styling (ul li p {) to the text inside the lists. Two selectors that are even more specific than nested selectors are: Classes and IDs are .
Unit V
Classes and IDs
CSS box model
Each HTML element is like a tiny box or container that holds the pictures and text you specify. see image visualization tip: the universal selector can be used to draw border around every HTML element like this: *{ border:1px dashed #0000FF; }
unit III
HTML Basics III: tables, divs, spans
Unit 2
HTML Structure: Lists and style attributes (inline CSS)
element
HTML elements are written with a start tag, with an end tag, with the content in between
hex color values
Hexadecimal values: ..are Base-16 (0-F where A=10, F=15). ..hex color values always begin w/ '#' ..are case-insensitive ..are six digits long e.g. h1 { color: #8B1C62; } *pick from millions of colors: Search: "hex color palette" or "hex color picker" or use a program like agave (has color dropper) i.e. Hexadecimal color (#RRGGBB): Hexadecimal values that represent mixtures of red, green and blue. For example, red can be expressed with the hexadecimal value of #FF0000: the value ff represents red, 00 represents green, and 00 represents blue
CSS and fonts
How many fonts does CSS know? depends-- each computer has different fonts installed on it. CSS has some built-in defaults (meant to ensure your users see what you intend), which include: serif, san-serif, and cursive. *it is possible to import custom fonts
backup font values
If the font you want isn't available, CSS can try several giving priority to the ones listed first, e.g.: p { font-family: Tahoma, Verdana, sans-serif; } CSS tries to apply Tahoma first, and if the user's computer doesn't have that font, it will try Verdana. If that doesn't work, it will show a default sans-serif font. Fallback fonts are included in case a visitor's web browser does not support the first font. Sometimes, more than one fallback font is included.
position:static
If you don't specify an element's positioning type, it defaults to static. i.e. "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document.
Unit IV
Introduction to CSS
unit 1
Introduction to HTML
<link type="text/css"; rel="stylesheet"; href="stylesheet.css"/>
Makes it so the HTML file can see the CSS information in another file. Goes between <head>...</head> in the html file. Needs three attributes: 1. type: specifies the type of file linked to, e.g. type="text/css" 2. rel: Specifies the *relationship* between the current file and the file being linked to. rel="stylesheet" 3. href: should point to the web address of the CSS file being linked to, e.g. href="stylesheet.css" Complete example: <head> <link type="text/css"; rel="stylesheet"; href="stylesheet.css"/> </head> *self-closing tag
RGB
RGB (Red, Green, Blue) colors: Color created by three numbers representing red, green, and blue. When mixed together, the three values create a specific color. For example: purple can be represented as rgb(128,0,128)
color
Style attribute Change color of text-based elements. Accepts value: name of color, hex-value, or rbg aka decimal-value. e.g. style=color:red style=color:#ff0000 red=color:255,0,0 http://www.w3.org/TR/css3-color/#svg-color
border
Style attribute that can be added to <table>, <img>, and more. Specify thickness, then solid or dashed, then color. e.g. inline <table style="border:2px solid black"> e.g. CSS selector{ border: 2px solid red; }
cascading
We say these style sheets are cascading because the sheets can apply formatting when more than one style applies. e.g., if all paragraphs should have blue font, but one specific paragraph should have red font instead, CSS can do that.
<table></table>
We use them to store tabular data (with cells using rows, columns) so it's easy to read
Reasons for keeping html and css seperate
You can apply the same formatting to several HTML elements without rewriting code (e.g. style="color:red":) over and over. You can apply similar appearance and formatting to several HTML pages from a single CSS file
attriubte
a characteristic or some description for the content in the element e.g. of the href attribute of the <a> element <a href="https://www.google.com"></a> e.g. of the src attribute of the <img> element <img src="/>
pseudo-class selector
a way of accessing HTML items that aren't part of the document tree. Using pseudo selectors, you can control the appearance of unvisited and visited links—even links the user is hovering over but hasn't clicked. CSS syntax selector:pseudo-class_selector { property: value; } e.g. : a:hover { color: #cc0000; font-weight: bold; text-decoration: none; } A few example pseudo-class selectors for links: a:link: An unvisited link. a:visited: A visited link. a:hover: A link you're hovering your mouse over.
hyperlinks
aka links send user to a new web-page (could be other part of the same website or another website)
<span></span>
allows you to control styling for smaller parts of page the page than such as text e.g., Style only one word in a paragraph: <p>style only the next word: <span style="color:red; font-family:Arial;font-size:20">styylllee</span></p>
position:fixed
anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past
index.html
https://teamtreehouse.com/community/why-is-it-important-that-we-name-the-main-file-indexhtml https://support.tigertech.net/index-file-names
tags
anything between <> almost always come in pairs opening tag, e.g. <html> closing tag, e.g. </html> are nested and must be close in the right order, e.g. <p> <strong> example </strong> </p>
classes
are assigned to HTML elements with the word 'class' then '=' then its name, e.g. : <div class="square"></div> are identified in CSS with a dot (.), like so: .square { height: 100px; width: 100px; } allows taking elements of different types and giving them the same styling *useful when a lot of elements should all receive the same styling. Rather than applying the same rules to several selectors, apply the same class to the desired HTML elements then define the styling for that class in the CSS tab
ID
are assigned to HTML elements with the word 'id' then '=' then its name: <div id="first"></div> IDs are identified in CSS with a pound sign (#): #first { height: 50px; } *useful when exactly one element should receive a certain styling, i.e. allows you to apply style to a single instance of a selector, rather than all instances *it's okay to have a tag with a class AND an ID
margin (brief description)
auto:set equal margins on each side of this HTML element e.g. img{ margin:auto; }
CSS
cascading style sheets a language used to describe the appearance and formatting of your HTML.
markup language
code that makes text do more than just sit on the page, e.g. it turns it into images, links, tables, lists...
color name decimal base-10, e.g. 0-9
colors can be selected using color name or with a decimal number, but you can more control/options with hex color values *CSS comes equipped with 140 named colors, such as red
parents, children, sibling elements
consider take the following code, <!DOCTYPE html> <html> <!--The root of the tree!--> <head> <!--Child of html, parent of title, sibling of body--> <title></title> <!--Immediate child of head, child of head AND html--> </head> <body> <!--Child of html, parent of p, sibling of head--> <p></p> <!--Immediate child of body, child of body AND html--> </body> </html> the <html> tag is the parent of all tags on a page and all the elements on a page are children of the <html> element. The <head> and <body> elements are siblings because they are immediate children of the same parent element, <html>. An element is a child of every element wrapped around it, e.g. <p> is a child of <body> and <html>
<head></head>
contains information about your HTML file, e.g., the title
<img src="url"/>
display an image src is an attribute of <img> that defines where to get the image *self-closing tag
styling property:values not explained
display: block; margin: auto; border-radius: 5px; border-color: #6495ED; text-decoration: none; font-weight:bold;
<div></div> width height
divide Divide page into containers (allowing styling of each). Allows to creation of visual HTML objects like: sidebars, menus, etc.. e.g. <div style="width:50px; height:50px; background-color:red"></div> *height and width attribute can also be applied to <td>, <img>, etc.. can have a % value instead of pixels
border
e.g. * { border: 1px dashed black; }
Negative values
giving CSS a positive padding or margin value, will put space between the element and its reference, e.g. : if you have a <div>, and you give it a margin-left of 20px, twenty pixels are put between the left margin of that <div> and the side of the screen. This effectively moves the <div> twenty pixels to the right. To move an element in the other direction, give CSS a negative value: margin-left: -20px will move the element twenty pixels to the left.
style attribute
go inside an opening tag to inline css for that element e.g. <p style="font-size: 12 px; color:red"> <element style="css->colon->value->semicolon->moreCSS ->colon>semicolon->more inline CSS etc.." *..no semicolon if only one style is added-- no need for quotes or semcolon e.g. <p font-size=10>
<title></title>
goes inside <head></head> the web-page's name *what you see in the tab the web-page is open in in your browser
self-closing tag
has no closing tag, but rather a '/' at the end of the opening tag
unexplained
how to a style sheet how to target the html you want to style
why tables are bad practice
https://teamtreehouse.com/community/why-is-it-considered-bad-practice-to-use-tables-markup-a-website
description: content, padding, border, margin
margin the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other. border the edge of the element. It's what we've been making visible every time we set the border property. padding the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content. content is the actual "stuff" in the box. If we're talking about a <p> element, the "stuff" is the text of the paragraph. *You'll see abbreviations like TM, TB, and TP in the diagram. These stand for "top margin," "top border," and "top padding." As we'll see, we can adjust the top, right, left, and bottom padding, border, and margin individually.
z-index
measure of importance: the higher an element's z-index, the higher it will be "stacked" on the page. e.g. Giving an element a z-index of 1 while not giving any of the other elements a z-index ensures that it will sit "on top of" other elements and won't get stuck behind them. e.g. #header { z-index:1; }
clear
move below any floating elements syntax element { clear: /**right, left, or both**/ } consider: div { clear: left; } the div will immediately move below any floating elements on the left side of the page. It can also clear elements on the right. If clear: both, the div will get out of the way of elements floating on the left and right
pixels vs ems
pixel: ..a dot on your computer screen. ..specifying font sizes in pixels is great when you want the user to see exactly on their screen what you designed on yours, though it assumes your screens are of similar size. em: ..a font-size unit ..a relative measure, i.e. one em is equal to the default font size on whatever screen the user is using ..ideal for smartphones: doesn't try to tell enforce exactly how big to make a font, but rather it says: "1em is the font size that is normally used on this device, so 2em is twice as big and 0.5em is half that size"
text-decoration
property:value for text that gives them extra flare options: none, underline, e.g. <a href="https://google.com">google</a> a{ color:#cc0000; text-decoration:none; }
browsers
renders html code reads html code and turn it into the webpage we see
anatomy of a CSS rule
rule: a list of CSS instructions for how to style a specific HTML element or group of HTML elements. selector: specifies exactly which HTML elements to style. Here h1 is the selector. properties and values: located inside the { } brackets, properties and values specify what aspect of the selector to style. In the diagram's example, the color property is set to red, which will display all h1 elements in red.
>
select direct children only, i.e. only an element directly nested inside another element, with no elements inbetween e.g. div > p { /** Some CSS **/ } This only grabs <p>s that are nested directly inside of <div>s; it won't grab any paragraphs that are, say, nested inside lists that are in turn nested inside <div>s.
skeleton for CSS syntax
selector { property: value; } Where: 'selector' can be any HTML element, e.g. <p>, <img>, <table>, etc (but without the '<' and '>').. 'property' is an aspect of the selector, e.g. font-size, color, font-family.. 'value' is a possible setting for a property, e.g. color can be red/blue/black/etc, font-family can be many different fonts, and so on.. *end each property-value with a semi-colon-- that's how CSS knows you're done with one pair and ready for the next *all property-value pairs for a selector are surrounded by curly braces {} e.g. p{ color:green; font-family:Garamond; font-size:24px; } span{ font-size:22px; color:orange; } td{ height:50px; width:50px; border:2px dashed black; } body{ background-color:green; }
<p></p>
split text into paragraphs
background-color
style attribute Change color of webpage's background behind an element. e.g. <body style="background-color:red"</body>
font-family
style attribute Change font of text-based elements e.g. <li style="font-family:Arial" *capitalize font-name *list of available fonts http://www.w3.org/TR/CSS21/fonts.html#generic-font-families
text-align
style attribute align text left, right, center <p style="text-align:left"</p>
font-size
style attribute change font size accepts value of an integer value e.g. <h1 style=font-size:10>
inline CSS
styling in our HTML file without worrying about a separate CSS file. not considered best practice.
<thead></thead> <th><th>
table head Contains information about a table. Use as the first tag in <table> before <tbody></tbody>. Use <th> (table heading) instead of <td> to fill each <tr> e.g., Create heading for each column: Make a <tr> with a <th> for each <tr> in <tbody>
<tr> </tr>
table row
colspan
tell a <td> or <th> to span (take up) a given number of columns Give heading (2 rows wide) to a table: <thead> <tr> <th colspan="2">my 2-row-wide title</tr> </tr> *by default, table cells take up 1 column
float
telling the webpage: "I'm about to tell you where to put this element, but you have to put it into the flow of other elements." i.e. if several elements are all floating, they all know the others are there and don't land on top of each other analogy: think of the HTML page as sort of like a sea, and floating elements as boats on it. All the boats have positions on the sea, and they all see and steer clear of each other e.g. can use floated elements to naturally divide our pages into different sections p { float:left; } div { float:right; } *some positioning methods can accidentally drop elements on top of each other, *sometimes when mixing large floating elements with non-floating ones, elements do end up on top of each other
position:relative
tells the element to move relative to where it would have landed if it just had the default static positioning. e.g. : consider an element positioned relative with a margin-top of 10px.. it doesn't move down ten pixels from any particular thing—it moves down ten pixels from where it otherwise would have been
Hypertext
text with links in it / take you to a new page
<a></a> <a href="https://www.google.com></a>
the anchor element Makes text (or imgs) link to another page *text should be descriptive of where the link is taking you) *href is the name of an attribute of the <a> tag that defines where the link goes anatomy: <element attribute-name="attribute-value (URL or .html file)">link text</element>
Padding
the space between your border and your innermost layer: the actual content. Padding can be set in two ways, just like your margins. either select them individually, like this: padding-top: /*some value*/ padding-right: /*some value*/ padding-bottom: /*some value*/ padding-left: /*some-value*/ Or select them all in one declaration, like this: padding: value value value value; *if desired padding should be the same for all four sides, declare that value only once, e.g. : padding: 10px; will give your HTML element 10 pixels of padding on all sides.
selecting nested elements example
to select paragraphs inside two divs, but not other types of paragraphs, write the CSS selector like this: div div p { font-size:1em; }
Margin top, right, bottom, left
to specify a particular margin e.g. : div { margin-top: /*some value*/ margin-right: /*some value*/ margin-bottom: /*some value*/ margin-left: /*some-value*/ } or with the same effect, define margins starting from the top margin and go around clockwise, e.g. : div { margin: 1px 2px 3px 4px; }
URL
uniform resource locator a web address firefox > right click img > copy img location
* { border: 2px solid black; }
universal selector applies style to every element on the page
nth-child
used to apply styling to the nth child of their parent, e.g.: a:nth-child(3){ color:#FFC125; } Would turn every link that is the third child of its parent element to orange
<body></body>
where you put your content, e.g.: text, images, and links goes right after the <head> tag
i.e. reasons line inline can be bad practice
you have to write the same code over and over, and if you want to make a big stylistic change to several elements, you have to change every single style tag. With a single CSS file, you only have to make the change in one place. *my own thought: if you go hunting through someone's code to change style, you probably expect it to be the in the style sheet-- not the HTML.
