Web Fundamentals

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

Agenda

• Warm up
• Introduction to CSS
• Build and style a website together
• Begin styling your portfolio
• Go over homework

Warm up

Build this webpage.

Last class we discussed structuring the content of webpages with HTML.

This week, we'll go over styling our pages.

CSS

Cascading Style Sheets

CSS

Describes rules for how HTML elements should be displayed on a screen.

HTML elements sit within invisible boxes

Red outlines are block elements, blue are inline elements.

Block elements look like they display on a new line.
<h1>, <p>, <div>

Inline elements flow within the text and don't start a new line.
<a>, <i>, <b>

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

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

Ok ok, so how do we do it?

CSS rules contain two parts - a selector and a declaration

Selectors describe the element that the style rule should apply to.

Declarations refer to how the selector element should be styled.

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

There are three ways to write CSS rules into a page.

• In-line style
• Head style tags
• Stylesheets

In-line style are written by adding a style attribute to each element

Style tags in the head describe style across the whole page

Stylesheets are their own files and can be included in any html file.

In the class, you should keep all CSS in stylesheets. Why do you think developers prefer this?

• Separation of concerns
• Style applied across same elements
• Can use same stylesheet for multiple pages
• Faster - user can download styles once

Let's talk about a few ways you can select an element for styling

• Type
• Class
• ID

We already went over type selectors. We did this when we specified the type of tags that we want to style

Class selectors match elements with a class attribute that have the same value

ID selectors match elements with an ID attribute that have the same value

Stylesheets display based on specificity - IDs are more specific than classes

Classes are categories, ids are exact

Why are they called cascading stylesheets?

If two selectors are identical, rule displayed last has the most importance.

The Box Model

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

Let's build a site together!

Now that you've seen me do it, begin adding style to your portfolio / main project. Consider styling a:

• Header
• Image
• Title
• Navbar
• Paragraph text