1. CSS Review

HTML and CSS work hand in hand to tell a web browser (Firefox, Internet Explorer, etc.) how your webpage should look. HTML mainly controls where your content goes on the page and how it’s organized while CSS mainly controls how it looks (colors, fonts, etc.). We also learned that CSS can control that layout of a page and can be used to style tables and have practiced both of those things using internal style sheets.

Internal and External Style sheets

With CSS you can create both internal and external style sheets. An internal style sheet controls the style and layout of just one page (or maybe just a table on a page) while an external style sheet controls the style and layout of multiple pages. So far you’ve just used internal style sheets and today we will begin with creating an external style sheet.

2. Watch video about CSS

We are going to watch about ten minutes of a video about CSS produced by Adobe. Even though it’s mainly about using Dreamweaver we are just going to watch the parts that talk about CSS.

3. Working with an External Style Sheet

So far you’ve used CSS in internal style sheets to do things like style text, create a multi-column layout, style headlines, use a picture as a background image, style tables, and to change the background color of a page, etc. External style sheets can do all of the same things and the only difference is they can be used to control an entire website rather than just one page.

The code to link an external style sheet to a website is different than an internal style sheet. It’s one small line of code that goes in the head section. That code must be in the head section of each webpage it is supposed to control. With our internal style sheets we just had all of the code directly on the page in the head section rather than in a separate file.

Need to know:

ID (uniquely applied, usually used just once on a page)- preceded by # on style sheet. Used to identify one element

Class (defines several things at once, such as text that’s bold, 16 point, and Arial)- preceded by . on style sheet. Used to identify several elements

Elements (the various HTML elements, such as paragraphs, links, etc., that are defined by the style sheet)- not preceded by anything on a style sheet

While HTML has tags, CSS has selectors, which are the names given to the styles in your style sheet. For each selector, there are properties with values, like a headline that is bold, Arial, and 20 point font, for example.

In the body section of your webpage, you use div tags that correspond to the selectors in your style sheet.

For example, div id=”menu” or div class=”paragraph2″

We will be practicing with external style sheets tomorrow and you will work on your own.

4. Coming up…

Tomorrow we will continue with CSS and external style sheets. Next week we will do an activity with CSS3 and visit the science fair to get pictures and video for the school website. I also want to try out a new animation app I downloaded on my iPad and we will do an activity with that either next week or the following week.