Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
html-css-layout_notes.pdf

README.md

LESSON: html-css-layout


2018-06-13

Tags: html, css, box-model, media queries

OBJECTIVES

• Explain the box model of element spacing. • Establish spacing inside and outside of elements using margin and padding. • Explain the difference between different types of distance measurement in a web page, including 'px', '%', and 'em'. • Use 'float' and 'clear' to stack elements alongside each other. • Employ media queries to change CSS rules based on screen size. • Explain the difference between 'static' and 'fixed' positioning.

VOCABULARY

hard-coded: code in a program that is written in such a way that they cannot be altered without modifying the program.

Semantic: to be logical and or to have a specific meaning.

Box Model

Border: sets a perimeter around an element. You can specify it’s color and thickness.

Margin: specifies spacing between the outside of an element's border and any adjacent elements.

Padding: specifies spacing between the inside of an element's border and the contents of that element

The elements above, including height and width, can be measured in the following terms:

px: unit of measurement that counts as the little squares that make up your screen.

% : which is the % of the size of the element containing your content. Example:

<div class=”parent”>
	<ul>
	<li> Hello </li>
	<li> World </li>
	</ul>
	<p> We are the children and the div is our mama. We take the height and      width that you assign to her. </p>
</div>

em: ties measurement to font size. One em is the width of the letter 'm'. For all dimensions except font-size, em will refer to the font size of the element.

“clearfix” hack: a way for an element to automatically clear its child elements.

A media query acts a little like an if statement for your CSS; it will selectively hide or show the CSS it contains based on whether or not the condition in the query comes back as true. Example:

@media (max-width: 700px) {
  div {
    width: 300px;
    height: 300px;
  }
}