Lab: CSS and Page Layouts
Overview
In this lab you will use CSS to alter the default placement of HTML elements on the page.
The following resources should be helpful:
Goals
- Practice with using CSS rules to alter the placement of html elements on the web page
- Practice writing basic CSS rules
- Practice using ids and classes
Task 0: A refresher
Log into your account on the cs.wellesley.edu server to download lab5
folder form within your cs115/download/labs
folder.
Open the file simple-grid.html in your web browser. Does it look familiar?
In Visual Studio Code open the same file, simple-grid.html. Open also the css file that is used to style the esimple-grid page.
Let's examine those two files. Fee free to make changes to the styling file and observe how these changes affect the appearance of the simple-grid page. When you feel comfortable that you have a good understanding of how this particular css code works, you can move to the next task.
Task 1: Get started
Open the files index.html
and gryffindor.html
in your browser. These are our
starting, un-styled documents.
Our goal in this lab is to add style to these pages, and end up with something like this:
and
Open these two html pages (index.html and gryffindor.html) in your text editor, and examine their html code. In particular, pay attention to the various elements with an id and those that belong to a class. Draw a diagram of the page elements on your notebook. You can also use Chrome's Developer Tools
to help you with that, if you wish.
Answer the following questions for the "index.html":
- How many elements does the
"the_index_grid"
element contain? What are their id's/classes? - Which elements belong to the same class? What is the name of that class?
Answer the following questions for the "gryffindor.html":
- How many elements does the
"the_house_grid"
element contain? What are their id's? - Which elements belong to the same class? What is the name of that class?
Task2: Attach a style sheet
-
Link
styles.css
to bothindex.html
andgriffindor.html
documents, and make sure they "talk to each other".(Notice: We are using one style sheet to style both html pages.)
Task3: Arrange elements on the page
Now you can start adding CSS code to styles.css
, aiming to a placement of its elements like what you see in the pictures above.
Defer dealing with things like styling colors, background images, fonts, paddings, margins etc for later.
You may want to give a name to each element in the class houses
so we can ferer to them easily when placing them on the grid. Something like:
#gryf { grid-area: gryfHouse; }
Think:
- How many columns do you need in the
"the_index_grid"
? How many rows? - Which part of the total available width should each column occupy? Use fr units, as in the example below.
- What are the names of each element that goes into the grid? How many columns each should occupy?
Now put the rules for the "the_index_grid"
. Use these familiar rules as your starting point (taken from the code you worked with in task 0):
.undersea { display: grid; grid-template-columns: 1fr 3fr; grid-template-areas: 'main_top main_top' 'left_col right_col'; }
Repeat the same steps for the "the_house_grid"
in the gryffindor.html page.
You should now have all the elements on the two pages arranged properly. All that remains is to style them.
Task 4: Style the different elements
If time permits:
Style the navigation bar
:
- give some breathing space around, and
- try to make the links it contains spread out a bit. Use the following rule for that:
line-height: 200%; /* give some vertical space between the links */
Center the header and the footer on their container (which is the whole page):
- You can use the following rule on each of them:
text-align: center;
Work on styling the houses
class elements:
- give each section a border, and some breathing space around, as well as to the text inside them.
- make the text in each section "flow" next to the little image ("crest"):
.crest { float: left; }
Now give some background color or image of your choice to some (or all) elements on the page.