Scribd
Upload
6 views

CSS Box Model

CSS_Box_Model

Uploaded by

Zai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

CSS Box Model

CSS_Box_Model

Uploaded by

Zai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

LAB 4

CSS
Box Model
Table of Contents
Goal of the day ............................................................................................................................ 3

PART I: Lecture’s activity + Kahoot! ............................................................................................... 4

PART II: Having fun learning selectors ........................................................................................... 4

PART III: Marvel heroes (now with CSS!) ....................................................................................... 5


Exercise 1 – Marvel Heroes .................................................................................................................. 5
Exercise 1.1 ...................................................................................................................................... 5
Exercise 1.2 ...................................................................................................................................... 6
Exercise 1.3 ...................................................................................................................................... 7
Exercise 1.4 ...................................................................................................................................... 7
Exercise 1.5 ...................................................................................................................................... 8
Exercise 2 – DRY! ................................................................................................................................ 12
Exercise 2.1 .................................................................................................................................... 12
Exercise 2.2 .................................................................................................................................... 13
Exercise 2.3 .................................................................................................................................... 13
Exercise 2.4 (bonus)....................................................................................................................... 14

PART IV: Upload Lab4 to your Folk Site ....................................................................................... 14


Goal of the day
This week we will continue working with the heroes’ pages that we started during the last lab
session.

The main goal is to control the design of the web pages to make them more attractive1. After
completing the lab, you will be able to:

• Create/use external CSS files


• Work with the box model (margins and paddings)
• Use different CSS selectors
• “Paint” boxes using CSS
• Align elements horizontally
• Resize/dimension the boxes
• Familiarise yourself with the DRY principle

This lab is divided in three parts:

• Part I: Finish the activity started in Lecture 4 (we will focus on option b) + Kahoot!
• Part II: Have fun with CSS Diner while you get hands-on experience working with
selectors.
• Part III: Follow the instructions to change the heroes’ pages.
• Part IV: Upload all your exercises from Lab4 to your Folk Site.

You can find some useful readings/resources below:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
• https://www.w3schools.com/html/html_classes.asp
• https://www.w3schools.com/css/css_boxmodel.asp
• https://www.w3schools.com/cssref/pr_text_text-align.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
• https://www.w3schools.com/cssref/pr_class_display.asp

1 Attractive: Ok, I know, the term "attractive" may be quite subjective, so let's just accept this
statement as true; even if the final result does not look very nice from your point of view... Beauty
canon over time :-S
PART I: Lecture’s activity + Kahoot!
Use the solution from the first part of the activity (https://s.ntnu.no/l4a1s). Download the
screenshots from https://s.ntnu.no/intro-css-2-options.

Student activity
Use code from previous activity:

What do you observe?

• Implement the page


• Upload to your folk site
• Share link with me to
discuss it with the
class
https://s.nt nu.no/intro-css-2-options

• Observe screenshot for option b and make a list of changes you observe
• Modify the files to implement the page you see in the screenshot
• Upload to your folk site
• (optional) share the link in teams (we look at a couple of the solutions and discuss
them)

PART II: Having fun learning selectors


CSS Diner is a game develop by Luke Pacholski, a graphic + web designer based in Chicago.
The game is perfect to help you learn CSS selectors. Notice that some of the “type” selectors
you use in the game are created only for such game.

• Play the game (levels 1-14): https://flukeout.github.io/


PART III: Marvel heroes (now with CSS!)
Exercise 1 – Marvel Heroes
In this exercise, you will be working with CSS. You can add things to the HTML-files, but the
structure needs to remain the same. There are additional comments in the code to help you
go through the exercises.

Exercise 1.1
Create a new CSS-file (“style.css”) and store it in the root folder. Then, link it to the file
“heroes/ant-man/index.html”.

Create the proper CSS rules to achieve the following goals:

• Browsers usually add a margin to the body by default. Remove it.


• Add a 5% margin to the <main> container
Add a margin of 20px (bottom and top) and 0px (right and left) for all the children of
<main>. Apply the same CSS rule to all the children of an article element.
(Hint: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors).
Exercise 1.2
Give the first <div> inside <article> a class called “card”

• Give the card a white background


• Add a border to the card
• Set the “box-sizing” to “border-box”
• Add a padding of 10px to the card
• Give the card a width of 100%
• Display the elements inside the card centred
• Add a box shadow to the card with the following properties:
o 7px 7px 10px 3px darkgrey

The card is divided in two columns. Give the first <div> a class called “left”, and the second a
class called “right”

• Give the figure a width of 100%


• Both divs (left and right) should be 45% wide, and their contents will be centred
vertically (we will talk more about aligning elements in further lectures and labs)
(Hint: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp)

This should look like this:


Exercise 1.3
Find the <div> underneath the first card (look for comments in the code). This <div> should
contain the same styling as the first card, but with these changes:

• Justify the text


• Add a padding of 5%

This should look like this:

Can you reuse CSS rules and override them to achieve the expected result? How?

Exercise 1.4
Find the <aside> for Ant Man’s best friend. Give this <aside> the same as in exercise 1.3. The
result should look like this:
Exercise 1.5
Give all the other hero pages the same styling as in the exercises above.

Groot:
Hulk:
Iron Man:
Rocket Racoon:

If you have completed 100% of the task, CONGRATULATIONS! It is not easy if you have never
done it before!
Exercise 2 – DRY!
We want to change the background colour of the navigation menu to black.

Exercise 2.1
We need to change the background colour of the header as well as the colour of the text.

Open all the index.html files, find the <style> tag in the <head> and locate the CSS rule with
the selector #header.

• Change the CSS property “background-color” to black


• Change the CSS property “color” to white
Exercise 2.2
Have you noticed how tedious it is to changes something when using internal styles?
Duplicating the same CSS code across all our web pages is not efficient.

DRY (don’t repeat yourself) is one of the most famous principles of software development
and we will use it here to improve our current code.

• Open the index.html file of one of our heroes


• Copy the CSS rules inside the <style>
• Open “styles.css” and paste the rules after the CSS rule that configs the main
• Open all the index.html files and delete all the internal styles (<style>…</style>)
• Save the documents and reload the site

Check the homepage. If you notice a problem, fix it.

Exercise 2.3
Finally, we will make the navigation menu a bit more readable.

• Find the proper CSS rule in “style.css” to config the <li> inside the <nav>
• Add a margin of 0.5em to the right of each <li>
• Save the page and check the changes

Before:

After:
Exercise 2.4 (bonus)
We are done with today’s tasks but here you have a bonus exercise showing a teaser for
pseudo-elements (more in future classes).

• Open “style.css” and paste the following CSS rule before the rule with the selector
“#header a”. Save the changes and check the results.

#header ul > li::first-letter {

font-weight: bold;

color: yellow;

PART IV: Upload Lab4 to your Folk Site


Well done! You have done a wonderful job. Now, you only need to publish your “lab4/” folder
with your implementation in your folk site (check lab0 or lab1 slides if you don’t remember
the steps).

Double check you are following the naming conventions2 for you learn in the previous.

2File Naming Convention:


https://www.acf.hhs.gov/digital-toolbox/training-technical-assistance/site-file-naming-conventions
https://sembyotic.com/file-naming-best-practices-websites/

You might also like