1. More CSS practice with our external style sheets

2. Prepare for science fair visit on Thursday

CSS Continued

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 do some examples together. Please go into the CSS folder on your desktop and open csspractice2.html in Firefox and Notepad. You will also need to open stylesheet2.css in Notepad.

Science Fair

On Thursday during class we will visit the Science Fair to get pictures and video for the school website. It will be similar to what we did for the Culinary Arts holiday bake sale and you will use some of your Adobe programs on Friday to edit the footage, including using Photoshop for image editing and Premiere Elements for video editing. You will also potentially use Photoshop or Fireworks to place text over some pictures- for example, adding a student’s name and project description over their picture or “first place” over the top winner. You will work on this Thursday and Friday and possibly next week depending on how far you get.

These are really quick examples using last year’s photos:

Photo slideshow (in Picasa, remember, can use Adobe Bridge)
http://www.medfordpublicschools.org/departments-programs/science/#fair

Pictures with graphics and text add- can use Photoshop or remember wigflip.com?