Your good friend has tried to make a website for a sushi restaurant, but they ended up making a complete mess of it ๐ฃ .
Open the diner.html
file and give it a look in the preview--it's totally unusable. Let's add some style that can make it easy to view and use.
Be sure to use your references! For each design task, you will need to find the right property and use it correctly!
This is what your Menu should look like (feel free to change colors or add more!). Read on below if you need step-by-step help!
For starters, the images are way too large and are preventing us from seeing any of the content.
- Set the
max-width
of all the image elements to something much more manageable, like400px
.
Phew, much better. Even with the images sized down, however, it's hard to see where all the elements being and end.
- Just for now, give everything a small red border using the "universal selector"
Ok, now we can see where all the elements start and end, which is nice to know as we experiment with the css. Given that this is something we don't want in our final product, we can delete it or just 'comment it out' by hitting Ctrl /
on that line of CSS.
Let's make our site more beautiful with a little leg work.
- Give every div element a solid black
border
(you can get rid of this later) - Set the
background-color
of the body. - Round off the corners of the images using the
border-radius property
- The descriptions can run on too long. Give every element with the "description" class a
width
value that keeps them about as wide as the images. - It's hard to tell how things are arranged on the page the way the owner wants them to be: give every member of the "group" class a
background-color
and aborder
- Center all headings and images on the page using text-align in the "group" class
- The "group" class members still feel a little stuffy: give them a few pixels of
padding
to separate their content from their borders and a nicemargin
of20px
to give them some elbow room from one another. (We'll learn more about margin and padding later on.)
Did you know that elements can have multiple class names? In line 18, for example, you will see a div that has a class attribute of "group featured", and because class names can't have spaces, this element has the group class, as well as the the featured class.:
<div class="group featured">
- Give elements that have BOTH the group class and the featured class a specially colored background hint
Stop and notice that at this point, there are two different CSS selectors that are telling the featured div to have a different colored background color. Since the one with multiple class names is more specific, however, its styles will override, or 'cascade' over the selector with just .group {...}
So far, we've made some good changes, but the font is still UGLY.
- Select all the h1 AND h3 tags with one selector and change the
font-family
to "Helvetica".
Ok, 'Helvetica' is a little better, but it's still not great.
- Go to Google Fonts
- Add a font by clicking the
+
symbol - follow the directions on the tab to add the font to your page
- Make the
li
elements in thenav
havedisplay: inline-block;
property, a specialbackground-color
,border-radius
,padding
, andmargin-left
- Make the
a
elements within anyli
element have a specialcolor
,font-weight
, and notext-decoration
- Give any element with the class "item-container" that is inside a group a
width
of 40% and set thedisplay
toinline-block