Creative Computing: Week 3

CSS Layout and the Web Inspector

an image showing the homepage of the New York Times with many of its CSS properties altered by the user

Assignments

Class Notes

Web Inspector

The web inspector is a very important tool that will help us figure out what's going on with our websites. You can access the web inspector by right-clicking on your page and selecting "inspect."

On the left of the web inspector you can see the elements of our page. Hovering over an element will highlight it in the body of the webpage. On the left of the inspector, you can see all of the styles that are being applied to that element. Styles can be applied from the browser it self (the default styles), or from a CSS file that we provide.

CSS Intro

By playing with some of the values on the right of the inspector, we can begin to explore CSS. In the links below, you can see documentation for all of the possible CSS properties and the specific values that they take. Some of the ones we covered in class are:

We can make our changes permanent by saving them in a CSS file and linking it to our HTML page. To do this, we can make a file called style.css (you can name it whatever you'd like, as long as it ends in .css). Then we can use the <link> HTML tag to load those styles into our page:

<link rel="stylesheet" href="style.css" />

This code goes in the <head> of our HTML.

CSS Selectors

The browser needs to know which styles get applied to which HTML elements. To do this, we use selectors.

Bringing it All Together

By combining CSS selectors, properties and values in our style.css file, we can start to apply CSS to our HTML. The rules are as follows:

selector {
    property1: value1;
    property2: value2;
}

That is, you have your selector followed by an open and close curly brace. Inside of the curly braces, you can add as many property-value pairs as you wish. A property is separated from its value with a colon : and the pair is terminated with a semicolon ;. For example:

p {
    font-family: "Comic Sans MS";
    border: 3px dotted green;
}

or

#classwork .highlight {
    background-color: yellow;
}

#homework .highlight {
    background-color: pink;
}

Layout and Positioning

The box model determines how much space your elements will take up.


The best way to learn it is to use it! Select elements in your web inspector and play with their width, height, margin, padding and border properties. Also explore how the box model changes when you toggle an element between display: inline; and display: block;.

In addition to changing an element's side, we can change its position. The position property has five values:

  1. static is the default position mode. Unless the position is set elsewhere and you want to override it, static will have no effect on your element's position.
  2. relative will allow you to move your element relative to its static position.
  3. absolute will allow you to move your element to exact coordinates, or "absolutely," within its closest parent that has a position set. When you use absolute positioning, the element is removed from the flow of the document. This means other elements will behave as if the absolutely positioned one isn't there.
  4. fixed will act the same way as absolute, except that it stays in the same position relative to the browser window when you scroll the page.
  5. inherit will give an element the same position that its parent has.

After setting a position, you can use top, left, bottom and right to move your elements around.

See the reference materials at the bottom of this page for more on CSS layout.

Terminology

Keep in Mind...

References