Scribd
Upload
81 views3 pages

Lab 2

This document provides instructions for selecting elements and applying CSS styles to modify the appearance of an HTML page. The instructions include: 1. Selecting specific elements like paragraphs, divs, and inputs and applying styles like font, color, sizing, and positioning. 2. Creating external, internal, and inline CSS styles and applying classes and pseudo-classes. 3. Applying styles conditionally based on element hierarchy, IDs, and hover states. 4. Exploring how specificity and !important rules determine which styles take precedence.

Uploaded by

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

Lab 2

This document provides instructions for selecting elements and applying CSS styles to modify the appearance of an HTML page. The instructions include: 1. Selecting specific elements like paragraphs, divs, and inputs and applying styles like font, color, sizing, and positioning. 2. Creating external, internal, and inline CSS styles and applying classes and pseudo-classes. 3. Applying styles conditionally based on element hierarchy, IDs, and hover states. 4. Exploring how specificity and !important rules determine which styles take precedence.

Uploaded by

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

Selectors task

1- select p elements and make them red


2- select p and div elements
3- select p with class mainClass direct child for div with id
myDiv and make it styled
4- select all p inside div and style them
5- select input with type text element with class myClass
6- select span elements after div
7- select p with class myClass
8- select div with id myDiv

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 which is child from div tag to be in the center of the page.
2- Make inline style for the div with "header" id, that make its
width=100%, its height=60px, and its background color red.
3- Make inline style for the span which its id is "linksbar" , that make its
width=25%, its background color gray, and make it starts from the left of
the page (float property).
4- Make inline style for the span which its id is "content", 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?
h. Use ::after pseudo element, to add this text “Read this” with color
yellow” after the paragraph that is nested from span.
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

You might also like