CSE 154

Different Layout Methods with CSS

CSS...

Source: reddit.com/r/ProgrammerHumor

Moral of the story: CSS has a notorious reputation (mostly pre-flex), but it is important and you bring a lot of value to a full-stack team if you can figure out responsive layout (with good practices).

Meanwhile... you can now appreciate some CSS in-real-life: r/css_irl

Quick Administrivia

  • Notecard feedback was very helpful! Lots of good responses both in "gots" and "needs"
  • Will post some follow-up in Piazza later today!

Week 2 Learning Objectives

By the end of this week, you should be able to:

  • Know how to style a webpage using different CSS properties (we expect you to know about those listed in class slides and readings, but won't test you on other properties).
  • Understand the hierachy of the HTML document (DOM) and how it is used in CSS and style inheritance.
  • Identify the box model outline (margin, padding, border) and the relationship between the box models of parent/children elements
  • Know different layout strategies in CSS (introduced in lab and reading) and identify tradeoffs between each (discussed today).
  • Know the difference between default layouts for block vs. inline elements.
  • Take a desired layout and existing HTML and use one or more strategies to accomplish the layout.

Quick Note on Citations

How to cite images?

Example 1 (citing your own images)

Example 2 (citing other images)

Going Deeper into CSS Inheritance

Cascading Style Sheets

It's called Cascading Style Sheets because the properties of an element cascade together in this order:

  1. Browser's default styles (reference)
  2. External style sheets (in a <link> tag)
  3. Internal style sheets (in a <style> tag in the page header)
  4. Inline style (the style attribute of an HTML element)

Reminder: You should never use 3. or 4. to accomplish styles in your webpages for this course.

Inheriting styles (explanation) 

body { font-family: sans-serif; background-color: yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: overline underline; }
h2 { font-weight: bold; text-align: center; }

CSS

This is a heading.

A styled paragraph. Previous slides are available on the web site.

  • a bulleted list

output

When multiple styles apply to an element, they are inherited

A more tightly-matching rule can override a more general inherited rule

Not all properties are inherited (notice link's color above)

Styles that Conflict

body { color: green; }
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }

CSS

This paragraph uses the first style above

This heading uses both styles above

output

When two styles set conflicting values for the same property, the latter style takes precedence

The DOM (Document Object Model)

A tree-shaped structure built out of all of the HTML elements in a page.

The browser uses the DOM defined by your HTML page to apply CSS properties and precedence.

Next week, we'll see how the DOM is used with JavaScript to attach behavior to different page elements (and to add/remove elements to the page dynamically!)

Visualizing the DOM tree

<html>
  <head>
    <title> ... </title>
  </head>
  <body>
    <h1> ... </h1>
    <div>
      <p> ... </p>
    </div>
  </body>
</html>

HTML

DOM

Back to Layout

The DOM is important to have as a model when thinking about layout. Many techniques rely on the idea of "parents" and "children" elements, and how they are laid out relative to another.

Visualizing the document tree can save you a lot of headache as you're writing CSS to achieve desired layout.

Layout Techniques in CSS (from Lab/reading)

  • Appropriate use of Block vs. Inline elements and nesting in HTML
  • Box Model (margin/padding/border)
  • Flex
  • Positioning
  • Float (less common today, but still good to know)

These are what we expect you to focus on, roughly in order of prioritization

Today: Practice different layout strategies and understand tradeoffs

Our toy page (starter HTML here): 

<div id="boxes-container">
  <div>0</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Question: What does this look like on a webpage by default?

Uh... Why are we playing with boxes?

When learning CSS layout, you'll find there are many ways to layout your pages.

"Boxes" are great to practice with for comparing different layout strategies and better understanding the box model.

We are working with text inside of each div to additionally demonstrate the difference between block vs. inline layout.

In practice, it's useful to:

  1. Treat page elements as boxes/rectangle areas to figure out the page layout, and then
  2. focus on more specific CSS styling

Exercise 1: Box Model

Box Model
  • Give each of the 6 boxes and the outermost container a 2pt solid black border.
  • Each box should be 80px wide/tall.
  • The outermost container of boxes should have a gray background and have a width 50% of the page.
  • Even-valued boxes should have a darkgreen background - odd ones should have a gray background.
  • Font size of numbers should be 20pt.

Solution (click source code for HTML/CSS):

Exercise 2: Border Radius, Margin/Padding

Box Model

Make the outermost container have a 5px border radius on all sides with 10px of spacing separating its top/bottom borders from the borders of the inner boxes.

Solution

Exercise 3: Text Alignment

Box Model

Make text horizontally centered in each box.

Solution

Exercise 4: Float Layout

Box Model

Make boxes into a row instead of a column

One possible solution: "Float" the boxes left or right.

What happened when we just add float: left?

Hint: Use overflow: auto to ensure container adjusts height if contents "overflow" outside of the borders.

Solution

Back to Boxes...

Exercise 5: Center the box container on the page and change width to 75%.

Box Model

Can we float? Unfortunately, can't center float element cleanly.

Idea: Use block property that the container spans width of the page. But if the container is 75% of the page width... where does that extra spacing come from?

For block elements that have a specified width, you can center them by setting left and right margins to auto.

Solution

Distributing Boxes Evenly in a Container

Box Model

Exercise 6: Distribute boxes across box container evenly (equal space between each box).

... what should the margins be set to now?

Flexbox Review

Flexbox layout is a way to make responsive, "flexible" websites much more easily. Strategy for using flex as a beginner:

  1. Finish the rest of the Flexbox froggy exercises on your own (we didn't expect you to finish them all yesterday).
  2. Use the browser inspector tools to try different flex layouts. Start with display: flex on the parent item, then:
    • add flex-direction if you want to override the default row layout to column, row-reverse, or column-reverse
      • then experiment with justify-content and align-items to distribute the child elements
    • use flex-wrap to wrap children cleanly in a constrained-width parent container
    • use flex-basison the items to specify how much space of the container each thing should take up
    • Look at other flex tricks here for more useful methods

Back to our Boxes

Exercise 6: Distribute boxes across box container evenly (equal space between each box).

Solution

Exercise 7: Responsive Page Layout - Wrapping

Set boxes to wrap when box container gets too small in the browser so that they keep their square widths (what happens when you shrink the browser width in the previous exercise?).

Box Model

Solution

Exercise 8: A bunch more fancy flex stuff

Layout boxes into two 3-box columns using flex (use screenshot with given details). Note: don't rely too much on previous CSS solutions - you'll need to change the HTML slightly as well to get the columns grouped)

Box Model
  • In the HTML, make boxes grouped in two 3-box columns (hint: add a class to both groupings called "column").
  • Change height of #boxes-container to 500px and center the columns vertically
  • Distribute the two columns on both left/ends of the #box-container.

Solution

From Boxes to "Real" Example

How can we use these different layout methods in pages with components like header, main, footer? What about side-by-side sections? Inline navigations with lists?

You can use all of these strategies to accomplish page layout methods. For responsive design, it is best to prioritize default block/inline or flex layout. But there are some cases where we want to be specific with the position of our elements, such as when we have a fixed nav bar or footer.

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