Layout

Today's agenda:

• HTML: id and class attributes
• HTML: content sections. er, divisions. er. uh.
• CSS: Box Model
• CSS: Alignment
• CSS: Floats
• CSS: Flexbox
• CSS: Position

id and class

id

unique identifier for an element

class

non-unique grouping attribute to share with many elements

• only allowed one id value per page
• each element can only have one id

• many elements (even of different types) can share the same class
• each element can have many different classes

Example:

<p id="product-12345" class="product">Puppy calendar<p>
<p id="product-133337" class="product">Cat mug<p>

Produces:

Why are these useful?

Gives you another way to talk about your content in CSS (and later in JS)

#my-id {
	/* ... properties ... */
}
.my-class {
	/* ... other properties ... */
}

A mnemonic: .java programs compile into .class files: dot class and hash id

or number id or pound id or octothorpe id

id or class?

How do you decide whether to use an id or a class?

Probably prefer class. You can only use an id once per page, so it's good to be a little stingy with them. classes are free.

On the other hand, if you know you are making a unique section of a page, id is the way to go.

A caveat:

It's easy to just make classes for everything, but don't forget that HTML is made to describe your content. So, prefer a <p> tag over a class named paragraph.

Grouping content

Ways to group content:

These are descriptive content groups. It's less likely that you'd need to pair these with a class. (all block level)

• <header>
• <footer>
• <article>
• <section>
• <aside>
• <main>

Also, there are two general content grouping tags. These are the ones that you probably need to pair with a class or id, though not always.

• <div> -- block level
• <span> -- inline level

CSS context selectors

applies the given properties to selector2 only if it is inside a selector1 on the page:

selector1 selector2 {
	properties
}

applies the given properties to selector2 only if it is directly inside a selector1 on the page (selector2 tag is immediately inside selector1 with no tags in between):

selector1 > selector2 {
	properties
}

Context selector example

<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
	<li>The <strong>best</strong> prices in town!</li>
	<li><em><strong>Act</strong></em> while supplies last!</li>
</ul>

li strong { text-decoration: underline; }

With the >:

<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
	<li>The <strong>best</strong> prices in town!</li>
	<li><em><strong>Act</strong></em> while supplies last!</li>
</ul>

li > strong { text-decoration: underline; }

Layout

width and height css attributes

block and inline elements normally have the height of their content

inline elements have the width of their content

block elements have a width that streches across the whole page

width and height properties

        <div class="block"></div>

        div.block {
            width: 200px;
            height: 200px;
        }
    

Box model

A box: (Inspect me!)

Wait, what?

margin

(outside) space between different elements

border

(optionally visible) line that separates elements

padding

(inside) space between element content and border

CSS properties for margins

Specified in px, pt, em, rem, % (or ex, or even in in, cm, mm, pc...but don't :)

CSS properties for borders

h4 { border: 5px solid red; }

• thickness (specified in px, pt, em, or thin, medium, thick)
• style (none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid)
• color (specified as seen previously for text and background colors)

More border properties

Rounded corners with border-radius

p {
	border: 3px solid lightsalmon;
	border-radius: 12px;
	padding: 0.5em;
}

• each side's border radius can be set individually, separated by spaces

CSS properties for padding

Again, prefer px, pt, em, rem, or % for units

Alignment

text-align

align inline elements horizontally inside a parent container

vertical-align

align inline elements vertically relative to the text

Alignment Example:

        
            section {
                 text-align: right;
            }
            img {
                 vertical-align: middle;
            }
        
    

CSS

        
            <section>
                <p>
                    This is some text!
                    <img src="../../../images/home.png">
                </p>
            </section>
        
    

HTML

Output:

output

How to center

        
            body {
                text-align: center; /** Doesn't work! */
            }

            .block {
                width: 100px;
                height: 100px;
                background-color: #affa

                /* Try this instead: */
                /* margin-right: auto; */
                /* marign-left: auto; */
            }
        
    

CSS

        
            <body>
                <div class="block">
            </body>
        
    

HTML

Output: (inspect and edit me!)

output

Use margin-right: auto; and margin-left: auto; on the blue block to center.

Confusing stuff:

text-align -- apply to a parent container to align the inline content within

vertical-align -- apply to inline items (usually those with a height, like an image) to vertically align them relative to other inline elements nearby

margin-left: auto;, margin-right: auto -- use auto margins and a width to center a block element in it's parent

Floating elements

A way to remove elements from the normal document element flow, usually to get other elements to "wrap" around them

The red block is a non-floating (regular) block element (a div). It's only 100px wide, but since it's a block element, the browser gives it

<div> (white background)
    <div> (red block)
    <p> (text)
    

Now the red block has the float CSS property set to left. This tells the browser to give the element as much spaces as it needs, and then start bringing the next content up from below and fill in the cracks

<div> (white background)
    <div> (red block, floating left)
    <p> (text)
    

Postition

absolute, relative, fixed

Positioning elements:

fixed

puts an element at a position within the browser window

absolute

puts an element at an absolute position (WRT either the whole webpage or a parent container)

Effects on containers:

relative

makes children positioned relative to the container

absolute

makes children positioned relative to the container

example

        
            #menubar {
                position: absolute; /** fixed */
                left: 400px;
                top: 50px;
            }
        
    

CSS

        
             <div id="menubar">Menu stuff!</div>
        
    

HTML

Puts a menu bar on the screen 400px from the left, and 50px down from the top.

display property

• inline
• block
• none
• flex

flexbox

A layout library built into CSS -- more on this in lab tomorrow

Useful for nestling block elements next to each other in rows or columns, and specifying how much space each of the elements should take up.

When you set a parent to display: flex;, all items inside it become "flex-items."

Use justify-content on the flex container to indicate how to position the flex-items within the container, and flex-direction to say which shape the elements should make (rows or columns)

Use flex-basis on the items to specify how much space of the container each thing should take up.

How to layout a page:

First thought: box-model, and text-align, vertical-align

Next thought: flex-box. Powerful way to build many different layouts in a page.

Special use:

• position: absolute, fixed, relative : only when you want complete control over where things go
• float : only when you want to remove an element from the flow, and wrap text around it