HELLO

1) Please download Class 05 Starter Code

2) Move the following into your class-work directory:

• fashion-blog

3) Solution to last week's HW is included:

• travel-bucket-list-solution

Class #05

10/01/2018

Intro to Page Layout

Annoucements

• Final Projects:

⇒ First deliverable due Monday, October 22nd

⇒ Project proposal/ideas

Agenda

• CSS Specificity

• Pseudo Selectors

• Chrome Developer Tools

• Semantic HTML

• Layout Lab

CSS SPECIFICITY

CSS Specificity

• Not all CSS-selectors are created equal!

• Inline Styles > ID's > Classes > Elements:


	#article-title { color: red; }

	.section-heading { color: blue; }

	p { color: yellow; }

• What color is the element's text?


	<p id="article-title" class="section-heading">an important paragraph</p>
CSS Specificity

• Which selector is more specific - CodePen:


	p.article {
	  color: blue;
	}

	.article {
	  color: red;
	}

• p.article > .article

• Elements with a CSS class are more specific that just a class

CSS Specificity

• Which selector is more specific:


	p.article {
	  color: blue;
	}

	.container .article {
	  color: red;
	}

• .container .article is more specific than p.article

• Remeber, classes > elements

Pseudo Selectors

Pseudo selectors

• Pseudo selectors allow styling given an element's state

• Consider an <a> tag's states:

⇒ Unvisited

⇒ Visited

⇒ Hover

⇒ Active

• Pseudo classes can target each state with CSS

Pseudo selectors

• Pseudo selectors are applied using the : (colon)


	SELECTOR:PSEUDO_CLASS {
	  ...styles
	}

• Pseudo selectors work with id, class, and element selectors:


	a:hover {
	  color: green;
	}

	.nav-link:visited {
	  color: pink;
	}

	#home-link:active {
  	  color: orange;
	}
Pseudo Selectors

• Common pseudo selectors:

⇒ :first-child - first child of its parent

⇒ :last-child - last child of its parent

⇒ :nth-of-type(n) - every nth child of its parent

• More selectors and info

Developer Tools

Developer Tools

• Chrome tool (all major browsers have a variant)

• Peek under the hood and inspect underlying code

• Crucial for debugging; helps locate errors

• Enable on-the-fly HTML and CSS changes

• Contains a JavaScript console

Go to http://google.com

OSX: command + option + i

PC: F12

Did you check your console?

Semantic HTML

Semantic HTML

Semantic HTML:

The use of HTML markup to reinforce the semantics, or meaning, of information in webpages, rather than merely define its presentation or look

Or...

Introduces meaning to the webpage, rather than just the presentation

Semantic HTML

• The following behave exactly like the <div>:

<header>

<footer>

<nav>

<section>

<aside>

<article>

• The difference is semantics; each possesses a meaning

Semantic HTML

<header>

• Defines a header for a document

• This is different from the <head> element

<footer>

• Defines a footer for a document

<nav>

• Defines navigation links

Semantic HTML

<section>

• Defines a section in a document

• Sections group various components

<aside>

• Defines content aside from the page content (sidebar)

<article>

• Defines an article (as in a blog or news site)

Semantic Layout Example:

Layout Lab

1) Open fashion-blog in SublimeText

2) Build design.png

3) Copy located in copy.txt

4) Design specs can be found in readme.txt

5) Lato font included in <head>

On Deck: Class #06 - Page Layout: Floats

• Horizontal Navigation

• display: inline-block;

• CSS Floats/Clear

• Float Lab

Exit Tickets!