Web Application Design (Conception d’App. Web) M1.
STIC – 1st Semester – 2025-2026
Lab1.part2 - HTML & CSS reminders
Exercise 3: CSS Selectors and Styling
In this exercise, you will create a CSS file with the appropriate selectors for each question.
For a list of the most commonly used CSS selectors, see:
[Link]
Download the [Link] file from Classroom/Drive.
Open this file and inspect it using the "developer tools" tab in Chrome (F12). Do not
modify this HTML file as it will be used as the basis for this exercise. Create a file
called [Link] and place the following style rules in it:
1. Universal and Type Selectors
1. Apply a default font-family (sans-serif) and line-height (1.6) to all elements
on the page using the universal selector.
2. Set a background color gray #f4f4f4 for the entire <body> of the page using the type
selector.
3. Center all <h1> and <h2> headings using their type selectors. Give them a distinct
color dark blue #336699).
4. Apply margin-bottom: 1em; to all paragraphs (<p>) to improve readability.
2. Class and ID Selectors
1. Target the paragraph with the ID special and give it a background-color yellow
#fffacd and padding: 10px;.
2. Apply a distinct color (green #28a745) and font-weight: bold; to all elements
that have the class hello.
3. Descendant and Child Selectors
1. Target only the <h2> elements that are direct children of an <div class="main
content"> and [Link]-tools using the child selector (>) and make their text
transform: uppercase;.
2. Style all <li> elements that are descendants of a <div class="ai-tools"> to have
a list-style-type: square; using the descendant selector (space). 3. Give
padding-left: 20px; to all ul elements inside the [Link]-tools section.
© Adil Chekati
Page 1 of 3
Web Application Design (Conception d’App. Web) [Link] – 1st Semester – 2025-2026
4. Attribute Selectors
1. Select all <input> elements with the type="text" and give them a border: 1px
solid #ccc; and padding: 8px;.
2. Apply a distinct background-color (e.g., #007bff) and color: white; to the
input element with type="submit".
5. Pseudo-classes and Pseudo-elements
1. Change the color of all <a> (link) elements to a primary blue (e.g., #007bff). 2. Apply
a text-decoration: none; to all <a> tags on hover (:hover) and change their
color to a slightly darker blue.
3. For the link that represents a "visited link example", change its color to a subtle gray
(#6c757d) using the :visited pseudo-class.
4. What is the purpose of the :focus pseudo-class?
5. Apply a border: 2px solid blue; to all <input> elements when they are in the
:focus state. Explain its use in your [Link].
6. Combining Selectors & Specificity Challenge
1. Using a combination of selectors (e.g., class and type), target only the <li> elements
that are descendants of [Link]-tools AND have the class hello, and give them a
font style: italic;.
2. Write a CSS rule that targets the <h1> element inside the <footer> and gives it font
size: 1.2em;. Then, write another rule that targets all <h1> elements and gives them
font-size: 2em;.
Observe the result. Which rule takes precedence and why? Explain your observations
and the concept of specificity in your [Link].
Exercise 4:
In this exercise we will create a [Link] file, a new style sheet [Link]
file, following the instructions:
1 Create a level-one heading <h1> containing the text of your choice in the page content,
followed by a level-two heading <h2> and a paragraph <p> of a short text (some
sentences).
2 Create a second level-two <h2> heading, followed by a paragraph <p> of a long text
(some lines).
Now, we define the style rules for the HTML page in the [Link]
file. 3 Apply the following rules to the whole page:
- an inner margin of 50p
- a background color of #e8eae8;
- and a font color of #5d665b;
4 Assign the <body> :
- a 70px top and bottom margin
- a 120px left margin and a
- a 50px right margin.
5 Set text fonts to Verdana, Geneva, Arial, sans-serif.
6 Set the font size to small, the line-height (i.e. the height of the characters and the extra
space above them, to the height of the characters and the extra space above them) to
180% of the font size.
© Adil Chekati
Page 2 of 3
Web Application Design (Conception d’App. Web) [Link] – 1st Semester – 2025-2026
7 Assign the first <h2> a font size of 75% and the first <p> a font size of 70%, relative to
the font size previously specified. Then, give the second <p> an indentation of 3em. 8
Assign the title text <h1> the color #ffffdd. Then assign <h2> font-color #966b72; and
the font-family Georgia.
▪ Deadline:
At the end of each Lab session (no later than Tuesday, October 14 at
23:59) To: Classroom
▪ File's Name to be submitted:
CAW_Lab1.part2_Gr%_NAMEPair1_NAMEPair2.zip
Example: "CAW_Lab1.part2_Gr1_CHEKATI_DJEBLI.zip"
“CAW” Course materials:
© Adil Chekati
Page 3 of 3