Download CPIS 358 - The Lab Note

Lab 4: CSS & CSS3 style
Objectives
 Internal (embedded) Style Sheet
 external Style Sheet
 Inline Styles
Activity Outcomes
 The student should know how to use Internal Style Sheet with classes and rules
 The student should know how to use external Style Sheet with classes and rules
 The student should know how to use Inline Styles
CPIS 358 - The Lab Note
Lab 4
Lab 4: CSS & CSS3 style
Exercise 1: Write the code that allows obtaining this web page:
When the mouse pass over it
When the mouse pass over it
You should use:
Embedded Style Sheet for:
-
Heading element with text shadow and color for : “ KING ABDULAZIZ UNIVERSITY”
Another heading element with color & text stoke for: “CSS Styles”
A Link element for : “visit our university web site” by using one class or more to color it and to change the
text decoration of the word “KAU” To green and underline when the mouse pass over it
Make a division (div) and specify the background color, text alignment, width & height, margin and the box
shadow for it.
In the (div) start a paragraph: “has it's own background color and has relative position for one word.” with a
relative position for the work “paragraph” as shown
Use the multi column layout class for the last paragraph
CPIS 358 - The Lab Note
Lab 4
Lab 4: CSS & CSS3 style
External Style Sheet to:
-
Define the link relation to the external file.
Add the print media type to set properties for the webpage if it is being printed
Define the properties of the drop down menu for the “college Department menu” that open a list
when the mouse pass over it and highlights the list item when the mouse hover over it
Also, define the properties of the drop down menu for the colors, rounded edges border…
Inline Style to:
-
Set the attributes for the paragraph of “Cascading Style Sheets”
----------------------------------------------------
Assignment: Write the code that allows obtaining this web page:
CPIS 358 - The Lab Note
Lab 4
Lab 4: CSS & CSS3 style
Use the embedded Style to do the following:
-
Make a division (div) with gradient-color attribute and a dotted border and specify the margins,
width and height
Use the External Style to do the following:
- Insert an image in the html file and then in the css file set some of its properties like the absolute
position, width & height and make its appearance at the back
- Insert a text and in the html file and then in the css file set some of its properties like the absolute
position, size & color and make its appearance over the image
- Insert another image and a paragraph in the html file and then in the css file define a class to float
the image to the left of the paragraph
CPIS 358 - The Lab Note
Lab 4