Fewd - Html & Css - Thinkful.com

Front 1

HTML Tags

Back 1

HTML tags include the element name, like "h1", AND the "<" and ">" symbols. Examples:

<h1>This is an H1 tag</h1>

<br />

Front 2

HTML Elements

Back 2

HTML elements include the element name, like "h1", WITHOUT the "<" and ">" symbols. Examples:

h1
br

Front 3

CSS Selectors

Back 3

CSS selectors are used in CSS and reference an HTML element, id, class or pseudo-class that are being manipulated in using internal or external styles. Examples:

h1 {
font-size: 50px;
}

#title {
font-style: italic;
}

.red {
color: red;
}

Front 4

CSS Pseudo-class Selectors

Back 4

CSS pseudo-class selectors are a way of accessing HTML items that aren't part of the document tree.

They are also CSS selectors with a colon proceeding them. Pseudo-class selectors can be link-related [:link], input-related [:focus], position or number-based (:last-child), relational (:empty) and text-related [::first-letter].

Examples of link-related pseudo-class selectors are below:

a:link, a:visited {
color: green;
}

a:hover, a:active {
text-decoration: none;
}

Front 5

HTML Box Model

Back 5

The box model concept states that every element on a web page is a rectangular box and may include margins, padding and borders.

Front 6

The Size of an HTML Element

Back 6

The size of an HTML element is determined by the padding and borders and NOT the margins.

Front 7

CSS Width Property

Back 7

Block-level elements have a default width property of 100%.

Front 8

CSS Reset

Back 8

Code that is used to reset all CSS values to a uniform size so I can have an easier time styling elements. See:

http://www.cssreset.com/

Front 9

Long-hand Border Styles

Back 9

Property examples:

border-width: 1px;
border-style: solid;
border-color: #f00;

Front 10

CSS Relative vs Absolute Length Values

Back 10

- Relative values are correlative to the element which the value is being applied to. These values may include "em" and percentages.

-Absolute values are fixed units of measurement regardless of the element. There values may include pixels, points, inches, centimeters and more.

Front 11

CSS "float" Property

Back 11

The "float" property allows you to take elements and float them right or left, positioning them directly next to or opposite each other.

To float element element to the right or left I MUST SPECIFY A WIDTH.

Important notes about using floats:
- When floating an element it will float to the edge of its parent container.

- When floating an element other elements will line up around it within the natural flow of the page.

Front 12

CSS "clear" Property

Back 12

To float an element, or handful of elements, and then return the document to its normal flow use the "clear" property.

The "clear" property acts on the element it is applied to and returns the document back to its normal flow, clearing every floated element up to that point.

In the example below the using the "clear: both" property for the [footer] element will force it fall below the [section] and [aside] elements above it.

<header>The Header</header>

<section style="float: left;">The Section</section>
<aside style="float: right;">The Aside</aside>

<footer style="clear: both;">The Footer</footer>

Front 13

Box Offset Properties

Back 13

So long as an element's "position" is not set to "static" the box offset properties may be used. These offset properties including "top", "right", "bottom" or "left".

Depending on the property, they position an element in the direction specified, "top", "right", "bottom" or "left".

Front 14

Grids and Frameworks

Back 14

- Grids: Grids, both vertical and baseline, provide a great way to add cadence (AKA rhythmic flow) to your website and keep everything aligned.

- Frameworks: Frameworks provide a way to rapidly build a website based on a set of predetermined standings. Depending on the project, frameworks can provide a complete solution.

- Bootstrap: Bootstrap (formerly Twitter Bootstrap) may be considered a grid or framework. See:
http://getbootstrap.com/

Front 15

CSS Normal Flow

Back 15

Boxes in normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.

Front 16

List of CSS "position" Property Values

Back 16

CSS "position" property values:
- static

- relative

- absolute

- fixed

- inherit

Front 17

position: static;

Back 17

- Default "position" value.

- Can't use the offset properties of "top", "right", "bottom" or "left" that "position: static;" is in.

- The CSS normal flow isn't interrupted.

Front 18

position: relative;

Back 18

- This value allows me to position elements in relation to a parent element.

- I also CAN use the offset properties of "top", "right", "bottom" or "left" in the same CSS rule that "position: relative;" is in.

- The CSS normal flow isn't interrupted from any elements that follow.

Front 19

position: absolute;

Back 19

- This value allows me to position elements in ANYWHERE inside a parent element.

- I also CAN use the offset properties of "top", "right", "bottom" or "left" in the same CSS rule that "position: relative;" is in.

- The CSS normal flow IS INTERRUPTED.

Front 20

position: fixed;

Back 20

- An element with "position: fixed;" shares all the rules of an absolutely positioned element, except that the viewport (browser/device window) positions the "fixed" element, as opposed to any parent element.

- A "fixed" element does not scroll with the document and stays in the same place on the browser/device window.

Front 21

position: inherit;

Back 21

- The "position: inherit;" property and value makes an element inherit the "position" property and value of its parent element.

- Typically elements with a position "property" do not naturally inherit their parent's values. The "static" value is assigned if no position is given.

Front 22

[form] Element

Back 22

The [form] element identifies where on the page control elements will appear. Additional, it will wrap all of the elements including within the form, similar to a [div] element.


Hidden form request:
<form action="/login" method="post">
...
</form>


Visible form request:
<form action="/login" method="get">
...
</form>

Front 23

[form] Attributes

Back 23

The most common attributes applied to the [form] element are [action] and [method].


[action] Attribute

The [action] attribute contains the URL to which information included within the form will be sent for processing by the server.


[method] Attribute

The [method] attribute is the HTTP method browsers should use to submit the form data. Both of these [form] attributes pertain to submitting and processing data.

Front 24

[form] Text Fields & Text Areas

Back 24

Text fields and textareas are used for collecting text- or string-based data. This data may include passages of text content, passwords, telephone numbers and other info.

Front 25

More on Text Fields

Back 25

The [input] element is used to obtain text from users and used the [type] attribute to define what type of info is to be captured within the control.

The most popular [type] attribute value is "text", which denotes a single line of text input. There is also a [type] attribute value of "password".

The [name] attribute is used as the name of the control and is submitted along with the input data to the server.

Example:
<input type="text" name="username" />

Front 26

HTML5 [type] Attribute Values

Back 26

- color

- email:
<input type="email" name="useremail" />

- range

- time

- date

- month

- search

- url

- datetime

- number

- tel

- week

Front 27

[textarea] vs [input] Elements

Back 27

The [textarea] element differs from the [input] element in that it:

- Can accept larger passages of text spanning multiple lines.

- Has start and end tags that can wrap plain text.

- Only accepts strings for the type of value.

Front 28

More on the [textarea] Element

Back 28

- The [name] attribute is still used.

- It's sizing attributes are [cols] for the width in terms of average character width and [rows] for height in terms of the number of lines of visible text.

- The size of the [textarea] element is usually specified by the [width] and [height] properties in CSS.

Front 29

Radio Buttons

Back 29

Example below where Friday starts off as the default item checked:

<input type="radio" name="day" value="Friday" checked />
<input type="radio" name="day" value="Saturday" />
<input type="radio" name="day" value="Sunday" />

Front 30

Check Boxes

Back 30

Check box example where the default for Friday is checked:

<input type="checkbox" name="day" value="Friday" checked /> Friday
<input type="checkbox" name="day" value="Saturday" /> Saturday
<input type="checkbox" name="day" value="Sunday" /> Sunday

Front 31

Single Selection Drop-Down List

Back 31

Single selection drop-down list example where the default for Friday is selected:

<select name="day">
<option value="Friday" selected>Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>

Front 32

Multiple Selections Drop-Down List

Back 32

Multiple selections drop-down list example where the default for Friday is selected:

<select name="day" multiple>
<option value="Friday" selected>Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>

Front 33

Submit Input

Back 33

Example:

<input type="submit" name="submit" value="Submit" />

Front 34

Submit Button

Back 34

Example below. May have some issues in older

<button name="submit">
<strong>Send Us</strong> a Message
</button>

Front 35

Hidden Input

Back 35

Can pass data to the server without displaying it to users. Example:

<input type="hidden" name="tracking-code" value="abc-123" />

Front 36

File Input

Back 36

Can upload a file to send via a form.

<input type="file" name="file" />

Front 37

[label] Element

Back 37

Labels provide captions or headings for form controls and provide for web accessibility. Example below:

<label for="username">Username</label>
<input type="text" name="username" id="username" />


Another example below w/ [label] tags wrapping controls so that the "for" attribute is NOT needed:

<label>Username
<input type="text" name="username" id="username">
</label>

Front 38

[fieldset] Element

Back 38

[fieldset] elements group controls into organized sections, just like [section] elements. They are block-level elements which contain a border outline by default.

<fieldset>
<label>
Username
<input type="text" name="username" />
</label>
<label>
Password
<input type="text" name="password" />
</label>
</fieldset>

Front 39

[legend] Element

Back 39

A [legend] element provides a caption, or heading, for the [fieldset] element. It should come right after the [fieldset] tag.

<fieldset>
<legend>Login</legend>
<label>
Username
<input type="text" name="username" />
</label>
<label>
Password
<input type="text" name="password" />
</label>
</fieldset>

Front 40

"disabled" Form Attribute

Back 40

Turns off an element or control so that it is not available for interaction or input. Elements that are disabled won't send any value to the server for from processing.

<label>
Username
<input type="text" name="username" disabled />
</label>

Front 41

"placeholder" HTML5 Attribute

Back 41

HTML5 attribute that provides a hint of tip without the control of an [input] or [textarea] element that disappears once the control is clicked on or gains focus.

<label>
Email Address
<input type="email" name="email-address" placeholder="[e-mail]" />
</label>

Front 42

"required" HTML5 Attribute

Back 42

HTML5 attribute that forces an element or form control to control a value before being submitted to the server.

<label>
Email Address
<input type="email" name="email-address" required />
</label>

Front 43

Transparent Backgrounds

Back 43

When using a RGBa or HSLa value I can add a fallback background color for browsers that don't support those values by including a hexadecimal background color first.

div {
background-color: #b2b2b2;
background-color: rgba(0, 0, 0, 0.3);
}

Front 44

Background Shorthand

Back 44

Description:

.box {
<background-color> <background-image> <background-repeat> <background-attachment> <background-position>;
}


Example:

.box {
#f00 url(images/bg.png) no-repeat fixed center top;
}

Front 45

Linear Gradient Background

Back 45

Example with a fallback for browsers that don't support CSS3:

div {
background: #466368;
background: -webkit-linear-gradient(#648880, #293f50);
background: -moz-linear-gradient(#648880, #293f50);
background: linear-gradient(#648880, #293f50);
}

Front 46

Changing the Direction of a Gradient Background

Back 46

By default gradients move from the top to the bottom of an element. The Example below moves from the top to the bottom right.

div {
background: #466368;
background: linear-gradient(to right bottom, #648880, #293f50);
}

Front 47

Radial Gradient Background

Back 47

Radial gradients work from the inside to the outside of an element.

div {
background: #466368;
background: radial-gradient(#648880, #293f50);
}

Front 48

Gradient Background Color Stops

Back 48

The gradient below goes from left to right and includes three stops.

div {
background: #648880;
background: linear-gradient(to right, #f6f1d3, #648880, #293f50);
}


The stops can use percentages too. The last middle stop below ends at 85% of the element from the left to right.

div {
background: #648880;
background: linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);
}

Front 49

Multiple Background Images

Back 49

Use the "background" property and then commas to separate each value.

div {
background: url("foreground.png") 0 0 no-repeat,
url("middle-ground.png") 0 0 no-repeat,
url("background.png") 0 0 no-repeat;
}