CSS Continued

We’re going to review CSS and continue working with external style sheets and divs.

Refresher:

Divs and containers

Containers are specific areas of a webpage that can contain text, images, etc. They are referred to as divs on your style sheet. They can be positioned with specific properties and can overlap.

Class vs id

Generally an id refers to one element while a class can be used to refer to more than one element. For example, an id can refer to a specific section of your webpage for layout purposes (example: div id=”leftmenu”) while a class can be used to define a set of style properties to modify an element, like our example with the “funky” class applied to the paragraph (p class=”funky”). Id’s are used to refer to specific containers (divs) you’ve created.

Positioning divs on a webpage

Divs can overlap and are positioned either from the top left corner of the webpage (absolute) or in relation to their usual positions on the page (relative). It is possible to put one div inside another and position them differently. Top, right, left, and bottom values are used to tell the browser where the div should be positioned on the page. The values can either be in pixels or as a percentage, which are relative to the parent element’s dimensions (example, a webpage that’s 900 pixels wide or a table that’s 500 pixels wide).

Practice

We are going to practice some examples together. Please open up the specified files and follow along. Two files, stylesheet3.css and csspractice3.html, are in your CSS folder and will both need to be open in Notepad. You will have to open Notepad first and then open the files by going to File, Open.

Finally, please open csspractice3.html in Firefox so you can view the changes you make to the page.