Scribd
Upload
34 views3 pages

Day 3 - Lab Assignment

The document outlines a series of CSS lab assignments focusing on external, inline, and internal styles for an HTML page. Tasks include styling various HTML elements, creating classes for lists, and applying specific styles to elements based on their IDs. Additionally, it includes a bonus section on calculating specificity and creating a dropdown menu using CSS.

Uploaded by

aahhmmeeddb11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
34 views3 pages

Day 3 - Lab Assignment

The document outlines a series of CSS lab assignments focusing on external, inline, and internal styles for an HTML page. Tasks include styling various HTML elements, creating classes for lists, and applying specific styles to elements based on their IDs. Additionally, it includes a bonus section on calculating specificity and creating a dropdown menu using CSS.

Uploaded by

aahhmmeeddb11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Day 3 Lab Assignments

Do the following CSS style for the given HTML page (run the page and see the result
after each point):

1- Make External CSS file for that:


a. Make the font type "Lucida Calligraphy" for any p or div or span tag (use
one CSS rule).
b. <h1> tag child from div tag is in the center of the page.
2- Make inline style for the div with "header" id, that make its width=100%, its
height=30%, and its background color red.
3- Make inline style for the span with "linksbar" id, that make its width=25%, its
height=70%, its background color gray, and make it starts from the left of the
page (float property).
4- Make inline style for the span with "content" id, that make its width=75%, its
height=70%, its back color pink, and make it comes to the left side after the
previous span (float property).
5- Make internal style that:
a. Make a class name "none-bullet-list" that can be applied on <ul> tags,
and makes list style type of the <ul> without bullets (none), and apply
this class on the <ul> tag that contains the links (apply it to the ul tag in
html directly, the selector will be class name only).
b. Make color red, and background color pink for the links that're direct
child for <li> tag, which inside span with id= "linksbar", and make it
appear without underline (text-decoration property).
c. Make color pink, and background color red for the links that're direct
child for <li> tag, which inside span with id= "linksbar", when mouse is
over it.
d. Make the font weight bold, and font size 12px, for the paragraph that
comes directly after (sibling) <h2> tag which is direct child for <span>
with id="content".
e. Make a dashed border, with size 2, and color rgb(20,70,60), for the div
with id " loginform".
f. Make style that makes the background color yellow of the any <input> of
type "text", and another style that makes its background color white when
it's focused.
g. Make a class named "tabled-bordered" that can be applied on any tag,
and make it displayed as table cells (use display property), its padding 5,
and make a border for it. Apply the class to the 3 <p> tags that are in the
"titles" div (apply them on the p tags that are in "titles" div in html file,
the selector will be class name only).
i. Try to change the <p> tags inside the div with id "titles" to spans,
is there any difference?
6- Make an internal style that makes font color red for the <p> with id "aboutus",
and another internal style that makes the color yellow for the <p> with id
"aboutus" that's direct child from span with id "content". Which style will be
applied to the paragraph? And why?
7- Use !important with the first style of the previous 2 styles. What's the change
that happened and why?

The page should be like that after you apply the previous styles:

Bonus:
1- Calculate the specifity, for the 2 styles in assignment No. 6, in the part 1
assignments.
2- Use CSS to create HTML page that has dropdown menu like:
<Script>document.write(“Thank YOU”)
</Script>

You might also like