Web Fundamentals

Taught by Alexandra Ackerman
Code available at https://github.com/newschool-webfundamentals
Presentations available at newschool-webfundamentals.github.io

Agenda

  • Warm up
  • CSS: The box model and pseudo-classes
  • Continue working on your main project

Today we will have a short lesson so that you can spend a majority of the class focusing on lab and improving your CSS skills.

Warm up

Recreate BuzzFeed's Navbar.

CSS

Cascading Style Sheets

Let's do a recap

In the early days of the web, there was no CSS.

No separation between HTML content and presentation

Creators of the web realized this wasn't scalable. They created a separate langague to define how HTML tags should look.

  1. HTML (we've covered)
  2. CSS (we're learning)
  3. JavaScript (we'll learn later)

CSS creates rules for how different HTML elements (the boxes) are presented

Headers have a black background and white Helvetica font

You use selectors and delcaration to define css rules.

Properties describe what aspect of the element should be styled, and values describe how.

To have CSS rules show up in your HTML page, you need to "link" them together. You do this by adding a link tag to your stylesheet file in the head of your HTML document

In the class, you should keep all CSS in stylesheets. Why?

  • Separation of concerns
  • Style applied across same elements
  • Can use same stylesheet for multiple pages

There are many different styles you can control in these boxes:

  • Height and width
  • Borders - color, shape, width
  • Background color and images
  • Position
  • Typeface, color, size

Now that we have the basics down, let's talk more about the box model and how to position our content using floats.

Margin is the space between the element's border and other elements. Padding is the space between the content and the element's border.

Here's a closer look

Now that we can basically style our websites and position our elements on the page, let's talk about a simple effect you can use to spice things up: hover.

Pseudo-classes are keywords added to selectors that specify a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Here's a closer look

For today's lab, continue to focus on your portfolio project and getting your HTML and CSS organized.