CODE CREATIVE
CASCADING STYLESHEET
Separating content and presentation
TASK #1
TASK:
Create a CSS file in Aptana and link it to your webpage.

HINT:
Create a CSS file by clicking on
File -> New From Template -> CSS -> Blank File
. Be sure to name your CSS file
styles.css
and save the file in your project.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #2
TASK:
Replace the inline tags with CSS classes & properties.

HINT:
Add several classes and id’s that will add a
background picture
and set the
font size
.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #3
TASK:
Remove the bullet points, the underline, and the default color from the navigation links.

HINT:
Create a class called
nav
that you will use to stylize your navigation links. Be sure to include the
a
and
li
subtags in your definitions. You will need to set the
color, borders, background color, set display to inline
, and
text decoration
to none.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #4
TASK:
Add a border to each link with appropriate spacing.

HINT:
To set the transparency of the navigation buttons, you will need to define the background color property to
rgba
using a transparency of
0.5
.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #5
TASK:
Add a rollover background color to each link

HINT:
You will need to add a
hover
sub-tag to the nav class and set the
background property
to an appropriate color.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #6
TASK:
Utilize your CSS in the other web pages in your website.

HINT:
You will need to add the
link
tag to your other web pages.

CHECK UP:
Watch the video below to check that you completed the task.