CSS

Advanced Online Media

HOME

SYLLABUS

TOOLS

DESIGN

MULTIMEDIA

WRITING

RESOURCES

CSS

ASSIGNMENT
CSS PRACTICE: “JABBERWOCKY”
<div> TAGS
ONLINE COLOR HELPERS
REVIEW OF CSS
TUTORIALS

REVIEW OF CSS (Cascading Style Sheets)
Professionals use CSS to design Web pages. It’s much easier to make changes throughout your site than it is to go through and make changes page by page. NOTE: CSS syntax is completely different from HTML syntax.

<body>
#wrap
width: 800px;	Sets width of big container
height: auto;	Lets height adjust to content
padding: 0px;	Creates padding around body of page
margin-top: 50px;	Sets top margin down 50 pixels
border: 2px double #FFFFFF;	Defines a 2-px double-line border
}
#wrap #header {
width: 800px;
height: 130px;
padding: 0px;
margin: 0px;
float: left;	Makes everything line up properly
background-color: #D2B48C;	Makes background color of the header tan
}
#wrap #main {
width: 800px;
height: auto;
padding: 0px;
margin: 0px;
background-color: #000000;	Makes box color of this box white
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 125%; (% NOT pixels!)	Adjusts leading (space between lines)
}
a:link {
color: #865CFF;
text-decoration: none;
}
</body>

<div> TAGS
You’ll enclose parts of your page with <div> tags. Put navigation buttons in a <div>. Put your main text in a big block inside another <div>. Use a <div> to enclose a photo and a caption together.

Then use CSS to style the divs. That is, write the rules for how each div should look.

Jump to top

CSS PRACTICE: “JABBERWOCKY”

Go to JMC 494. Drag the Jabberwocky folder onto your desktop. Do NOT open it up in the JMC 494 folder.
Open Jabberwocky.html in Dreamweaver. If you cannot see the CSS styles, go to Window > CSS. Go back and forth to see how CSS is used in the Jabberwocky.html.
Use OPTION + F12 to open Jabberwocky.html in the browser. Open the file in Safari or Firefix, NOT IE!. Use the link at the top of the Jabberwocky page to view the ‘In French’ file.
In the English version, why do the first two verses look different from the next five verses?
Edit Jabberwocky.html so the next five verses look the same as the first two verses. (Hint: <p class="verse">)
Save the file and check the result by refreshing the file in the browser.
Check both the English and French versions.
Experiment with the CSS, either in Dreamweaver or in the CSS file. For example, change the line “body {background-color: #FFFFCC}” to read: “body {background-color: #71414A}”
Save the changed file and look at the result in Jabberwocky.html in the browser.
Check the “In French” file. Are the changes there too?
Experiment with changing other color attributes in the CSS file, such as the Anchor tags for the a:link (link) and v:link (visited link).

IMPORTANT! Save the CSS file before refreshing the browser file.

Jump to top

Cecil R. Schwalbe The smallest warm-weather penguin, the Galapagos penguin stands only 16 to 18 inches tall and weighs 5 pounds.

ASSIGNMENT (thanks to Mindy McAdams)

PURPOSE
Show your mastery of styling and controlling text with CSS by restyling text according to the instructions below.

All fonts and colors in HTML documents today are specified using CSS. The old use of <font> tags is considered amateurish and outdated. You’re encouraged to use text attributes other than font-family, font-size and font-weight, but please remember that legibility is your first priority. Do NOT load on the styles in any way that makes the page look weird or ugly.

INSTRUCTIONS

Download the two files below by right-clicking (or CONTROL + click on a Mac):
• HTML file
• CSS file
There’s one heading in the document <h1>. Use CSS to specify the font, size and weight of the <h1> heading.

IMPORTANT! Make changes ONLY in the CSS, just as we did with “Jabberwocky.” Since there is an external style sheet (exercise.css), do NOT add new styles inside the head tag in the split-screen view. Make changes that affect ONLY the text itself but not the layout or positioning of anything. If you have more than one style with the same name, such as .subhead, you’ll have problems.
Black text appears on a white background in several places. Use CSS to specify the font, size and any line spacing you’d like for the BLACK text on a WHITE background. All text on the white background must be the same font (the heading, however, may be a different font). Remember what we learned about the typeface that’s easiest to read on the computer screen AND the size of the type that works best online.
Make the intro text (white background) larger than the rest.
Make the footer text (white background) smaller than the rest.
There is black text on a beige background in the document. Use the type classification for this text that is the opposite of the one you specified for the text on the white background. If one is serif, then the other should be sans-serif. Use CSS to specify the font, size AND line spacing for the BLACK text on a BEIGE background. All text on the beige background must be the same font and size. (Note that all the text on a beige background is inside the <td> tags of a table.)
Change the color scheme of the background (body) and the beige tables (Hint: One is called example table, and the other is called example 2 td) to a more harmonious color scheme.

HINT: Use one of the online color helpers below.
The link at the bottom of the page is now blue with an underline. Change the link to a harmonious color that is NOT underlined.

HINT: Click on the + to make a new CSS rule. Click on Advanced, then scroll to a:link. Pick a harmonious color. Under the Decoration category, click none.
Add a CSS style for an a:visited link in a contrasting color that is NOT underlined either. Follow the steps in the HINT above.
After you finish, put both files in your STUDENT folder by the deadline. You do NOT need to print out anything. Do NOT rename either file.

GRADING 20 points

5 points: overall appearance
15 points: technical proficiency

Jump to top

Will Kirkland Galapagos penguins usually lay two eggs but raise only one chick.

ONLINE COLOR HELPERS

The Color Wizard
Click the Launch the Color Wizard button. Type in a hex code, then click SET, or use the sliders to change colors.
Spin the Color Wheel
Click the Spin the Color Wheel button. When you find a color you like, click HOLD. Keep doing that until you find a harmonious palette.
Color Palette Creator
This fabulous tool allows you to input one base color (then click OK) and see a range of tints (blended with white) and shades (blended with black).
Color Toy
This site is fun. You can enter a hex code or try the Random button at the far right.
Color Scheme Generator
Lots of buttons to push and play with. Pick any color and see monochrome, contrast, triad, tetrad and analogic color palettes. VERY useful for Web designers.
Colorcube
See how your text color and link colors will look against your background color.
Adobe Kuler
You can quickly create harmonious color themes on this site or download color schemes created by others.
EasyRGB: Color Harmonies
This complex color-picking aid can help you find complementary colors. In the menu labeled RGB Range (bottom left inside the box), you can change the value to 0-FF and enter the Web hexadecimal values in the three boxes. Then click Start to get a set of colors.

Jump to top

TUTORIALS
Styling text with CSS tutorial
http://www.tutorialized.com/tutorial/CSS-Text-Styles/20586

Designing with CSS
http://www.tutorialized.com/tutorial/Designing-with-CSS-%96-Part-1/14291

Creating CSS styles
http://www.tutorialized.com/tutorial/Creating-CSS-Styles-in-DreamweaverMX/14060

Other tutorials
http://www.tutorialized.com/tutorials/Dreamweaver/CSS/1

Style text with CSS
http://www.tutorialized.com/tutorial/CSS-Text-Styles/20586

Jump to top