---
# System prepended metadata

title: '2009-GHP-NY Cookie Jar: HTML & CSS, Box Diagramming, Flexbox'

---

# 2009-GHP-NY Cookie Jar: HTML & CSS, Box Diagramming, Flexbox

## Lecture: Intro to HTML & CSS

### When you have `<link rel="stylesheet" href=... />`, how does the HTML "know" to execute the content on that link and add it to the style rules? Is it because it's in the head? Or something else?
***Answer:***
- **Let's start by reviewing `link` tags:**
  - `link` tags only occur in the HTML's `head` tag
  - `link` tags are used to relate the HTML document to _another_ document
  - the `rel` attribute defines the _type_ of relationship; for now, the only relationship you'll use is the "stylesheet" attribute value
  - the `href` attribute describes the _location_ of the other document
- When an HTML document is loaded into the browser, each line is "processed" one-by-one. When a stylesheet's `link` tag is being read, there will be a **request** sent from the browser to the path listed as the `href`'s value (e.g. `styles.css`). That file is then loaded into the browser and, in this case, the styles are applied to the HTML document.
  - **Note:** We will cover this more during the "Lecture: Intro to SPA & AJAX" on the first day of Week 3 (October 5).

### Can you go over the `z-index`?
***Answer:***
> In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. **The z-index attribute lets you adjust the order of the layering of objects when rendering content.**

I'm going to point you to the MDN documentation (and CSS-Tricks) to check out their sandbox example and dive deeper:
- [MDN: z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
    - Re: the "CSS Demo: z-index" sandbox example, observe the changes to the yellow box with the text "Change my z-index" when clicking the other declarations (e.g. `z-index: 5;`) in relation to the other boxes (e.g. blue rectangles with z-index values of 6, 4 and 2).
- [MDN: Understanding CSS z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index)
  - [MDN: Stacking without the z-index property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index)
  - [MDN: Using z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index)
- [CSS-Tricks: z-index](https://css-tricks.com/almanac/properties/z/z-index/)
- [CSS-Tricks: How z-index Works](https://css-tricks.com/video-screencasts/40-how-z-index-works/)


### Regarding the specifity of this [foundations' example](https://codepen.io/FullstackAcademy/pen/zJKmqM) where the `p span` styles override `.main` styles. In my understanding, the _class_ selector should be more specific. Can you explain why the `p span` styles win?
***Answer:***
The properties in the `p span` rule are **only** applied if they do ***not*** conflict with the other selector rules (i.e. `.main` and `p`) (and the HTML exists). Thus, `p span` is _more_ specific about the styling of a **`span` tag that is a [descendant](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) of a `p` tag** _than_ styling that has been applied to a `p` tag's class, and the `span` elements (nested within `p` elements) take on `font-size: 44px`, `text-decoration: underline dotted red;`, etc.
**Note:** I added the referenced code to the Cohort repo [here](https://github.com/FullstackAcademy/2009-GHP-NY-WEB-FT/tree/master/01-junior-phase/02-html-css/demo-foundations-specificity) to "mess around with it." Please schedule an office hour with an Instructor or Fellow to go over this in more depth if it's still cloudy.


### Can we please go over the `calc()` used in the CSS workshop? 
***Answer:***
> The `calc()` CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, or `<integer>` is allowed.
> 
> The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules:
> - `+` Addition
> - `-` Subtraction
> - `*` Multiplication (at least one of the arguments must be a `<number>`)
> - `/` Division (the right-hand side must be a `<number>`)

I'm going to point you to the MDN documentation to check out their sandbox example, ***CSS Demo: calc()***, and dive deeper: [MDN: calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).


### When do we use the different align properties (`align-content` vs `align-items`)?
***Answer:***
Check out this [Stackoverflow response](https://stackoverflow.com/a/34944673) regarding `align-content` vs `align-items` (incl. great visuals and sample codepen links)! Also, as linked in the [***Extra Resources***](https://github.com/FullstackAcademy/2009-GHP-NY-WEB-FT#day-2-html-css-box-diagramming-flexbox) section in the cohort repo, the [Flexbox Froggy](http://flexboxfroggy.com/) game will clarify this in the best way – by practicing! At Level 21, you will find the answer to your question.

### Can you review CSS media queries?
***Answer:***
This CSS-Tricks walkthrough is really good: [CSS Media Queries & Using Available Space](https://css-tricks.com/css-media-queries/).
Additionally, CSS-Tricks has a page that lists a ton of different devices and media queries that would specifically target that device, which I find super useful: [Media Queries for Standard Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/).

## Lecture: Intro to Boxing

### Is "hero" a general term for HTML? Or just for personal webpages?
***Answer:***
**It is a _general_ term.** Please see [Optimizely](https://www.optimizely.com/optimization-glossary/hero-image/)'s two cents on what a "hero" is below:
> A hero image is a website design term used to describe an oversized banner image at the top of a website. Sometimes called a “hero header”, it serves as a user’s first glimpse of your company and offering because of its prominent placement towards the top of a webpage that usually extends full-width.

**Advantages of a Hero image design:**
  - Visual appeal
  - Text readability
  - Interactivity
  - Storytelling

***References:***
  - [Optimizely: Hero Image](https://www.optimizely.com/optimization-glossary/hero-image/)
  - Envato's [Exploring the Hero Image Trend in Web Design](https://envato.com/blog/hero-image-trend-in-web-design/)
  - UX Planet's [Hero Image Website Design: 21 Best Examples & Templates for Your Inspiration](https://uxplanet.org/hero-image-website-design-21-best-examples-templates-for-your-inspiration-56cd3d79c688)


## Lecture: Flexbox

No questions.