Styling and Layout

Hm. So Many Elements.

There are a ton of HTML elements that we can use.

Check out the list of valid HTML5 elements on MDN

Whew! How do we know which element we should use for a mark-up? How do we choose? (easy for headers, images links, etc… but other content?) →

Use the one that describes / represents the content best.

• if a tag doesn't exist that describes your content, you'll often see a generic container element, like div
• (a div doesn't inherently represent anything)
• but, with so many tags, it should be easy to find one that's appropriate (there are a bunch of new ones)
  • if your element contains navigation elements, use nav
  • if it's your header or footer, use header or footer *etc.

Remember, Mark-up is for structure and meaning, not style

CSS

We use Cascading Style Sheets to style our pages.

• CSS is a stylesheet language
• used to describe the presentation and layout of an HTML document
• for the next few slides, I'm assuming some very basic knowledge of CSS

Definitions

Name the parts of this code: →

h3 {
	font-size: 2em;
	color: #ff0000;
}

this whole thing is a rule...

selector
|   property    value 
|      |        |		    
h3 {
	font-size: 2em; ---+
	                   |---- declaration block
	color: #ff0000; ---+
	|_____________|
          |
		  declaration
}

Definitions

Just to get some terminology straight. When talking about CSS. →

• rule - the selector and all of its accompanying property:value pairs
• selector - specifies an element(s) within the markup where styles will be applied
• property - the name of a particular style
• value - the actual style being applied on the property
• declaration - the property and its value - for example: color:red;
• declaration block - the curly braces and all of the declarations within them
  • there can be multiple declarations in each declaration block, separated by semicolons (;'s)
  • (technically, you can leave off the semicolon of the last declaration, but that's considered bad practice – potentially leads to errors when you add another declaration)

But Wait!!

Do you see any difference in how elements are laid out, even if we haven't explicitly applied styles? →

Take for example… a paragraph (a p tag) and an anchor (a link, and a tag)

• paragraphs seem to go on separate lines
• while anchor links stay on the same line

The Display Property

In CSS, the display property determines how elements are laid out.

• every element has a default display value
• the default for most elements are either block or inline, but there are actually 4 possible values:
  • block
  • inline
  • none
  • inline-block

(Well, and a bunch of others)

Block-Level Elements

block-level elements - start on a new line and stretch out horizontally as far as they can; have a height and width

What are some common block-level elements? →

• div - standard and generic block level element (again, doesn't inherently represent any type of content)
• p - paragraph
• h1 - header
• etc.
• Let's see this in action. →

Inline Elements

inline elements - stay on the same line (do not start a new line); do not have height and width

What are some common inline elements? →

• span - standard and generic inline element
• a - anchor (link)
• em - emphasis
• etc.
• Let's see these in action. →

None

An element with a display value of none:

• will not appear on the page
• the remainder of the page will be rendered as if the element did not exist
• often used to toggle element on/off page (different from visibility property, though!)

What are some common elements that are not displayed? →

• script
• style
• title

Inline-block

Wait, what? An inline-block element is an element that has a width and height (a box), but flows with surrounding content inline (no new line).

• this is useful if you want elements on the same line that have an actual height and width!
• for example, a grid of elements (if you're not using floats or a table)

A Quick Example

On our sample page, try making the div with id="content" inline… and none: →

#content {
	display: inline;
}

#content {
	display: none;
}

More About Block Level Elements

• setting the width on a block level element prevents it from stretching out horizontally
• use max-width if you don't want scrollbars when you resize to small window or have smaller resolution device
• a block-level element can be centered by specifying a width and setting a margin to auto

Let's try it out on our sample page… →

#content {
	border: 1px solid #000;
	max-width: 500px;
	margin:auto;
}

Visibility

As mentioned above, there's another CSS property that can hide and show elements.

visibility - can hide an element but leave space where it should have appeared

Let's see what this looks like on our sample page.

#content {
	visibility: none;
}

Position

After display, the next most important property for layout is position.

An element's position can be:

• static
• relative
• absolute
• fixed

We'll take a look at the first two…

Static

static is the default position value

• not positioned in any special way
• element with position: static is also called (no surprise here) not positioned

Relative

An element with a position of relative can be positioned relative to where it normally would be placed.

It can take these addtional properties to position it relative to what its normal position would be:

• top
• bottom
• left
• right

Relative Continued

Let's try using position relative on our sample page →

• select the div with an id of content
• set the position to relative
• set top to 50px

#content {
	border:1px solid #000;
	position: relative;
	top: 50px;
}

Accessing CSS Properties

It turns out you can access CSS properties through JavaScript!

Use the style property on an element to access each individual CSS property as a property on styles. (Whew… that was a jumble… easier to show than tell!)

Doing the same as the previous slide (but making the display relative in CSS first). →

var c = document.getElementById('content')
c.style.display = 'relative';
c.style.top = '150px';