Welcome to the layout lab! This page contains the instructions for different layout strategies one can use in CSS. There are a couple of different options in CSS layout, but you'll learn that some are easier and more reponsive than others!
First, download this HTML webpage, as well as the puppy image that it uses. Also create a CSS file to go along with the webpage, and <link> the CSS file within the <head> section of the page.
We still want to make sure we get some practice incorporating good design into this page, so start by importing these fonts into your CSS:
@import url('https://fonts.googleapis.com/css?family=Asul:700|Chivo:300');
-
A font family of
"Chivo"andsans-serif - A background color of
#f4f4f4 -
A bottom padding of
8em(this will become important later) - A width of
80% -
A centered orientation by setting
margin-leftandmargin-righttoauto
-
A font family of
"Asul"andsans-serif
With that set up, follow the instructions below to set various layout properties.
Let the Layout Begin
Wrap the <h1> and <h2> at the beginning of the page in a
<header>, and center that with the text-align
property.
Below this text is the column container area. Wrap the two columns
together into this one container area (<div> is appropriate to
use here because there is no clear semantic meaning to the grouping of
the two columns), and make that container a flex container by setting
it's display property to flex. The container
should also be 70% wide, and centered in the page.
Right column
This column is on the right of the main content area. It should take
up 2/3 of the container area width. Accomplish this by setting its
flex-basis value to 67%.
Float
the above image to the left, so that it's to the left of this text
instead of above it. Also set it's width to
200px so that it isn't so huge. The height will
automatically adjust to maintain the scale of the image.
For this paragraph, we don't want the text to wrap around the
floating image anymore. Use clear: both to move this
paragraph below the floating image. Give it an id so
that you can select this paragraph specifically in your CSS.
Our doggo looks a little cramped at this point too, so let's set
margin-right and margin-bottom to 1em to
give him some space.
Both columns are also looking a bit cramped, so let's give them
2em of padding and 2em of margin. Give both
columns a class so they can share style and you don't have to duplicate
your CSS for each column.
Let's also have some fun styling these columns into the popular card design seen on a lot of websites today. Using the same column class that was just created we can set:
- The column background color to
white - The border radious to
5px - The box shadow to
0 0 45px #DDDDDD