FRontin': Fast and Furious

day 2, Part D: HTML and css syntax and style 


Ashley Williams, NYCDA

Thursday, 7 Mar 2013


html review

  • used only for MARKING UP CONTENT
  • tags, contained in carets, must be open and closed 
e.g. <div></div>
  • tags can be nested 
e.g. <div>
       <a href="page2.html">Link</a>
     </div>
  • tags can have attributes, the most important are class and id
e.g. <div class="article" id="first">
       <a class="button submit">Submit the Form </a>
     </div>

DOCTYPE


<!doctype html>

HTML5 tags

  • <header> and <footer>
  • <nav> "a section of the page that links to other pages on the site, or to other sections of that particular page."  
  • <section> "a group of content based around a theme. **must be able to stand alone."
  • <article> "an independent, self-contained composition. e.g. news posts, magazine articles, user comments."
  • <aside>  "content related to an article but not necessary to its  understanding."

EXERCISE 1

Open exercise1.html in Sublime Text
The instructions are in a comment at the top

<!-- INSTRUCTIONS
1. refactor the <!DOCTYPE> and <html> tag to use the new HTML5 syntax
2. replace the <divs> with the appropriate HTML5 elements 
3. remember to update the header levels when creating new header elements
4. add article tags around appropriate elements
-->

CSS REVIEW

CSS can be added to your HTML in 3 ways
  • inline
e.g. <div style="background-color: red; color:blue;"></div>
  • in the <head>
e.g. <head>
       <style>
         div { background-color: red; color: blue; }
       </style>
     </head>
  • in an external stylesheet via <link>
e.g. <head> 
       <title> My Page </title>
       <link rel="stylesheet" href="styles.css"/>
     </head>

DOM SELECTORS

  • Element selectors
  • Class selectors
  • ID selectors

For more information on advanced selectors:

Element selectors


HTML
<h1 class="intro" id="header">NYCDA Web Dev</h1>

CSS
h1 {
   color: #ffffff;
   font-style: bold;
}

Class Selector


HTML
<h1 class="intro" id="header">NYCDA Web Dev</h1>

CSS
.intro {
   color: #ffffff;
   font-style: bold;
}

ID Selectors

HTML
<h1 class="intro" id="header">NYCDA Web Dev</h1>

CSS
#header {
   color: #ffffff;
   font-style: bold;
}

COMPOUND SELECTORS


HTML
<h1 class="intro" id="header">NYCDA Web Dev</h1>

CSS
h1#header{
   color: #ffffff;
   font-style: bold;
}

CASCADE ORDER


  • Style priority is determined by position (even within a document)
  • Non-conflicting properties will be combined

Cascade order

What properties will be used to display the div? 
Which will be over-ridden? 

<div class="practice" id="first">This is Only a Test</div>

div {
  background-color: #666666;
  color: black;
  font-style: italic;
}
div {
  color: green;
  font-family: georgia, sans-serif;
}

Floats

float: left / right / none
  • HTML documents have a flow of elements
  • Floating and element takes it out of this flow
  • Other elements in the same container will "wrap" around items that are floating.
  • Floating elements stack up to the edge
  • When they hit the edge of the container they will move down to the next available edge (**objects with different heights can cause problems!)

EXERCISE 2


Open exercise2.html and exercise2.css in sublime
Also open exercise2.html in Safari

<!-- INSTRUCTIONS

1. remove all inline and <head> styles and put them in the external stylesheet so that you no longer need the !important for background-color
2. center the slogan and make it italic using an ID selector
3. float the aside to the right and add 10px of margin to its left and bottom sides
4. then make the article width the same width as the aside and float it left

-->

CLEARS

  • When an item is floated, its height is sometimes larger than its container

<article>
  <aside>
     <img src="giraffe.png" height="100px"/>
  </aside>
</article>

What do you think this would look like in the browser?

CLEARS - THE WRONG WAY

Clear with an element placed after the float
  • requires the DOM element order to remain the same
  • background and border do not extend

Manually
  • requires an empty element just for style (BOO)
  • might not be necessary later, becomes vestigial


THE CLEAR FIX

.group:before,
.group:after  {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1; /* IE6&6 */
}

Inheritance and specificity

  • Parent/child relationship
  • Nested elements inherit their parents styles

<div id="parent>
  <div class="child" id="1"></div>
  <div class="child" id="2"></div>
  <a class="child" id="3">Submit</a>
</div>

#parent {
   font-style: italic;
}

Nested selectors

#parent .child {
   font-style: normal;
}

div a {
   font-style: normal;
}

Priority of selectors


0 , 0 , 0 , 0


  1. inline styles?
  2. # of ID selectors
  3. # of class selectors
  4. # of element selectors

Priority of selectors


Determine the specificity of each selector

header { -moz-border-radius: 2px; }

.row { text-shadow: 4px 4px 1px #fff; }

#copyright { text-style: italic; }

<a style="color: red">Delete</a>

aside { padding: 0 0 20px 20px; !important}

PRIority of selectors


Write compound selectors to have the following priorities:


  • 0, 1, 0, 1
  • 0, 1, 0, 2
  • 0, 0, 2, 1
  • 0, 0, 2, 2

Exercise #3

Open exercise3.html and exercise3.css in Sublime
Open exercise3.html in Safari

<!-- INSTRUCTIONS

1. refactor this code to use clearfix to clear floats
2. use a nested selector to make paragraphs in asides italic 
3. for anchor tags inside aside paragraphs, override the inherited font-style and make it normal
4. refactor the css for .active and .copyright so that !important can be removed

-->

The box model


  • content
  • padding
  • border
  • margin

Overflow

overflow: visible / auto / hidden / scroll
  • visible (default): visible content extends past container
  • auto: adds a scroll bar is necessary
  • hidden: visible content stop at container boundary
  • scroll: adds scroll bar, even if not necessary

Positioning

position: static / relative / absolute / fixed

  • anything other than static causes the element to become a positioned element

  • positioned elements get new properties:

top: // left: // bottom: // right:

Relative positioning

  • Same as static, but gives options to use TLBR
  • Renders in normal flow, then shifted based on TLBR
  • Can be used to make an element a positioned element without changing its position or behavior

Absolute Positioning

  • Taken out of normal flow
  • Position is based on the container element

Fixed positioning

  • Affixed to position in window regardless of scrolling

Exercise #4

Open exercise4.html and exercise4.css in Sublime
Open exercise4.html in Safari

<!-- INSTRUCTIONS

1. make the figure in the footer have a total box width and height of 120px (consider the padding, margin, and border values that already exist)
2. hide overflow on the x-axis and add a scroll bar on the y-axis (if necessary)
**hint: you can use overflow-x and overflow-y to target different axies
3. anchors with thte button class are floated to the right. to center them vertically use relative positioning to move the button down 3px
4. the newsletter paragraph is sticking to the bottom of the window instead of the bottom of the footer. add the necessary positioning to scope it correctly
5. use absolute positioning to place the figure in the upper right hand corner of the footer
-->

Get D.R.Y.


Don't

repeat

yourself

use INHERITANCE

  • Children inherit styles from their parent, use this to your advantage.

<section class="events">
   <article id="1"></article>
   <article id="2"></article>
   <article id="3"></article>
</section>

Refactor these selectors:

#1 { font-family: Helvetica, sans-serif; }
#2 { font-family: Helvetica, sans-serif; }
#3 { font-family: Helvetica, sans-serif; }

Combine selectors

  • You can assign the same properties to multiple selectors by separating them with a comma

Refactor these selectors:

p { line-height: 1em; }
footer#primary { line-height: 1em }
.product {
   line-height: 1em
   padding: 10px;
}


Selector abstraction

  • Design your class structure to most efficiently apply styles

How would you refactor this code?

<a href="learn_more.html" class="learn_more">Learn More</a>
<button href="contact.html" class="contact">Contact Us</button>


.learn_more { border: 1px solid #000; background-color: red;
   color: white; text-transform: uppercase;
}
.contact { border: 1px solid #000; background-color: blue;
   color: white; text-transform: uppercase;
}

style shorthand


article { 
  padding-top: 20px; 
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px; 
}

article {
   padding: 20px 10px 20px 10px;
}

article {
   padding: 20px 10px;
}

style shorthand


font: 16px/18px bold italic sans-serif;
/* size/line-height weight style family */

background: #000 url(image.png) no-repeat center top;
/* color image repeat x-pos y-pos */

margin or padding: 0 10px 0 10px;
/* top right bottom left / t r&l b / t&b r&l */

border: 3px solid #ccc;
/* width style color */
Learn more
https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties

display types - block

display: none / block / inline / inline-block


Block elements:

  • stretch the full width of their container
  • full box model (margin, padding, border, content)
  • line breaks before and after

<div>, <p>, <ul>, <ol>, <li>, <h1>...<h6>

Display types: inline

Inline elements:
  • Usually inside block-level elements
  • Size based on content
  • No line breaks

<span>, <a>, <em>, <img>, <strong>

display Types - inline-block

Inline block elements:
  • Same flow as inline elements
  • Get full box model like block elements

using display types to stay dry

How would you refactor this?

<header>
  <h1>Sven's Snowshow Superstore</h1>
  <p>Our snowshoes are so stylish!</p>
   <a class="sale" href="/sale">View our sales</a>
</header>

.sale {
   float: left;
   width: 100%;
   padding: 0 10px;
   margin: 5px 0;
   text-align: center;
}

centering

  • Based on what you know so far, how do you think you would center a block-level element?
  • A inline element?

Centering: Block level elements

  • Give the block element a fixed width and set the right and left margins to auto

<aside>
  <img src="pic.png"/>
</aside>

aside img {
   width: 200px;
   margin: 0 auto;
}

Centering: inline and inline-block

  • Set the block element container to text-align center

<footer>
  <span class="copyright">(c) Sven's Snowshoe Superstore </span>
</footer>

footer {
   text-align: center;
}

try it

How would you center both the newsletter <div> and the heading on this page?

<body>
   <div class="newsletter">
      <header>
        <h1>Sign up for our newsletter!</h1>
      </header>
   </div>
</body>

Exercise 5

Open exercise5.html and exercise5.css in Sublime
Open exercise5.html in Safari

<!-- INSTRUCTIONS

1. refactor the article declarations to make them apply to a single parent container
2. combine selectors that have the same properties using a comma delimited list, then override that declaration using individual definitions
3. refactor the paragraph properties to use shorthand syntax
4. make the nav list items display horizontally using display: inline. give them right and left margins of 5px (don't forget to use shorthand!)
5. center the nav items, use shorthand syntax where appropriate

-->

Resources:

Made with Slides.com