CSE 154

Lecture 4: Layout

Layout

Today's agenda:

• Administrivia (of course)
• HTML
• id and class attributes
• Grouping content
• CSS
• Context Selectors
• Box Model
• Alignment
• Floats
• Flexbox
• Position

Administrivia

Reminder: Please remember to submit an aboutme.html to GradeIt

CP1 due this evening (no late days on CPs)

WPL and Office Hours

Updated HW 1 (images|spec|sample pdf)

Even more HTML

id and class

id

Unique identifier for an element

Only allowed one id value per page

Each element can only have one id

class

Non-unique grouping attribute to share with many elements

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>

HTML

Both paragraphs have the same class (product), but each has its own ID

Why are these useful?

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

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

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

A mnemonic: .java programs compile into .class files so...
try to remember dot (.) class and hash (#) 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 or page element (e.g., submit button), 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

There are two general content grouping tags.

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

Most likely each of these tags in your code will have a class or id associated with them, though not always.

Descriptive content groups were introduced in HTML5. You're less likely to need a separate class if you use these semantic structures instead of a more general one such as a <div>.

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

CSS Context Selectors

Context selectors are used to selectively style page elements

Examples:

            selector1 selector2 {
              properties
            }
          

CSS

... 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 with no tags in between

Context Selector Example (without >)

        <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>
          

HTML

            li strong { text-decoration: underline; }
          

CSS

Produces:

Context Selector Example (with >)

         <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>
          

HTML

            li > strong { text-decoration: underline; }
          

CSS

Produces:

output

CSS Attributes: width and height

Height:

Block and inline elements normally have the height of their content

Width:

Inline elements have the width of their content

Block elements have a width that stretches across the whole page

width and height Example

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

HTML

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

CSS

The 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; }
          

CSS

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;
          }
          

CSS

output

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

Alignment

text-align: (center | left | right | justify)

Align inline elements horizontally inside a parent container

vertical-align: (baseline | text-top | text-bottom | sub | super)

Align inline elements vertically relative to the text

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

Floating Example

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 positions it on its own line (spanning the width of the page)

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

Floating Example

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)
          

positioning Elements

position: static

Default value. Elements render in order, as they appear in the document flow

position: fixed

Puts an element at an exact position within the browser window

position: absolute

Puts an element at an absolute position based on the location of the element's parent container

position: relative

Makes children positioned relative to the parent container

Another good explanation is here

Positioning Example

            #menubar {
              position: absolute; /** fixed */
              left: 450px;
              top: 60px;
            }
          

CSS

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

HTML

Puts a menu bar on the screen 450px from the left, and 60px down from the top.

display Property

The display property specifies the display behavior (the type of rendering box) of an element. The four types you most often will see are:

• inline: Displays an element as an inline element. Any height and width properties will have no effect.
• block: Displays an element as a block element. It starts on a new line, and takes up the whole width of a page.
• none: The element is completely removed.
• flex: Displays an element as a block-level flex container

Flexbox

flexbox

A layout library built into CSS -- more on this in this week's lab

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-basison the items to specify how much space of the container each thing should take up

Strategies for page layout

1. Hit your head against the desk
2. Crawl into a foetal position and cry your eyes out
3. Try some position: _________________ and float: _________ styles.
4. Test and realize that didn't work.
5. Hit your head against the desk again.
6. Look it up in stack overflow. Get really confused.
7. Throw some of that code in your css file.
8. Test that and realize it didn't work.
9. Play with Flexbox Froggy.
10. Implement what you think you can with Flexbox
11. Get it close to call it Good Enough

from https://imgur.com/gallery/Q3cUg29

Seriously... Strategies for page layout

First try box model, text-align, vertical-align

Next try flex boxes. Powerful way to build many different layouts in a page.

Special Use Cases:

Use position: absolute|fixed|relative only when you want complete control over where things go

Use float only when you want to remove an element from the flow, and wrap text around it