Cascading Style Sheets (CSS)

begin lesson

check in pt 1             due 1/21        0 points            

check in pt 2               due 1/21            5 points               meet class

tools evaluation               due 1/25               10 points    message board

First locate an HTML Editor, software which I recommend include: Notepad+ (Windows), HomeSite (Windows) Dreamweaver (both), TextEdit (Mac), BBedit (Mac).

Next you need to obtain an account on the SRJC Web server "student". Many of you may already have an account on this server. To check click here. If you have an account, great, if you do not you can begin the process of getting an account by the student account request form. Detailed instructions regarding how to get and use a "student" account can be found on the class DVD in the "Begin" lesson.

Now you need to obtain FTP software, I recommend SSH Client for Windows users and Fugu for Mac users. See the DVD "Begin" lesson for instructions on how to obtain this software.

Next I need everyone to download one of these Web Browsers: Safari, Firefox, or Chrome. We will be using this browser to view the web pages which are styled using CSS. We will also use Internet Explorer, after the first 8 weeks of the class have passed. Firefox does a better job of interpreting CSS code so we will use it in the beginning of the class.

Finally I need you to download and install "Firefox Web Developers Toolbar". Review the lesson on the DVD that explain how to use this tool.

After you have located an HTML Editor, obtained a student account, obtained FTP software and downloaded Firefox and the "Firefox Web Developers Toolbar". You need to access the class message board and post a response to my posting. Week 1 tools evaluation.

CSS lesson

Register HW page form         due 2/8       40 points       student work      

Please note that you have 2 weeks to complete these assignments.

This lesson has several steps you need to follow in order for you to complete the homework.

Create a file and folder structure on your computer which follows the model described on the class DVD. This same structure will be duplicated on the web.

Create a homework page which will allow your instructor and our classmates to review your homework during the semester.

This lesson involves 2 types of files the "live" page which will have a link to an external style sheet and files that are "sample" pages which help you understand the concepts and provide a reference for you later on in your career. The sample files will have embedded styles.

Create a homework page [5pt]

Add a link to the "live" HTML page and to the CSS file that is linked to it. Within the CSS file include 1 multiple selector, and one contextual selector. Also surround all the page content with either <div> tags or semantic tags like <section>, <article>, <nave>, <footer>. [5pt]

Next create a "cascade sampler", and name the file "cascade-sampler.html". Within this file create at least 1 inline style, an embedded style, and link to an external.css file. Make sure you include at least 1 property which is used in the inline, embedded and external style so a conflict is created. Also include some properties which are unique to each style. Finally include an explanation of where the tag is getting it's characteristics (inline, embedded or external). Don't forget to mention the browser styles also. [15pt]

Finally create a "selector sampler" web page that includes an explanation of how the selector works, and a sample of the code. [15pt]

• syntax for a standard selector
• multiple selector
• contextual selector
• contextual selector - child
• explain when to use a class and when to use an id
• universal selector
• adjacent sibling
• attribute selector
• pseudo classes (all 3 types)
• pseudo-elements

CSS homework explanation page

Here is an example of how my homework page looks at the end of this lesson

Here is a sample homework page you can use to make your own page.

Font and Text              due 2/15           25 points             student work

This lesson involves 2 types of files

1. the "live" page which will have a link to an external or linked style sheet

2. create several "sample" pages which give you a chance to practice some of the concepts in samplers. The sample files will probably have inline styles.

Sample files
Create files that illustrate the difference between text sized in a relative vs absolute manner. Refer to the DVD > font > stretch and shrink fonts. Create these files: [5pts]

* relative.html
* relative-big.html
* relative-sm.html
* fixed.html
* fixed-small.html

Create an example of the various ways text can be vertically aligned. Refer to the DVD > text > vertical alignment. Create a page which uses the vertical alignment property and the sup and sub XHTML tags.[5pts]

Create a web page that uses 2 fonts which are displayed using the @font-face property, one font will come from the Google font library, the other font will be downloaded from the web and stored in your directory on the"student" web server. [5pts]

Create a text shadow sampler similar to the one demonstrated on the DVD [5pts]

Live site
Add 5-7 font or text properties to the external CSS file that controls the live page. [5pts]

Homework page
Add links to the "live site" HTML page and to the external CSS file, include a description of the font and text properties you have used

Add links to the text size files listed above, the vertical alignment page, the font face sampler and the text shadow sampler.

Font and Text homework explanation page

sample of how homework page looks at the end of this lesson

Position Properties                due 2/29    40 points             student work

This assignment is composed of 4 parts and takes 2 weeks to complete:

Live Site Colorized - Create a copy of the "live site" which has all content surrounded by <div> tags which have a unique id. Colorize each div with an inline style, create a color key for the div tags. [5 points]

Live Site with Position Properties - Add margin, padding, border (if needed) and width to the styles of the "ids" so that the items are ready to be positioned in the layout lessons. Alter the color of each div so it matches the final color you want in the design. [10 points]

Box Properties Sampler - Create a page which contains 4 paragraphs: a paragraph with a background color, the same paragraph with padding added, then add a border, finally add margin. Add width to the content and then calculate how big the box is. List the size of the box on the page. [5 points]

Position Sampler - create 4 pages, each page has 4 paragraphs of text. Assign a unique positioning value to the third paragraph. The static page will have a value of "static" as the position value. Next assigns a position value of relative, absolute and fixed to the remaining pages, name them accordingly. [10 points]

Image Gallery - create a page with 3 rows of 3 images in each row. There needs to be a caption of text below each image, and background color, border, padding and margin will be applied. [10 pts]

Position homework explanation page

Sample of homework page for position lesson

Backgrounds               due 3/7     20 points             student work

Borders Radius Sampler - Create a sample page which displays various values for the border-radius property [5 points]

Box Shadow Sampler -Create a sample page which displays various values for the box-shadow property. [5 points]

Gradient Sampler - Create a sample page which displays various values for the gradient property. [5 points]

Multiple Background Project - create a web page that has at least 3 background images within the same div tag. [5 points]

Background homework explanation page

Sample of homework page for background lesson

Midterm Exam

midterm exam              due 3/14             25 points              

Allow 3-5 days for me to record the score for your midterm. You can use the text or DVD to answer the questions.

Midterm Practical

midterm.css             due 3/14            15 points              

Make a copy of the midterm.css file referenced above. Copy and paste this code into an email message which you send to me at lhemenway@santarosa.edu. Below each style explain the code syntax including the type of selector the property and values. Here is an example of how I would explain one of the more complex styles.

#content h1,#contentalt h1{
color:#505050;
font-size:2em;
font-weight:400;
}

This is a multiple and contextual selector. It will apply to h1 tags within the id of "content" and h1 tags within the id of "content-alt". those tags with have a color of gray, the font size will be 2 em (which is 200% of the body font size of .9em) and font-weight of 400.

The purpose of this portion of the exam is to allow you to show me how much you have learned about selectors, the cascade, and font and text properties. another goal of this assignment, is to help you develop skills in reading existing .css files. If you decide to work in the Web Development industry you may often be asked to modify an existing CSS file. If you design sites for clients, you may want to start with an existing template and modify it to meet your needs.

I have taken the CSS file and removed all the declarations that refer to concepts we have not yet covered. If you would like to see what this CSS file does when it is applied to a Web page visit the site

http://www.oswd.org/files/designs/2425/andreas06/

After completing this course it is my hope that you would be able to go to http://www.oswd.org, download a template and understand most of the code found in the CSS file and the div structure within the HTML page.