LAB ASSIGNMENTS

Course: BCA Subject: CSS Framework

Semester: V Subject Code: CSIT135
School: AIIT Date: 31-Aug-18 to 23-Oct-18

HTML Exercise: About Me Page

Create a page aboutme.html that describes you. Include information such
as:
1) Your name
2) A description of you in <= 2 sentences. Emphasize important word(s) in bold.
3) A list of classes you are taking right now at Amity.
4) Your 3 favorite movies, books, or TV shows, in order. Make at least one link
to an interesting site about that TV show/movie/book, such as
its IMDB page.
5) Two images that represent you when you're happy and sad. (consider Google
Image Search)
Exercise: CSS Styles
Create a stylesheet named styleme.css to improve the appearance of your
About Me page.
6) Change the color of at least two elements
7) Change the font properties (family, size, weight, or style) of at least two
elements. Some standard fonts: Arial, Arial Black, Verdana, Trebuchet
MS, Georgia, Tahoma, Courier New, Times New Roman
8) Change at least one other thing (e.g. background color, text alignment, etc.)
Exercise: Validate Your Page
9) Open http://validator.w3.org/ (HTML) or
http://jigsaw.w3.org/css-validator/ (CSS)
Either click “Validate by File Upload” and then Browse to your
aboutme.html file, or click “Validate by Direct Input” and then copy/paste
your code into the text box.
10) If there are any errors, fix the first one, then repeat the previous steps.
11) Try to get the green bar for 0 errors. "Warnings" are okay.
Exercise: CSS Border, Padding, Outline, Margin
12) Surround your name with a 3 pixel thick border
13) Give different color to different sides of the border. Check how to provide
same color for left side and right side border using three color values.
14) Check the effect after padding four sides of your name with pads of different
thickness.
15) Change the background color for your name. Check the effect on padding.
16) Provide 3 point wide outline surrounding the border. Provide different colors
for different sides of the outline.
17) Change the outline-offset property to make a space between border and
outline. Change the background color of your HTML BODY and see the effect
on the outline offset area.
18) Provide margin having different length surrounding your name.
19) Consider the following style sheet
<style>
div {
border: 1px solid red;
margin-left: 100px;
}

p{
margin-left: inherit;
}
</style>

Define a paragraph (<p>) inside the <div> and comment on the effect of
inherit margin.
20) Consider the following style sheet
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
</style>
 Consider the following nested <div>
<div>
This is divTop
<div>
This is div2
</div>
<div>
This is div3
</div>
Provide the following style to divTop, div2 and div3
i. divTop left margin is 100 pixel
ii. div2 left margin is 300 pixel
iii. div3 should inherit the left margin of divTop
Exercise: CSS Table
21) Consider the following HTML code for table:
<TABLE>
<TR id="row1">
<TH>Header 1 <TD>Cell 1 <TD>Cell 2
<TR id="row2">
<TH>Header 2 <TD>Cell 3 <TD>Cell 4
<TR id="row3">
<TH>Header 3 <TD>Cell 5 <TD>Cell 6
</TABLE>
Write CSS style so that the top row will be surrounded by a 3px solid blue
border, the second row will be surrounded by a 1px solid black border and
the last row will be surrounded by a 1px dashed black border.

The borders around the rows overlap where the rows meet. What color
(black or blue) and thickness (1px or 3px) will the border between row1 and
row2 be? Discuss how CSS resolves this conflict.
22) Consider the following HTML code:
<table>
<tr><td>1 </td><td rowspan="2">2 </td><td>3 </td><td>4 </td></tr>
<tr><td colspan="2">5 </td></tr>
</table>

Discuss what this code does. Write CSS for the same task.
23) Write CSS style to color each row of a table in different color.
Exercise: Combinators, Pseudo-classes, Pseudo-elements
24) Use CSS combinator to design a style sheet which provides a red background
to every item in an unordered list.
25) Write a CSS style so that every paragraph immediately after a <h1> heading
is on yellow background and the text color is red.
26) Write a CSS style so that every ordered list after a <div> is on yellow
background and the text color is red.
27) Write a CSS style so that every ordered list after a <div> is on yellow
background and the text color is red. These styles are applicable only when
you hover over the lists.
28) Write a CSS style to change the text color of the first element in an
unordered list. The text color should be blue.
29) Write a CSS style to apply blue background for all even rows and yellow
background for all odd rows of a table.
30) Write a CSS style such that the first letter of the first three items in an
unordered list will be in red color. Do not use three separate codes for three
items.
31) Write a single CSS style to perform the following:
a) Only the first paragraph of every <div> is surrounded by < and >. This
style is applicable to any other html elements.
b) Only the first paragraph of every <div> has background color
rgb(0,200,100), font size 20 px and max-width as half the width of the
parent.
Exercise: Id Selector, Class Selectors and CSS Variables
32) Write a CSS style so that every element in an ordered list is on yellow
background and the text color is red. These styles are applicable only when
you hover over the lists. Perform this exercise using CSS variable for define
background and text color.
33) Do necessary changes in Exercise 32 and create a four element ordered list
where the four elements have background color as: yellow, purple, green
and coral respectively. Perform this exercise using CSS variable for
background color.
34) Consider the following style sheet
:root{
--test1: 30px;
--test2: 10pt;
 }
.one {
font-size: var(--test1);
}
.three {
font-size: var(--test2);
}
Consider the HTML associated with this CSS
<div class="one">
This is 1
<div class="two">
This is 2
<div class="three">This is 3 </div>
<div class="four">This is 4 </div>
</div>
</div>

Explain the styles applied to the <div> tags.

35) Write a CSS style to perform the following task:
a) Declare a variable --foo to define a border around a <div>. This border
should be 2px thick solid. Call foo using var(--foo) from a <div>
element in HTML.
b) Make changes to var(--foo) in order to define a border which is 1px
thick, solid and its four sides have colors red, green,, blue and black
respectively. This border is only defined if the variable foo is
undefined.
36) Write CSS style so that the background colors each odd rows of a table is red
and each even row of a table is blue. Perform this exercise using CSS
variables.